Android – Instagram Benzeri Menü (BottomNavigationView, Kotlin)

Merhaba sevgili android geliştiricileri. Bu makalemde sizlere instagramda gördüğümüz menüden bahseceğim.

Android BottomNavigationView Example
Android BottomNavigationView Example

BottomNavigationView fragmentler aracılığıyla birden fazla(en fazla 5) ekranı sunan bir menü. Bu menü tabiki sadece instagramda yok twitter, bionluk, udemy, netflix, spotify gibi uygulamalarda bu menüyü kullanıyor.

Android BottomNavigationView Example
Android BottomNavigationView Example

BottomNavigationView Nasıl Kullanılır?

  • Önce android projemizi oluşturalım.
  • BottomNavigationView kütüphanesini ve diğer google kütüphanelerini <app>/build.gradle içerisine şu şekilde import edelim.
    dependencies {
        implementation fileTree(dir: 'libs', include: ['*.jar'])
        implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
        implementation 'androidx.core:core-ktx:1.1.0'
        implementation 'androidx.appcompat:appcompat:1.1.0'
        implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
        implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'
        implementation 'com.google.android.material:material:1.2.0-alpha02'
    }
  • Menümüzü tasarlarken aynı context menü kullanıyor gibi menü dosyası oluşturalım. res/navigation.xml.
    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:id="@+id/home"
            android:icon="@drawable/ic_home"
            android:title="@string/home" />
    
        <item
            android:id="@+id/search"
            android:icon="@drawable/ic_search"
            android:title="@string/search" />
    
        <item
            android:id="@+id/share"
            android:icon="@drawable/ic_share"
            android:title="@string/share" />
    
        <item
            android:id="@+id/notifications"
            android:icon="@drawable/ic_notifications"
            android:title="@string/notifications" />
    
        <item
            android:id="@+id/profile"
            android:icon="@drawable/ic_profile"
            android:title="@string/profile" />
    </menu>
  • Şimdi MainActivity.kt için tasarım kısmını halledelim. activity_main.xml
    <?xml version="1.0" encoding="utf-8"?>
    <com.google.android.material.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="?android:attr/windowBackground"
            app:itemBackground="@color/bgBottomNavigation"
            android:foreground="?attr/selectableItemBackground"
            app:itemIconTint="@android:color/white"
            app:itemTextColor="@android:color/white"
            app:menu="@menu/navigation" />
    
    </com.google.android.material.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout>
  • Burada FramaLayout fragmentleri replace edeceğimiz view. Html ile iframe kullanmak gibi düşünebilirsiniz. Altında ise BottomNavigationView var. Menüyü tanımladıktan sonra kod kısmına geçelim.
  • HomeFragment, SearchFragment, ShareFragment, NotificationFragment ve ProfileFragment adında 5 adet Fragment dosyası oluşturduk. Başlangıçta bir işlevi olmadığı için hepsi birbirinin aynısı 5 Fragment dosyası olarak düşünebilirsiniz. Örnek olarak HomeFragment.kt
    class HomeFragment: Fragment(){
    
        override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
            val view: View = inflater.inflate(R.layout.fragment_home, container, false)
            return view
        }
    }
  • Şimdi MainActivity.kt
    class MainActivity : AppCompatActivity(), BottomNavigationView.OnNavigationItemSelectedListener {
  • Öncelikle OnNavigationItemSelectedListener’ı ekliyoruz. Olduğumuz menünün haricinde bir menüye tıklarsa geçiş için kullanacağız.
    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        navigationMenu.menu.findItem(item.itemId).isChecked = true //Menüde seçilen itemi belirtiyoruz
        when(item.itemId){
            R.id.home -> {
                setTitle(getString(R.string.home))
                replaceFragment(HomeFragment())
            }
            R.id.search -> {
                setTitle(getString(R.string.search))
                replaceFragment(SearchFragment())
            }
            R.id.share -> {
                setTitle(getString(R.string.share))
                replaceFragment(ShareFragment())
            }
            R.id.notifications -> {
                setTitle(getString(R.string.notifications))
                replaceFragment(NotificationFragment())
            }
            R.id.profile -> {
                setTitle(getString(R.string.profile))
                replaceFragment(ProfileFragment())
            }
        }
        return false
    }
  • Başlığı değiştirmek için setTitle adında bir fonksiyon yazıyoruz.
    private fun setTitle(title: String){ //Seçilen itemin başlığını yazdırıyoruz
        val actionBar: ActionBar? = supportActionBar
        actionBar?.title = title
    }
  • Ve son olarak Fragmentleri replace ederek FrameLayoutta göstermek için fonksiyon ekliyoruz.
    private fun replaceFragment(fragment: Fragment){ //Fragmenti ekliyoruz
        val transaction: FragmentTransaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.container, fragment)
        transaction.commit()
    }

    Şimdi test edebiliriz.

Android BottomNavigationView
Android BottomNavigationView

Bu yazıda android BottomNavigationView kullanımı konusuna yer verdik. Proje kodlarına buradan ulaşabilirsiniz. Soru, görüş ve önerileriniz için lütfen yorum yapmayı unutmayın.

Photo of author

Mehmet Kurtgöz

Android Developer.

Yorum yapın