Create Image Slider on Android using AndroidImageSlider

Assalamu'alaikum Wr. Wb.

Selamat Siang teman - teman.

Hari ini gue akan sharing sesuatu mengenai salah satu library yang sangat bagus untuk pembuatan slider di aplikasi android, yaitu AndroidImageSlider.
Apabila aplikasi kalian membutuhkan slider yang professional, bisa coba menggunakan slider ini. Langsung aja yuk.

Pembuatan dan Persiapan Project

---

1. Untuk tahap pertama, kita akan buat project baru terlebih dahulu. Buka Android Studio, kemudian klik "Start a New Android Studio Project".
   
   
2. Kemudian masukkan Application Name dan Company Domainnya.
   
3. Pada Target Android Devices, pilih Minimum SDK yang diinginkan, disini gue menggunakan API 19: Android 4.4 Kitkat.
   
   
4. Pada bagian Activity, pilih Empty Activity karena kita ingin membuatnya dari awal.
   
   
5. Untuk nama activity dan layoutnya kita biarkan default saja. Setelah itu klik Finish.
   
   
6. Setelah semua ter-load, masuk ke gradle app module.
   
7. Kemudian copy-paste syntax gradle ini didalam dependencies bracket.
   

   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'
   

   Kemudian klik Sync di pojok kanan atas.
   
   

Membuat Layout Slider & Memasukkan Gambar

---

8. Setelah gradle ter-sync, editactivity_main.xmlkemudian ubah syntax default<TextView>menjadi:
   

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

   Syntax diatas fungsinya untuk membuat layout dari slider kita. Kita bisa merubah ukuran panjangnya dengan mengubah value dari layout_height (yang dicetak miring)
