Membuat Image Slider Otomatis Menggunakan Swipeable di Android Studio

Membuat Image Slider Otomatis Menggunakan Swipeable di Android Studio

Membuat Image Slider Otomatis Menggunakan Swipeable di Android Studio
Membuat Image Slider Otomatis Menggunakan Swipeable di Android Studio

Hallo sobat ruangcoder,  artikel kali ini tentang Membuat Image View Slider Otomatis Menggunakan Swipeable di Android Studio, perlu sobat ketahui admin juga sebelumnya sudah menulis artikel tentang membuat imageview slider dengan viewpager di android studio , Simana artikel yang sebelumnya untuk slidernya masih manual ya dan sobat bisa liha disini. seperti yang admin jelaskan di artikel sebelumnya imageview slider ini digunakan oleh ribuan aplikasi android yang servernya banyak jenis distribusi konten dalam aplikasi mereka seperti aplikasi E-Commerce, seperti tokopedia, shopee, dan masih banyak lain nya , yang tentu sobat sering lihat.

Membuat ImageView Slider Otomatis Menggunakan Swipeable di Android Studio :


Langkah pertama silahkan sobat buka android studio sobat,saat terbuka android studio sobat klik -> Start a new Android Studio project -> pilih Empty Activity -> kasih nama project tersebut dengan nama "AndroidImageSlider" kemudian pilh API 19: Android 4.4 (KitKat) langsung Finish saja. Lalu sobat tunggu sampai Gradle dll nya selesai di Synchrone , tunggu saja, admin anggep sobat sudah selesai, jadi kita lanjut.

Seperti biasa karena ini hanya berbentuk latihan , kita hanya memodifikasi file bawaanya, yaitu MainActivity.xml dan MainActivity.java , kemudian kita menambahkan akses ( perizinan ) internet. di AndroidManifest, karena disini kita akan menampilkan gambar slide nya itu, dari internet, tidak dari folder res kita, Lalu Membuat dan menambahkan Metode Memanggil untuk Menambahkan nama Gambar dan URL di HashMap, dan mengintergrasikan nya di Gradle kita, oke langsung saja langkah pertama, kita akan mengintegrasikan nya terlebih dahulu

Silahkan sobat ke Gradle Scripts -> build.gradle (Module:app)  dan tambahkan code dibawah ini.



    implementation 'com.squareup.picasso:picasso:2.3.2'
    implementation 'com.nineoldandroids:library:2.4.0'
    implementation 'com.daimajia.slider:library:1.1.5@aar'

Langkah selanjutnya kita akan menambahkan perizinan (akses) internet, pada AndroidManifest.xml , seperti gambar dibawah ini.



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

Selanjutnya kita akan menambahkan codingan dibawah ini, di dalam file MainActivity.xml, ingat menambahkan bukan mengubah keseluruhan ya.



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

Nah langkah yang terakhir adalah kita akan membuat fungsinya tentunya dengan menambahkan codingan dibawah ini ke dalam file MainActivity.java berhubung disini admin menggunakan gambar atau menampilkan gambar yang berada di internet, maka codingan yang untuk menampilkan gambar di dalam folder admin beri tag komentar agar tidak error, kalau sobat ingin menggunakannya ya silahkan, disitu sudah admin jelaskan juga, dengan tag komentar diatasnya.





import android.util.Log;
import android.widget.Toast;
import com.daimajia.slider.library.Animations.DescriptionAnimation;
import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;
import com.daimajia.slider.library.Tricks.ViewPagerEx;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity
        implements BaseSliderView.OnSliderClickListener,
        ViewPagerEx.OnPageChangeListener
{

    SliderLayout sliderLayout ;

    HashMap<String, String> HashMapForURL ;

    HashMap<String, Integer> HashMapForLocalRes ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        sliderLayout = (SliderLayout)findViewById(R.id.slider);

        //Call this method if you want to add images from URL .
        AddImagesUrlOnline();

        //Call this method to add images from local drawable folder .
        //AddImageUrlFormLocalRes();

        //Call this method to stop automatic sliding.
        //sliderLayout.stopAutoCycle();

        for(String name : HashMapForURL.keySet()){

            TextSliderView textSliderView = new TextSliderView(MainActivity.this);

            textSliderView
                    .description(name)
                    .image(HashMapForURL.get(name))
                    .setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(this);

            textSliderView.bundle(new Bundle());

            textSliderView.getBundle()
                    .putString("extra",name);

            sliderLayout.addSlider(textSliderView);
        }
        sliderLayout.setPresetTransformer(SliderLayout.Transformer.DepthPage);

        sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);

        sliderLayout.setCustomAnimation(new DescriptionAnimation());

        sliderLayout.setDuration(3000);

        sliderLayout.addOnPageChangeListener(MainActivity.this);
    }

    @Override
    protected void onStop() {

        sliderLayout.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.d("Slider Demo", "Page Changed: " + position);

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    // fungsi yang di nonaktifkan ini berfungi untuk menampilkan slide gambar dari url sobat

    public void AddImagesUrlOnline(){

        HashMapForURL = new HashMap<String, String>();

        HashMapForURL.put("CupCake", "https://www.biggerbolderbaking.com/wp-content/uploads/2017/09/1C5A0996.jpg");
        HashMapForURL.put("Donut", "https://www.sprinklesomesugar.com/wp-content/uploads/2017/11/IMG_4730-2.jpg");
        HashMapForURL.put("Eclair", "https://www.bakefromscratch.com/wp-content/uploads/2019/06/Eclairs175JBfull-1-696x557.jpg");
        HashMapForURL.put("Froyo", "https://media-cdn.tripadvisor.com/media/photo-s/14/26/39/46/low-fat-frozen-yogurt.jpg");
        HashMapForURL.put("GingerBread", "https://www.onceuponachef.com/images/2016/12/Gingerbread-Men-2.jpg");
    }

    // fungsi yang di nonaktifkan ini berfungi untuk menampilkan slide gambar dari folder sobat

//    public void AddImageUrlFormLocalRes(){
//
//        HashMapForLocalRes = new HashMap<String, Integer>();
//
//        HashMapForLocalRes.put("CupCake", R.drawable.cupcake);
//        HashMapForLocalRes.put("Donut", R.drawable.donut);
//        HashMapForLocalRes.put("Eclair", R.drawable.eclair);
//        HashMapForLocalRes.put("Froyo", R.drawable.froyo);
//        HashMapForLocalRes.put("GingerBread", R.drawable.gingerbread);
//
//    }
}


Nah sobat kita sudah selesai membuatnya, silahkan sobat jalankan aplikasinya, dan lihat hasilnya , ini hasil admin yang ada gambar dibawah ini,



 oke mungkin sekian tutorial android kali ini sobat, apabila kekurangan kata dalam menyampaikan mohon dimaafkan, sampai ketemu lagi sobat di artikel yang akan datang nanti, terimakasih sobat sudah berkunjung.

Anda mungkin menyukai postingan ini