Tutorial Android Membuat Bottom Navigation Lengkap dengan Android Studio

Tutorial android bottom navigation
Tutorial android bottom navigation
Codingtive.com - Bottom navigation merupakan komponen dalam aplikasi berupa kumpulan menu yang posisinya berada dibawah pada layar. Pada tutorial ini kita akan belajar bagaimana cara membuat bottom navigation menggunakan Android Studio dengan cara yang mudah.

Kamu juga akan belajar penggunaan Fragment pada komponen Android, dan bagaimana cara berpindah antar menu pada bottom navigation.

Bahasa pemrograman yang akan kita gunakan yaitu "Kotlin",  dan pastikan laptop kamu sudah menginstall Android Studio.

Ikuti langkah-langkah berikut :

1. Buat project baru

Buat project baru menggunakan Android Studio, kemudian pilih template yang sudah disediakan yaitu Bottom Navigation Activity. dan jangan lupa untuk Language pilih Kotlin.
Android bottom navigation template
Android bottom navigation template
Tunggu sampai proses sinkronisasi gradle selesai, pastikan laptop kamu terkoneksi internet pada saat pertama membuat project.

Setelah selesai, kamu akan melihat kode yang sudah generate otomatis untuk bottom navigation. Kamu dapat melihatnya pada file MainActivity.kt dan activity_main.xml pada folder res > layout.

Nah, selanjutnya kita akan belajar untuk menggunakan Fragment untuk berpindah halaman antar menu. 

2. Membuat halaman fragment

Kita akan membuat 2 halaman fragment, caranya klik kanan pada package project kamu pilih New > Fragment > Fragment (Blank), Kemudian beri nama HomeFragment dan hilangkan tanda centang pada include fragment factory methods dan include interface callback. Tujuannya karena kita tidak memerlukan include kodenya.
android create fragment
android create fragment
Kemudian hapus saja kode berikut pada file HomeFragment supaya lebih rapi.
fragment android
fragment android
Sekarang, buka file fragment_home.xml pada folder res > layout, dan ubah menjadi seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context=".HomeFragment">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/home"/>

</FrameLayout>
Kamu sudah berhasil membuat untuk halaman home, selanjutnya buat halaman kedua dengan cara yang sama seperti sebelumnya dan beri nama DashboardFragment. Sesuaikan text yang ditampilkan pada layout fragment_dashboard.xml menjadi "Halaman Dashboard".

Untuk text simpan pada resources strings.xml, sehingga menghindari hardcoded. File strings.xml pada folder res > values.
<resources>
    <string name="app_name">BottomNav</string>
    <string name="title_home">Home</string>
    <string name="title_dashboard">Dashboard</string>
    <string name="title_notifications">Notifications</string>

    <string name="hello_blank_fragment">Hello blank fragment</string>
    <string name="dashboard">Halaman Dashboard</string>
    <string name="home">Halaman Home</string>
</resources>

3. Membuat menu

Selanjutnya buka file navigation.xml pada folder res > menu. File ini berisi item dari menu yang akan ditampilkan pada bottom navigation. Ubahlah menjadi seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:id="@+id/navigation_home"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/title_home"/>

    <item
            android:id="@+id/navigation_dashboard"
            android:icon="@drawable/ic_dashboard_black_24dp"
            android:title="@string/title_dashboard"/>
</menu>

4. Menggunakan FrameLayout

Untuk membuat halaman yang dinamis menggunakan Fragment, kita memerlukan FrameLayout, buka file main_activity.xml dan ubah menjadi seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        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/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <FrameLayout
            android:id="@+id/layout_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/navigation"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/navigation"/>

</android.support.constraint.ConstraintLayout>
Kamu dapat mengatur bottom navigation pada tag <BottomNavigationView />, seperti warna text, icon, ukuran, background dan masih banyak lagi.

5. Buka file MainActivity.kt

Kita akan menghubungkan fragment halaman home, dashboard dengan bottom navigation. Kodenya menjadi seperti berikut :
package com.didik.bottomnav

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v4.app.Fragment
import android.support.v7.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private val mOnNavigationItemSelectedListener =
        BottomNavigationView.OnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.navigation_home -> {
                    replaceTitle(getString(R.string.home))
                    replaceFragment(HomeFragment())
                    return@OnNavigationItemSelectedListener true
                }
                R.id.navigation_dashboard -> {
                    replaceTitle(getString(R.string.dashboard))
                    replaceFragment(DashboardFragment())
                    return@OnNavigationItemSelectedListener true
                }
            }
            false
        }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
    }

    private fun replaceFragment(fragment: Fragment) {
        supportFragmentManager
            .beginTransaction()
            .replace(R.id.layout_container, fragment, fragment.javaClass.simpleName)
            .commit()
    }

    private fun replaceTitle(title: String) {
        supportActionBar?.title = title
    }
}
Berikut penjelasannya :
- mNavigationItemSelectedListener : listener untuk melakukan aksi berdasarkan menu navigasi yang dipilih.
- fungsi replaceFragment() : digunakan untuk mengganti FrameLayout dengan halaman Fragment, tujuan dibuat fungsi supaya tidak mengulang-ulang kode.
- fungsi replaceTitle() : digunakan untuk mengganti title pada ActionBar sehingga dinamis sesuai dengan menu navigasi yang dipilih.

Nah sampai disini, sekarang coba dengan emulator atau hp. Namun masalahnya ketika pertama kali aplikasi dibuka tidak menampilkan halaman, kita perlu klik menu terlebih dahulu baru muncul halamannya. Bagaimana cara membuat supaya ada halaman default yang ditampilkan ?

Caranya yaitu tambahkan kode untuk selectedItemId() pada saat onCreate(), sehingga kodenya menjadi seperti berikut :
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

    if (savedInstanceState == null) navigation.selectedItemId = R.id.navigation_home
}
Sekarang coba jalankan kembali, maka kamu berhasil membuat bottom navigation. Hasilnya seperti berikut :
Tutorial android bottom navigation kotlin
Tutorial android bottom navigation kotlin

Full Source Code

Untuk source code lengkapnya, kamu dapat mempelajarinya di repository github berikut :

Kesimpulan

Kamu sudah belajar membuat bottom navigation menggunakan Kotlin di Android Studio, kamu dapat belajar lebih dalam lagi untuk membuat komponen lainnya. Selanjutnya pelajari juga untuk artikel membuat dinamically EditText dengan RecyclerView.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Android Membuat Bottom Navigation Lengkap dengan Android Studio"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel