Android telefonlarda ekranın altında bulunan ve üzerindeki tıklanabilir kısayollar aracılığıyla herhangi bir ekran üzerindeyken erişilebilir olması istenen hedefler için kullanılan nesneye Bottom Navigation View diyoruz.
Google ın tavsiyesi en az 3, en fazla 5 adet bağlantının bu kısımda bulundurulması yönündedir. Google in bottom navigation view hakkındaki diğer tavsiye, uyarı ve önerileri için şu adres incelenebilir:
https://material.io/components/bottom-navigation#placement
1- Bottom Navigation View kullanılan örnek bir uygulama geliştirmek için yeni bir proje başlatalım.
2- Bottom Navigation kısmında hem metin hem ikon kullanabilmek için önce 3 adet ikon seçelim. Bunun için res klasörü altındaki drawable klasörü üzerinde sağ tıklayıp New > Vector Asset e ulaşalım ve gerekli isimlendirme, renklendirme vs yapalım.
3- res klasörü üzerinde sağ tıklayıp New > Android Resource Directory ile menu tipinde klasör oluşturalım.
4- Ardından oluşturulan menu klasörü üzerinde sağ tıklayıp New > menu resource file ile Bottom Navigation üzerinde görünmesini istediğimiz Item ları belirteceğimiz dosyayı oluşturalım.
5- 3 adet Item oluşturup bunlar için id, title, ve icon tanımlamalarını yapalım. Bu tanımlar Design sekmesi kullanılarak yapılabileceği gibi Code sekmesi kullanılarak da yapılabilir.
6- res > layout > activity_main.xml dosyasına gelerek varsayılan olarak bulunan Textview nesnesini kaldıralım. Palette kısmındaki aramayı kullanarak Bottom Navigation View nesnesini bulalım ve Compenent Tree sekmesine sürükleyelim.
7- material kütüphanesini eklemek için uyarı verecektir. Add diyerek ilgili kütüphanenin build.gradle (Module:app) içerisine eklenmesi sağlayabiliriz.
Ya da dependencies kısmına ilgili kütüphaneyi elle yazıp Sync Now ile kullanıma hazır hale getirebiliriz. (implementation ‘com.google.android.material:material:1.2.0’)
8- BottomNavigationView nesnesi için Attributes sekmesinden menu alanı için hangi tasarımı ekleyeceğimizi belirtelim.
9- Background alanına renk ataması yapalım. ( Android Studio bazen bottom navigation view için hata vererek önizleme kısmında arkaplanı siyah olarak gösterebilmekte ve ilgili menüleri göstermemektedir. Hata yokmuş gibi devam edip arkaplanı seçtikten sonra bu hata kalkmaktadır. )
10- Constraint Widget kısmından sağ+sol+alt için Constraint Layout a bağlayalım.
Constraints kısmından layout_height için wrap_content verelim.
11- Palette sekmesine gelerek aramadan FrameLayout nesnesini bulalım ve Component Tree sekmesine sürükleyerek eklenmesini sağlayalım. id tanımlayalım. Böylelikle oluşturacağımız fragment layout ları bu frame içerisinde görüntülenecektir. Constraint Widget kısmından sağ+sol+üst için Constraint Layout a bağlayalım. Alt için bağlamayı bottom navigation nesnesinin üstüne bağlayalım.
Frame Layout nesnesini BottomNavigationView nesnesine bağlama işlemi Design sekmesi üzerinden halledilemezse Code sekmesinden ilgili alana “app:layout_constraintBottom_toTopOf=”@+id/bottomNavigationView” kodu girilerek çözülebilir.
12- Bottom navigation üzerindeki item lara tıklanıldığında gösterilecek ilgili fragment ların layout tasarımlarını yapmak için res > layout klasörüne sağ tıklayıp New > Layout Resource File ile xml dosyalarını oluşturalım. 3 adet item olduğu için 3 fragment tasarlamamız gerekiyor. Bu yazıda tasarım olarak dosya için bir textview nesnesi eklenecek ve hangi fragment ta olduğumuzun anlaşılabilmesi için ilgili bir metin/kelime eklenecek.
13- Oluşturulan tüm layoutların bağlanacağı java classlarını oluşturmak için java klasörü altındaki paket adına sağ tıklayarak New > Java Class yolu ile 3 adet Fragment sınıfı oluşturalım. Bu sınıflarda Fragment özelliğini kullanabilmek için extend anahtar kelimesi ile Fragment sınıfından kalıtım almak gerekiyor.
14- Ardından sınıf parantezleri içinde onCreateView metodunu çağırarak java sınıfı ile ilgili layout dosyasını birbirine bağlama işlemini 3 java sınıfı için de yapmak gerekiyor.
15- MainActivity.java dosyasında BottomNavigationView nesnesini tanıtmak için onCreate metodu öncesinde: private BottomNavigationView bottom;
onCreate metodu içerisinde de bottom =findViewById(R.id.bottomNavigationView); kodunu girerek nesnemizi bağlıyoruz.
16- onCreate metodu içinde varsayılan olarak gelmesini istediğimiz fragment ı göstermesi için aşağıdaki kodu ekleyelim.
17- BottomNavigationView nesnesi için oluşturduğumuz bottom nesnesi üzerindeki itemların tıklanılması ile ilgili setOnNavigationItemSelectedListener metodunu çağıralım.
18- Hangi item tıklanıldı ise o item ile ilgili fragment tasarımının gelmesini ve ekranın altında bir toast mesajının belirmesini sağlamak için ilgili kodları girelim. ( Daha önce varsayılan olarak gelecek bir fragment belirlediğimiz için sonraki fragment tanımlarında add yerine replace kullandık. )
19- Emülator ya da mobil cihazımızdan çalıştırdığımızda Bottom Navigation View nesnesinin sağlıklı olarak çalıştığını görebiliriz.