9. Setelah itu bukaMainActivity.javakemudian tambahkanimplementspada main class dan buat variable baru untukSliderLayout.
   

   public class MainActivity extends AppCompatActivity
           implements BaseSliderView.OnSliderClickListener,
           ViewPagerEx.OnPageChangeListener{
   
       private SliderLayout sliderShow;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   

10. Lalu attach slider ke variable menggunakanfindViewByID.
    

    public class MainActivity extends AppCompatActivity
            implements BaseSliderView.OnSliderClickListener,
            ViewPagerEx.OnPageChangeListener{
    
        private SliderLayout sliderShow;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            sliderShow = (SliderLayout) findViewById(R.id.slider);
    

11. Setelah itu, kita sediakan path untuk gambarnya menggunakanHashMap, kita akan membuat slider dari gambar - gambar kucing ini.
    
    

    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            sliderShow = (SliderLayout) findViewById(R.id.slider);
    
    
            //-- HashMap image from web
            HashMap url_maps = new HashMap();
            url_maps.put("Bengong", "https://lh3.googleusercontent.com/rQPEV7eJZZNU_1clOKBnHIzZZMaD_rgKebi3OJEGVH6oURVodWnVrtXMMhidN5JvuJg=h310");
            url_maps.put("Melongo", "https://i0.wp.com/www.amazine.co/wp-content/uploads/2013/12/Kucing_1.jpg");
            url_maps.put("Apaaa", "http://islamidia.com/wp-content/uploads/2016/07/Kucing-dan-Kedudukannya-Dalam-Pandangan-Islam.jpg");
            url_maps.put("Bobo", "https://hellosehat.com/wp-content/uploads/2016/11/tidur-dengan-kucing.jpg");
    

    Url diatas adalah url yang akan di tarik gambarnya dari server di web. Apabila kita memiliki gambar sendiri dan disimpan di Drawable, kita bisa menggunakan syntax:
    

    HashMap file_maps = new HashMap();
            file_maps.put("Bengong",R.drawable.kucing_bengong);
            file_maps.put("Melongo",R.drawable.kucing_melongo);
            file_maps.put("Apaaa",R.drawable.kucing_apaaa);
            file_maps.put("Bobo", R.drawable.kucing_bobo);
    

12. Selanjutnya masukkan statementforuntuk melakukan looping gambar - gambar diatas.
    

    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            sliderShow = (SliderLayout) findViewById(R.id.slider);
    
            HashMap url_maps = new HashMap();
            url_maps.put("Bengong", "https://lh3.googleusercontent.com/rQPEV7eJZZNU_1clOKBnHIzZZMaD_rgKebi3OJEGVH6oURVodWnVrtXMMhidN5JvuJg=h310");
            url_maps.put("Melongo", "https://i0.wp.com/www.amazine.co/wp-content/uploads/2013/12/Kucing_1.jpg");
            url_maps.put("Apaaa", "http://islamidia.com/wp-content/uploads/2016/07/Kucing-dan-Kedudukannya-Dalam-Pandangan-Islam.jpg");
            url_maps.put("Bobo", "https://hellosehat.com/wp-content/uploads/2016/11/tidur-dengan-kucing.jpg");
    
            //-- looping image stored
            for(String name : url_maps.keySet()){
                TextSliderView textSliderView = new TextSliderView(this);
                textSliderView
                        .description(name)
                        .image(url_maps.get(name))
                        .setScaleType(BaseSliderView.ScaleType.Fit)
                        .setOnSliderClickListener(this);
    
                textSliderView.bundle(new Bundle());
                textSliderView.getBundle()
                        .putString("extra", name);
    
                sliderShow.addSlider(textSliderView);
            }
    

13. Setelah itu masukkan preset dan Animation dari slider kita.
    

    //-- looping image stored
            for(String name : url_maps.keySet()){
                TextSliderView textSliderView = new TextSliderView(this);
                textSliderView
                        .description(name)
                        .image(url_maps.get(name))
                        .setScaleType(BaseSliderView.ScaleType.Fit)
                        .setOnSliderClickListener(this);
    
                textSliderView.bundle(new Bundle());
                textSliderView.getBundle()
                        .putString("extra", name);
    
                sliderShow.addSlider(textSliderView);
            }
    
            sliderShow.setPresetTransformer(SliderLayout.Transformer.Accordion);
            sliderShow.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
            sliderShow.setCustomAnimation(new DescriptionAnimation());
            sliderShow.setDuration(3000);
            sliderShow.addOnPageChangeListener(this);
        }
    

    Untuk durasi slider bisa kita atur sesuka hati mau berapa detik dengan merubah setDuration (Dengan satuan Milisecond)
14. Kemudian buatlah beberapa method lain, terutama methodonStopyang isinya memanggilstopAutoCycleuntuk mencegah terjadinya kebocoran memori akibat gambar yang terus berotasi.
    

    sliderShow.setPresetTransformer(SliderLayout.Transformer.Accordion);
            sliderShow.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
            sliderShow.setCustomAnimation(new DescriptionAnimation());
            sliderShow.setDuration(2000);
            sliderShow.addOnPageChangeListener(this);
        }
    
    
        @Override
        protected void onStop() {
            sliderShow.stopAutoCycle();
            super.onStop();
        }
    
        @Override
        public void onSliderClick(BaseSliderView slider) {
            Toast.makeText(this, slider.getBundle().get("extra") + "",
                    Toast.LENGTH_SHORT).show();
        }
    
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
        }
    
        @Override
        public void onPageSelected(int position) {
            Log.e("Slider Demo", "Page Changed: " + position);
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
    
        }
    

15. Setelah itu build aplikasi dan jalankan di device/emulator kalian, hasilnya:
    
    

Bagaimana? keren kan?
Aplikasi ini masih sangatlah sederhana, kalian masih bisa merubah animasi gambarnya, mengubah templatenya layarnya dan masih banyak lagi. Bagi kalian yang mau mengeksplorasinya lebih lanjut, silahkan kunjungi Github daimajia.

NOTE

---

Disarankan untuk sekalian belajar jangan hanya di copy-paste codingannya, tapi diketik manual. Karena selain agar kita bisa paham alurnya, juga untuk menghindari kesalahan coding / kesalahan function yang tidak ter-import pada project.

Sekian tutorial dari saya mengenai Cara Membuat Image Slider di Android menggunakan AndroidImageSlider. Apabila ada pertanyaan, silahkan masukkan dikolom komentar.

Thanks ^^.

---

Special Thanks:
Daimajia, Islamidia, Hellosehat, Amazine, Suarakucing