Android – Bottom Navigation Oluşturmak

 

Merhaba dostlar bugün sizinle Android platformunda bottom navigation oluşturma konusuna değineceğiz, bu yazıda paylaştığım kodların olduğu örnek uygulamamın bulunduğu github linkini ise yazının en altında bulabilirsiniz.

Bottom navigation‘ı, uygulamamızda eğer sayfa navigasyonunun ekranımızın altında, isimli ve logolu şekilde gözükmesini istediğimiz durumlarda kullanmaktayız.

Google‘ın bottom navigation kullanırken nelere dikkat etmemiz gerektiğini anlattığı makaleyi şurada bulabilirsiniz, ben de bu konulardan bazılarını sizinle paylaşacağım. Örneğin; navigasyon sayımız 3ten az, 5ten fazla olmamalı. Bu durumlarda google, tab mantığını kullanmanızı önermekte. Bir diğer öneri ise, bottom navigation ve tab navigasyon seçeneklerini aynı anda kullanmamanız. Bunun sebebi ise kullanıcıda kafa karışıklığı yaratması, hangi contentin hangi navigasyona ait olduğunun karıştırılabilir olmasıdır. Bunlar gibi bir çok öneri sunuyor Google, bottom navigation hakkında. Makaleyi okumanız nelere dikkat etmeniz gerektiğini anlamanızda size yardımcı olacaktır.

Şimdi ise bottom navigation‘ı nasıl oluşturacağız konuşmaya başlayalım. Yeni bir proje oluşturduktan sonra fragmentlarımızı ekleyelim, android studio içerisinde .java dosyalarımızın bulunduğu pakage’a sağ tıklayarak new>Fragment>Fragment(blank) yolunu izleyerek yeni üç adet fragment oluşturalım ve adlarını HomeFragment, DashboardNavigation ve NotificationNavigation koyalım.

Fragmentlarımızı projemize ekledikten sonra ana sayfamızdan fragmentlarımızı nasıl çağıracağımıza bakalım. İlk olarak ana sayfamıza gelelim, benim örneğimde ana sayfamın adı; MainNavigation.java. Aşağıda MainNavigation.java kodlarını ve yanlarında açıklamalarını bulabilirsiniz.

 

MainNavigation.java

package net.ahmetkilinc.bottomnavigationexample;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

public class MainNavigation extends AppCompatActivity {

    private ActionBar toolbar;      //Action Barımızın bir nesnesini oluşturuyoruz.
    private Fragment fragment;      //Fragmentlarımızı çağırabilmek için nesnemizi oluşturuyoruz.

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_navigation);

        toolbar = getSupportActionBar();

        toolbar.setTitle("Home");               //Açılış ekranımızın adını "Home" olarak belirledik ve toolbarımıza yazdırdık.
        loadFragment(new HomeFragment());       //Ve HomeFragment adlı fragment'ımızı çağırdık.

        BottomNavigationView navigation = findViewById(R.id.navigation);                    //.xml dosyamızda tanımladığımız id'si navigasyon olan BottomNavigationView'in nesnesini oluşturduk.
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);  //listener ekledik.
    }

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            switch (item.getItemId()) {         //bu switch case ile ise hangi navigasyonun seçildiğini
                                                //öğreniyor ve ona göre o navigasyonumuzu çağırıyoruz.
                                                //hangi navigasyon olduğuna göre de toolbarımıza o navigasyonun adını yazıyoruz.
                case R.id.navigation_home:

                    toolbar.setTitle("Home");
                    fragment = new HomeFragment();
                    loadFragment(fragment);         //loadFragment fonksiyonumuzu çağırıyoruz.
                    return true;

                case R.id.navigation_dashboard:

                    toolbar.setTitle("Dashboard");
                    fragment = new DashboardFragment();
                    loadFragment(fragment);
                    return true;

                case R.id.navigation_notifications:

                    toolbar.setTitle("Notifications");
                    fragment = new NotificationFragment();
                    loadFragment(fragment);
                    return true;
            }
            return false;
        }
    };

    private void loadFragment(Fragment fragment) {      //fragmentlarımızı çağırdığımız fonksiyon

        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.frame_container, fragment);
        transaction.addToBackStack(null);
        transaction.commit();
    }
}

 

MainNavigation.java dosyamızın design (.xml) dosyasına yani activity_main_navigation.xml dosyasına göz atalım şimdide. activity_main_navigation.xml interface dosyamıza bir frame_container ve bir navigation ekliyoruz. frame_container, fragmentlarımızı göstereceğimiz yer olacak. navigation kısmı ise fragmentlarımızın kullanıcı tarafından çağırılabileceği buttonlarımızın olduğu yer olacak. Aşağıda yine .xml dosyamızın kodlarına bakabilirsiniz.

 

activity_main_navigation.xml





    

    

    



 

.xml dosyamızı oluşturduktan sonra şimdi menümüzü oluşturalım, res component’ına sağ tıklayarak yeni bir directory oluşturalım (New>Directory) ve adına menu koyalım. menu directory’sinin içine sağ tıklayarak yeni bir Menu resource file ekleyelim (new>Menu resource file) ve adını navigation koyalım. örnek navigation.xml dosyasını da aşağıda görebilirsiniz. İçindeki item‘ları kendi projenize göre değiştirebilirsiniz.

 

navigation.xml





    

    

    



Evet dostlar bugün sizinle bottom navigation nasıl oluşturulur temel olarak konuştuk. Söz verdiğim gibi örnek uygulamamın github sayfasına şuraya tıklayarak ulaşabilirsiniz. Umarım bir gün işinize yarar ve projelerinizde kullanırsınız, herhangi bir sorunda yorum ile veya mail yolu ile bana ulaşabilirsiniz. İyi günler dilerim.

ahmet

Ahmet Kılınç - Software Developer

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. Orçun dedi ki:

    Epey faydalı oldu, sayenizde ufak ufak öğreniyoruz biz de birşeyler.

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.