Android Bottom Navigation Bar Kullanımı

Material Design, Google tarafından geliştirilen ve Android 5.0 Lollipop sürümüyle kullanılmaya başlanan bir tasarım dilidir. Bottom Navigation Bar ise Material Design ile sunulan bir menü çeşididir. Tek dokunuşla uygulamanın en çok kullanılan arayüzleri arasında geçiş yapmayı sağlar. Menünün altta olması ise kullanım kolaylığı sağlamaktadır. Youtube, Instagram gibi popüler uygulamalar bu menüyü kullanmaktadır.

Uygulamanızda yaklaşık 4 tane üst düzey sayfa varsa Bottom Navigation Bar kullanmak idealdir. Bu sayı 2 ise Tab View, 5’ten fazla ise Navigation Drawer kullanmak daha iyi olacaktır.

Uygulamanıza Bottom Navigation Bar eklemek için 2 yöntem mevcut. Android Design Support Library veya 3. sınıf bir kütüphane kullanabilirsiniz. Bu yazıda 3. sınıf bir kütüphane ile kullanımı anlatacağım.

Başlarken

Öncelikle app/build.gradle dosyasına aşağıdaki kodu eklemelisiniz.

dependencies {
compile 'com.aurelhubert:ahbottomnavigation:0.1.3'
}

Not: Bu kütüphaneyi kullanabilmek için minSdk 14 ve üzeri olmalıdır.

Layouta Bottom Navigation Ekleme

Bunun için üst layoutun CoordinatorLayout olduğuna emin olun. Bu, alt menünün SnackBar ve FAB ile doğru şekilde hareket etmesini sağlar.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"/>

    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:background="#EFEFEF"/>

    <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>

</android.support.design.widget.CoordinatorLayout>

Java’ya Geçiş

Her Bottom Navigation Bar öğesi farklı bir rengi gösterir. Gösterim amaçlı olarak her bir öğenin tıklanması fragment rengini değiştirecek. Ancak idealde burada farklı fragmentlar yüklenir.

Java tarafında alt menü kullanmak 3 adımda yapılır.

1. Öğeleri Oluşturma

Bottom Navigation öğeleri oluşturulur. Bu işlemde birden fazla öğe tanımlama yöntemi vardır. Ancak en azından, başlık ve ikon eklenmelidir.

AHBottomNavigationItem item1 = new AHBottomNavigationItem(R.string.bottomnav_title_0, R.drawable.ic_map_24dp);

2. Öğeleri Alt Menüye Ekleme

Öğeler tanımlandıktan sonra aşağıdaki metod ile menüye eklenir.

bottomNavigation.addItem(item1);

3. Dinleyiciyi Ayarlama

Son olarak, eklenen öğe tıklamalarının dinlenmesi gerekmektedir. Bunun için aşağıdaki kod eklenmelidir.

bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {
@Override
public void onTabSelected(int position, boolean wasSelected) {
fragment.updateColor(Color.parseColor(colors[position]));
}
});

Bu kod ile menü öğesinin tıklanmasına göre fragment rengi değişecektir.

Ayrıca, varsayılan öğenizi ayarlamayı unutmayın. Bu öğe, kullanıcıların göreceği varsayılan (ana sayfa) ekranı gösterir.

// Birinci öğeyi ana ekran olarak ayarlama.
bottomNavigation.setCurrentItem (0);

Menünün arkaplan, aktif öğe ve inaktif öğe renkleri ayarlanır.

bottomNavigation.setDefaultBackgroundColor(Color.WHITE);
bottomNavigation.setAccentColor(ContextCompat.getColor(context, R.color.yourAccentColor););
bottomNavigation.setInactiveColor(ContextCompat.getColor(context, R.color.yourInactiveColor));

Bu temel ayarlar ile Bottom Navigation Bar şu şekilde görünür.

Klasik Bottom Navigation Bar görünümü

Buradan kütüphane ile ilgili detaylı kullanımları inceleyebilirsiniz.

Kaynak: http://blog.iamsuleiman.com/bottom-navigation-bar-android-tutorial/