Cara membuat Image Slider dengan menggunakan Library Daimajia

Heyyoo gengs! Kembali bersama saya. Kali ini saya ingin membuat Image Slider dengan menggunakan Library Daimajia.

  1. Langkah pertama, tambahkan dependency Daimajia Image Slider pada gradle.
dependencies {
    	compile "com.android.support:support-v4:+"
    	compile 'com.squareup.picasso:picasso:2.3.2'
    	compile 'com.nineoldandroids:library:2.4.0'
    	compile 'com.daimajia.slider:library:1.1.5@aar'
}

2. Tambahkan permissions internet jika ingin load data dari internet dan read external storage jika file dari internet dichace pada local storage.

<uses-permission android:name="android.permission.INTERNET" /> 

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

3. Lalu tambahkan tampilan slidernya pada layout.

<com.daimajia.slider.library.SliderLayout
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="200dp"
/>

<com.daimajia.slider.library.Indicators.PagerIndicator
        android:id="@+id/custom_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        />

4. Lalu panggil image slider:

  • Panggil dengan url.
val url_maps = HashMap<String, String>()
url_maps["Hannibal"] = "http://mentoring.barajacoding.or.id/slider/2.jpg"
url_maps["Big Bang Theory"] = "http://mentoring.barajacoding.or.id/slider/3.jpg"
url_maps["House of Cards"] = "http://mentoring.barajacoding.or.id/slider/4.jpg"
url_maps["Game of Thrones"] = "http://mentoring.barajacoding.or.id/slider/5.jpg"
  • Panggil dengan file yang telah dimasukan ke drawable.
val file_maps = HashMap<String, Int>()
file_maps["Hannibal"] = R.drawable.slider_dua
file_maps["Big Bang Theory"] = R.drawable.slider_tiga
file_maps["House of Cards"] = R.drawable.slider_empat
file_maps["Game of Thrones"] = R.drawable.slider_lima

5. Lalu dibutuhkan perulangan pada image slider dan bundle untuk membawa datanya.

for (name in url_maps.keys) {
            val textSliderView = TextSliderView(context)
            // initialize a SliderLayout
            textSliderView
                .description(name)
                .image(url_maps[name]!!)
                .setScaleType(BaseSliderView.ScaleType.Fit)
                .setOnSliderClickListener(this)

textSliderView.bundle(Bundle())
            textSliderView.bundle
                .putString("extra", name)
            slider.addSlider(textSliderView)

6. Lalu tambahkan custom pada image slider (untuk merubah tampilan, animation, serta durasi pada image slider).

slider.setPresetTransformer(SliderLayout.Transformer.Accordion)
        slider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom)
        slider.setCustomAnimation(DescriptionAnimation())
        slider.setDuration(5000)
        slider.addOnPageChangeListener(this)

Hasil:

Source Code:

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        val url_maps = HashMap<String, String>()
        url_maps["Hannibal"] = "http://mentoring.barajacoding.or.id/slider/2.jpg"
        url_maps["Big Bang Theory"] = "http://mentoring.barajacoding.or.id/slider/3.jpg"
        url_maps["House of Cards"] = "http://mentoring.barajacoding.or.id/slider/4.jpg"
        url_maps["Game of Thrones"] = "http://mentoring.barajacoding.or.id/slider/5.jpg"

val file_maps = HashMap<String, Int>()
file_maps["Hannibal"] = R.drawable.slider_dua
file_maps["Big Bang Theory"] = R.drawable.slider_tiga
file_maps["House of Cards"] = R.drawable.slider_empat
file_maps["Game of Thrones"] = R.drawable.slider_lima

        for (name in url_maps.keys) {
            val textSliderView = TextSliderView(context)
            // initialize a SliderLayout
            textSliderView
                .description(name)
                .image(url_maps[name]!!)
                .setScaleType(BaseSliderView.ScaleType.Fit)
                .setOnSliderClickListener(this)

            //add your extra information
            textSliderView.bundle(Bundle())
            textSliderView.bundle
                .putString("extra", name)
            slider.addSlider(textSliderView)
        }
        slider.setPresetTransformer(SliderLayout.Transformer.Accordion)
        slider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom)
        slider.setCustomAnimation(DescriptionAnimation())
        slider.setDuration(5000)
        slider.addOnPageChangeListener(this)

    }

Sampai jumpa pada kesempatan berikutnya. Bye…

Leave a Comment