AnimasyonUI/UX

Kotlin ile Carousel Android App

Kullanıcı deneyimini arttıran elementler ile etkileşimli kullanıcı arayüz tasarlamak projenin yaşam döngüsü için çok önemlidir.

Bu makale Kotlin dili ile  Android Viewpager2 widget’ına Carousel efektini ekleyerek slider yapımını örnekleyecektir.

Carousel efekti ile yapılan makale resim ve başlığının içerdiği slider örnek görüntüsü;

Proje kodlarına github linkinden ulaşabilirsiniz.

1-Proje Ayarları

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- Adapter Oluşturma

Custom Listview mantığında olduğu gibi burada da bir Adapter sınıfı oluşturmamız gerekiyor. Adapter sınıfında bir tane item yapısında neler olacağı belirlenir. İtem’da nasıl bir arayüz olacağını tanımlamak  için item.xml oluşturalım. Item köşelerinin yuvarlak gözükmesi drawable dizinin içine card_background xml oluşturalım. Bunu item.xml’de kullanacağız.

item.xml

 

CarouselRVAdapter adında bir sınıf oluşturalım. Bu adapter sınıfında MainActivity sınıfından gelecek olan başlık ve resim değerlerini arayüze dinamik olarak nasıl yerleştireceğimizi göreceksiniz.

3-Carousel Efektini Viewpager2 Ekleme

İlk önce Xml dosyamızda Viewpager2 widget’ı ekleyelim.

 

MainActivity sınıfımızda üstteki layout xml kullanacağız. Bu sınıfta ViewPager2 widget’ına Carousel efektini ekleyebilmek için apply fonksiyonunu kullandım. Fonksiyonda kullandığım clipChildren, clipToPadding özelliklerinin detaylı açıklamasını Google dokümantasyonundan erişebilirsiniz.

 

Proje kodlarına github linkinden ulaşabilirsiniz.

Kaynaklar

1- https://developer.android.com/reference/android/view/ViewGroup.html#setClipChildren(boolean)

 

Bülten
Bültene abone ol

Bültene abone olarak yeni makalelerimden haberdar olun.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir