Tutorial Android Menciptakan Bottom Navigation Lengkap Dengan Android Studio

Tutorial android bottom navigation

- Bottom navigation merupakan komponen dalam aplikasi berupa kumpulan sajian yang posisinya berada dibawah pada layar. Pada tutorial ini kita akan berguru bagaimana cara menciptakan bottom navigation memakai Android Studio dengan cara yang mudah.

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

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

Ikuti langkah-langkah berikut :

1. Buat project baru

Buat project gres memakai Android Studio, lalu pilih template yang sudah disediakan yaitu Bottom Navigation Activity. dan jangan lupa untuk Language pilih Kotlin.

Android bottom navigation template

Tunggu hingga proses sinkronisasi gradle selesai, pastikan laptop kau terkoneksi internet pada dikala pertama menciptakan project.

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

Nah, selanjutnya kita akan berguru untuk memakai Fragment untuk berpindah halaman antar menu. 

2. Membuat halaman fragment

Kita akan menciptakan 2 halaman fragment, caranya klik kanan pada package project kau pilih New > Fragment > Fragment (Blank), Kemudian beri nama HomeFragment dan hilangkan tanda centang pada include fragment factory methods dan include interface callback. Tujuannya alasannya ialah kita tidak memerlukan include kodenya.

android create fragment

Kemudian hapus saja isyarat berikut pada file HomeFragment supaya lebih rapi.

fragment android

Sekarang, buka file fragment_home.xml pada folder res > layout, dan ubah menjadi menyerupai 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 menciptakan untuk halaman home, selanjutnya buat halaman kedua dengan cara yang sama menyerupai 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 sajian yang akan ditampilkan pada bottom navigation. Ubahlah menjadi menyerupai 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="Tutorial Android Membuat Bottom Navigation Lengkap dengan Android Studio"/>      <item             android:id="@+id/navigation_dashboard"             android:icon="@drawable/ic_dashboard_black_24dp"             android:title="Tutorial Android Membuat Bottom Navigation Lengkap dengan Android Studio"/> </menu> 

4. Menggunakan FrameLayout

Untuk menciptakan halaman yang dinamis memakai Fragment, kita memerlukan FrameLayout, buka file main_activity.xml dan ubah menjadi menyerupai 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 sanggup mengatur bottom navigation pada tag <BottomNavigationView />, menyerupai 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 menyerupai 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 melaksanakan agresi menurut sajian navigasi yang dipilih.

- fungsi replaceFragment() : dipakai untuk mengganti FrameLayout dengan halaman Fragment, tujuan dibentuk fungsi semoga tidak mengulang-ulang kode.

- fungsi replaceTitle() : dipakai untuk mengganti title pada ActionBar sehingga dinamis sesuai dengan sajian navigasi yang dipilih.

Nah hingga disini, kini coba dengan emulator atau hp. Namun masalahnya ketika pertama kali aplikasi dibuka tidak menampilkan halaman, kita perlu klik sajian terlebih dahulu gres muncul halamannya. Bagaimana cara menciptakan semoga ada halaman default yang ditampilkan ?

Caranya yaitu tambahkan isyarat untuk selectedItemId() pada saat onCreate(), sehingga kodenya menjadi menyerupai 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 kau berhasil menciptakan bottom navigation. Hasilnya menyerupai berikut :

Tutorial android bottom navigation kotlin

Full Source Code

Untuk source code lengkapnya, kau sanggup mempelajarinya di repository github berikut :

Github Saya

Kesimpulan

Kamu sudah berguru menciptakan bottom navigation memakai Kotlin di Android Studio, kau sanggup berguru lebih dalam lagi untuk menciptakan komponen lainnya. Selanjutnya pelajari juga untuk artikel membuat dinamically EditText dengan RecyclerView.

Share this post