Android – Kotlin ile BottomAppBar Örneği

Merhabalar,

Bugünki dersimizde Google I/O2018 ‘de tanıtılan ve benim yeni yeni projelerimde kullandığım BottomAppBar ‘ı detaylı bir şekilde inceleyeceğiz.

BottomAppBar Tasarım olarak aşağıdaki gibidir.

Resim : https://medium.com/@emre.tekin/bottomappbar-new-material-components-for-android-5040e7a608f0

Mevcuttaki toolbar ‘lar en üst ‘te konumlanmış ve kullanım açısından zorken, BottomAppBar kullanım açısından kullanıcılara daha kolay bir arayüz sunuyor. En önemli özelliği tek el kullanımı sağlamasıdır.

MaterialComponent kütüphanesini projemize dahil etmek için;

  • Build.gradle (Project) ‘i açın.
  • allproject altında google’ ın ekli olduğuna emin olun.

allprojects {
repositories {
google()
jcenter()
}
}

  • Projeyi implement ‘e edin.

Daha detaylı bilgiye aşağıdaki adresten erişebilirsiniz.

https://material.io/develop/android/docs/getting-started/

Son Versiyonları aşağıdan öğrenebilirsiniz.

https://maven.google.com/web/index.html

https://mvnrepository.com/artifact/com.google.android.material/material

Unutmayın ! : BottomAppBar her zaman Coordinator Layout ‘un içerisinde olmak zorundadır. Detaylı Bilgi için;

https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout

Gelelim Tasarımımızı yapmaya,

Layout Dosyamız –> activity_main.xml

Burada neler yaptığımızı anlatırsak. Bir tane constraintLayout içerisine text view ve coordinatorLayout ekledik. BottomAppBar Coordinator layout ile entegre ‘dir. Yukarıda daha detaylı bilgiye erişebilirsiniz. İçerisine de bir fab button attık.

Tasarımımız aşağıdaki şekilde olacaktır.

Resim : https://medium.com/material-design-in-action/implementing-bottomappbar-material-components-for-android-f490c4a01708

BottomAppBar aşağıdaki özelliklere sahiptir. Sizde bu özellikleri kendi tasarımınıza uygun olacak şekilde güncelleyebilirsiniz.

Resim : https://medium.com/material-design-in-action/implementing-bottomappbar-material-components-for-android-f490c4a01708

app:backgroundTint –> Arka Plan rengi için kullanılır.

app:fabAlignmentMode –> End ve Center özelliği sahiptir. Yukardaki resimde center iken herhangi bir işlemde end yapabilirsiniz. Örnek aşağıdaki resimdedir. Bu proje de de örnek olarak uygulanmıştır.

Resim : https://medium.com/material-design-in-action/implementing-bottomappbar-material-components-for-android-f490c4a01708

app:fabAttached –> Fab button’un bottomappbar ile bütünleşik mi olacağı yoksa ayrı olarak mı sunulacağına ilişkin ayardır.

Resim : https://medium.com/material-design-in-action/implementing-bottomappbar-material-components-for-android-f490c4a01708

app:fabCradleDiameter –> Fab button ile bottomAppBar arasındaki açıyı ayarlıyor.

Resim : https://medium.com/material-design-in-action/implementing-bottomappbar-material-components-for-android-f490c4a01708

app:fabCradleRoundedCornerRadius –> Köşe eğrisinin yarıçapının buluşma noktasındaki yarıçapını ve BottomAppBar’ın yatay kısmını belirtir.

Resim : https://medium.com/material-design-in-action/implementing-bottomappbar-material-components-for-android-f490c4a01708

app:fabCradleVerticalOffSet –> fab Buttonunun aşağıdaki yerini belirtir.

Gelelim MainActivity Kısmına :

menu kısmı için –> bottomappbar

CoordinatorLayout ‘un bir child elemanı olan BottomSheet ‘i ekleyeceğiz. Detaylı Bilgi için;

https://material.io/develop/android/components/bottom-sheet-behavior/

O zaman hadi başlayalım tasarıma :

Menü Kısmı :

ve son olarak Bottom Navigation Drawer ‘ı görüntülemek için Fragment yazmaya..

Uygulama Resimleri :

Projeyle ilgili tüm kodlara aşağıdaki adresten ulaşabilirsiniz.

https://github.com/umiitkose/BottomAppBar

Okuduğunuz için teşekkür ederim, İyi Çalışmalar Herkese..

Yazar: umiitkose

Bir cevap yazın

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