Tutorial Android Membuat Bottom Navigation

TheHeran.com/ October 8, 2019/ Bottom Navigation, Download, Java, Java Android/ 0 comments

Halo sahabat pembaca.., sudah 2 tahun kurang lebih tidak update tutorial. Kangen rasanya berbagi ilmu dengan kalian semua. Pada kesempatan kali ini admin akan membahas tentang Tutorial Membuat Bottom Navigation di Android Studio.

Ayo… kita perlu tau dulu apa sih Boton Navigation itu. Jadi… Bottom Navigation adalah sebuah tombol yang berada di bagian bawah layar interface dari sebuah aplikasi yang terdiri dari beberapa tombol yang berfungsi untuk menyediakan navigasi tertentu pada sebuah aplikasi. Implementasi bottom navigation sudah banyak di jumpai pada aplikasi-aplikasi populer katakan saja GOJEK, TRAVELOKA dan lain-lain.

tutorial-membuat-bottom-navigation-androiddevid-theheran
Bottom Navigation

Berikut akan di jelaskan Cara membuat Buttom Navigation di aplikasi android.

Menyiapkan Project

  1. Membuat project

    Silakan buat project baru di Android Studio. Berikan nama projectnya BOTTOM NAVIGATION

  2. Pastikan project tidak ada error

    Pastikan project yang kalian buat tidak bermasalah dan jika di jalankan aplikasi akan berjalan dengan normal. Minimal muncul “Hello World”


Menyiapkan LAYOUT

  • Tambah icon home, history dan profile pada folder res/drawable. Kalian bisa menambahkan dengan cara klik kanan pada folder res/drawable –> New –> Vector Asset. Kemudian cari icon sesuai dengan keinginan. pada tutorial kali ini adalah sperti di bawah ini
bottom-navigation-tutorial
  • Fokus ke direktori res/menu jika belum ada tambahkan saja dengan cara Klik Kanan pada directory res selanjutnya New –> Directory kemudian ketik menu
  • Tambah file xml pada folder menu dengan nama menu_bottom_navigation_basic.xml dan ketikkan kode di bawah ini
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_recent"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/navigation_favorites"
        android:icon="@drawable/ic_history"
        android:title="History" />

    <item
        android:id="@+id/navigation_nearby"
        android:icon="@drawable/ic_profile"
        android:title="Profile" />

</menu>

  • Selanjutnya fokus ke folder res/drawable tambahkan file xml dengan nama color_state_white_1.xml. Codenya adalah sebagai berikut
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_checked="true" />
    <item android:color="#999999" android:state_checked="false" />
</selector>
  • Tahap selanjutnya buat file pada res/layout dengan nama toolbar.xml. codenya adalah sebagai berikut
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:contentInsetStartWithNavigation="0dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>


  • Buka file activity_main.xml pada res/layout kemudian lakukan modifikasi seperti kode di bawah ini
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey_5">
    <!--
           Create by ANDROIDDEV.ID
           * www.androiddev.id
           * p: +6283129588828
           * e: [email protected]
       -->

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

        <include layout="@layout/toolbar" />

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


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:background="#666666"
        app:itemIconTint="@drawable/color_state_white_1"
        app:itemTextColor="@drawable/color_state_white_1"
        app:menu="@menu/menu_bottom_navigation_basic" />

</RelativeLayout>

  • Kemudian buka file MainActivity.java lakukan perubahan sesuai dengan kode di bawah ini

Catatan

Lakukan penyesuan seperlunya. Pastikan kalian tidak copy paste semua karena bisa saja nama package project berbeda. jadi cukup copas di dalam kode di bawah ini ya
public class MainActivity extends AppCompatActivity {
// yang bisa di copas langsung
}
package id.androiddev.buttonnavigation.activity;
import android.app.Activity;
import android.os.Build;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;
import android.view.WindowManager;

import id.androiddev.buttonnavigation.R;

/*
    Create by ANDROIDDEV.ID
    * www.androiddev.id
    * p: +6283129588828
    * e: [email protected]
 */
public class MainActivity extends AppCompatActivity {

    private BottomNavigationView navigation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        initToolbar("Bottom Navigation");
    }


    private void initToolbar(String value) {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_arrow_back);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle(value);
        setSystemBarColor(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_setting, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            finish();
        }
        return super.onOptionsItemSelected(item);
    }


    public static void setSystemBarColor(Activity act) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = act.getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.setStatusBarColor(act.getResources().getColor(R.color.colorPrimaryDark));
        }
    }

}

  • Maka struktur filenya adalah sebagai berikut. Jika ada perbedaan bisa nanti langsung download project agar langsung import 🙂
Struktur-project-botton-navigation-androiddevid
  • Terakhir adalah jalankan project!
screenshoot-bottom-navigation-tutorial-1
Basic 1

screenshoot-bottom-navigation-tutorial-1
Basic 2

Tutorial Advance Bottom Navigation dan kaya fitur

Tutorial diatas merupakan versi basic. dan di bawah ini merupakan contoh screenshoot dan video demo untuk versi advance.
tutorial-botton-navigation-android-theheran_1-min

tutorial-botton-navigation-android-theheran_1-min
tutorial-botton-navigation-android-theheran_1-min

Try and call me!

Setelah mencoba versi Advance, dan tertarik untuk memiliki source codenya caranya sangat mudah. Chat saya melalui whatsapp, telegram atau fitur chat online yang sudah tersedia pada web ini. 3 Fitur chat tersebut yang fast respon!

Comments

comments

Leave a Reply