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…

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here