Cara Membuat Bottom Navigation Bar

Hi gaes, di sini saya akan membahas mengenai tutorial membuat button navigation bar pada android studio. Oya tidak semua code di sini untuk dicopy ya.. karena menyesuaikan PC dan versi android masing-masing.

Android Fragment adalah bagian dari user interface yang dapat disebut juga sub-activity. Jadi fragment tidak termasuk dalam activity baru, melainkan ada dalam bagian activity tersebut. Apa fungsi fragment? fragment biasa digunakan di aplikasi mobile sosial media misalnya seperti facebook, instagram, dan twitter. jadi untuk berpindah ke profil pribadi atau ke explore menggunakan fragment.

baca juga cara instalasinya di sini, atau kalau ingin mencobanya lewat smartphone android bisa klik di sini

    

 

1. Buka Android Studio, create new project dan beri nama BottomNavigationBar

 

2.Target Android service sesuaikan atau kurang dari versi android anda sekarang, untuk mempermudah saat di run. Saya sarankan pilih yang 100% , lalu klik next

 

3. Pilih Empty Activity, lalu klik next

 

4. Konfigurasi activity bisa dibiarkan saja namanya tetap lalu finish. Tunggu sampai gradle selesai

 

5. Kali ini kita perlu terkoneksi dengan internet untuk penambahan dependencies, pastikan internet stabil

 

6. Penulisan di ActivityMain.xml

 


<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.ky.buttonnavigationbar.MainActivity">

    <FrameLayout android:id="@+id/container_layout" android:layout_width="match_parent" android:layout_height="match_parent">

    </FrameLayout>
     <View android:layout_width="match_parent" android:layout_height="1dp" android:id="@+id/border" android:layout_above="@+id/bottom_navigation" android:background="#000">

    <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="wrap_content" app:menu="@menu/main_menu">

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

</RelativeLayout>

7. Menambahkan ikon ke dalam drawable yaitu dengan cara: klik kanan pada drawable -> new -> vector asset->double click pada icon untuk memilih gambarnya

 

 

untuk memanggil gambarnya dengan code sebagai berikut pada main_menu.xml:

 

</pre>
<pre><item android:id="@+id/menu3" android:icon="@drawable/ic_account_circle_black_24dp" android:title="menu3"/></pre>
<pre>

 

8. Mengatur depedenciesnya; masuk Gradle Script -> Build.Gradle (Modul: app) -> klik kanan ->new -> android resource file untuk penambahan resource atau bisa manual ketik code berikut dan pastikan versinya sama :

 




<pre>apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.example.ky.buttonnavigationbar"
        minSdkVersion 15
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.0'
    implementation 'com.android.support:support-v4:27.1.1'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'com.android.support:design:27.1.1'
}

9. Menambahkan Fragment, kita akan membuat 3 buah fragment dan beri nama ; menu1fragment, menu2fragment, dan menu3fragment dengan cara pilih res -> click kanan -> new -> fragment -> blank fragment

 

10. Isi 3 fragment pada (dot)xml-nya supaya dapat dibedakan ketika diklik button navigation bar-nya

 

seperti di fragment_menu1.xml

 





<pre><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" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_gravity="center" tools:context="com.example.ky.buttonnavigationbar.Menu1Fragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="menu1" />
    <TextView android:layout_marginVertical="20dp" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Hello Mitravisi readers" android:textSize="20sp"/>


</FrameLayout>

11. Pada (dot)java jangan lupa isikan seperti berikut, untuk link/penghubung ke fragmentnya kita menggunakan container begitu juga untuk Menu2Fragment dan Menu3Fragment, code seperti Menu1Fragment.java  :

 

</pre>
<pre>package com.example.ky.buttonnavigationbar;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * A simple {@link Fragment} subclass.
 */
public class Menu1Fragment extends Fragment {


    public Menu1Fragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_menu1, container, false); //fragment_menu1.xml nya yang diunput
    }

}</pre>
<pre>

 

12. Penulisan di MainActivity.java, setiap penambahan button baru jangan lupa untuk mendeklarasi

 

</pre>
<pre>package com.example.ky.buttonnavigationbar;

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

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;
    Fragment menu1Fragment = new Menu1Fragment();
    Fragment menu2Fragment = new Menu2Fragment();
    Fragment menu3Fragment = new Menu3Fragment();
    Fragment menu4Fragment = new Menu4Fragment();
    Fragment menu5Fragment = new Menu5Fragment();
    FragmentManager fragmentManager = getSupportFragmentManager();

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

        bottomNavigationView = findViewById(R.id.bottom_navigation);

        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override

            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()){
                    case R.id.menu1:
                        setMenuFragment(menu1Fragment);
                        break;
                    case R.id.menu2:
                        setMenuFragment(menu2Fragment);
                        break;
                    case R.id.menu3:
                        setMenuFragment(menu3Fragment);
                        break;
                    case R.id.menu4:
                        setMenuFragment(menu4Fragment);
                        break;
                    case R.id.menu5:
                        setMenuFragment(menu5Fragment);
                        break;

                }
                return true;
            }
        });

    }
    void setMenuFragment(Fragment fragment){
        fragmentManager.beginTransaction()
                .replace(R.id.container_layout,fragment)
                .commit();
    }

}</pre>
<pre>

 

13. Run apk

Untuk lebih jelasnya bisa klik di sini

 

 

Author | PJ Event Jejak Publisher | Mobile Programming

ig @rnrramadhani follow ya ^^

%d bloggers like this: