Jetpack Compose ile Bottom Navigation Tasarlamak

Bu mobide, Jetpack Compose ile adım adım bottom navigation tasarlamayı öğrenceksiniz.


Görsel Referansı


Mobil uygulamaların çoğunda karşınıza çıkan bottom navigation’u hepiniz biliyorsunuz. Pek çok uygulamada yer alan bottom navigation, ekranın en altında yer alan ve ekranlar arası geçiş sağlamak amacıyla kullanılan bir araçtır. Her bir ekran, bir metin ve bir ikon ile temsil ediliyor ve kullanıcı ilgili içeriğe bastığı zaman ilişkili sayfaya yönlendiriliyor.


Bottom Navigation Tasarımı


Tasarlayacağınız bottom navigation, üç içerikten oluşuyor. Bottom navigation’a tıklanıldığı zaman ise bir animasyonla birlikte içeriğin başlığı görünüyor.


Bu tasarımda diğer iki içeriğin aksine ortadaki içeriğin daha farklı olduğuna ve bottom navigation'un sınırlarını aştığına dikkat etmek gerekiyor.


Açık ve koyu tema için tasarımları aşağıda görebilirsiniz.




Proje


Adım 1: BottomNavItem Data Class


Bottom navigation’da bulunacak her bir içeriğin bazı özelliklere sahip olması gerekiyor. Temelde bunlar şu şekilde:

  • Route: İçeriğin temsil edeceği ekran için,

  • Title: İçeriğin bulunacağı yazı için,

  • Icon: İçeriğin bulunacağı görsel/ikon için.

Bu özellikleri barındıran bir data class yazarak başlayın.


data class BottomNavItem(
    val route: String,
    val title: String,
    val icon: ImageVector
)

Adım 2: Ripple Effect