Android’de Carousel Efekti ile Image Slider Yapımı

Yazılım projelerinde, kullanıcıların istek ve beklentilerini öngörerek bunları kullanıcı arayüz ekranlarına doğru ve işlevsel bir tasarım olarak aktarmak çok önemlidir. Bu yüzden, tasarımda kullanıcı deneyimini arttıran elementler kullanmanın önemi büyüktür.

Bu makalemde  Android Viewpager2 arayüz widget’ına Carousel efektini ekleyerek image slider yapmayı örnekleyeceğim.

ViewPager yapısından ViewPager2’ye geçişin avantajları ve bir Android uygulamasında ViewPager2 kullanımı konularıyla ilgili “Android ViewPager2 Kullanımı” makalemden bilgi edinebilirsiniz.

Carousel efekti ile resimleri slide olarak görüntüleyen örneğin ekran görüntüsü;

Projemin kodlarına github linkinden hızlıca ulaşabilirsiniz.

1-Gerekli Kütüphanelerin Eklenmesi

ViewPager2 widget, android.support kütüphanesinde bulunmamaktadır. ViewPager2 kullanabilmek için AndroidX kütüphanesine geçmeniz gerekir.

Dilerseniz AndroidX Kütüphanesine Geciş adlı makalemi okuyarak, var olan projelerinizi AndroidX yapısına kolaylıkla geçişini sağlayabilirsiniz.

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Viewpager2 kütüphanesini yüklüyoruz.

2-Java kodlama ile işlevsellik oluşturma

Örneğimizi oluşturabilmek için 2 tane Java sınıfı kullandım. İlk önce MainActivity sınıfında, ViewPager2 widget’ının hangi yönde slide işlemini yapacağını tanımladık. Sonrasında MyAdapter sınıfındaki resim nesnelerini ViewPager2’ye yükleyebilmek için setAdapter metodunu kullandık.

ViewPager2 nesnesinin setPageTransformer metodundan faydalanarak, ViewPager2 widget’da bulunacak resimlere carousel efekti eklendi. Daha detaylı açıklama kodlar arasındaki açıklamalarda bulunmaktadır.

MyAdapter.java, ViewPager2 widget’ının içinde gösterilecek, resimlerimizi eklediğimiz sınıftır. ImageView nesnenini tanımlayıp, drawable dosyasındaki resimlerimizi atadık. Daha detaylı açıklama kodlar arasındaki açıklamalarda bulunmaktadır.

3-Arayüz Kodlaması

Örneğimizdeki görüntüyü elde etmek içim, 2 tane xml dosyasında kodlama yapmamız gerekmektedir.

activity_main xml kodlarımızda ViewPager2 nesnesini ekledik. MainActivity sınıfında kullandık.

row_item xml kodlarımızda ImageView nesnesini ekledik. MyAdapter sınıfında kullandık.

Projemin kodlarına github linkinden hızlıca ulaşabilirsiniz.