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…