(Tutorial Android) Bottom NavigationView Android Material Design

Tuesday, December 13, 2016

Bottom Navigation adalah fitur yang baru-baru ini ditambahkan di Android Design Support versi 25. Bottom Navigation dapat memudahkan kita membuat desain dengan menu tab bar berada di bawah (hampir sama seperti bottom tabs di iOS). Jika sebelumnya kita membuat bottom bar memakai tambahan library third party, kini Bottom Navigation sudah tersedia di Design Support dan siap diimplementasikan di aplikasi kita.

Pada tutorial kali ini saya akan membahas implementasi dari Bottom NavigationView.
Pertama-tama kita tambahkan dulu design support library versi 25 di gradle.
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:25.0.0'
    compile 'com.android.support:design:25.0.0'
}

Membuat Layout

Buat sebuah layout activity_main.xml dan tambahkan Bottom Navigation View di dalamnya. Karena Bottom Navigation ini letaknya harus di bawah, maka kita harus mendefinisikan letaknya dengan atribut layout_alignParentBottom="true".
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.wimso.androidbottomnavigation.MainActivity">

    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/colorWhite"
        app:itemTextColor="@color/colorWhite"
        app:menu="@menu/bottom_menu"/>

</RelativeLayout>
Beberapa atribut yang ada di Bottom Navigation :
- app:itemBackground - Warna background pada bottom navigation menu
- app:itemIconTint -Tint yang dapat digunakan pada icon menu
- app:itemTextColor – Warna text pada bottom navigation menu
- app:menu – resource menu untuk menampilkan item pada bottom navigation menu

Kemudian buat beberapa layout lagi untuk menu-menu di Bottom Navigation.

fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/home"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
fragment_notification.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/notifications"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
fragment_favorites.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/favorites"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
fragment_search.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/search"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>
fragment_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/profile"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Tambahkan beberapa resources.

strings.xml
<resources>
    <string name="app_name">AndroidBottomNavigation</string>

    <string name="home">Home</string>
    <string name="notifications">Notifications</string>
    <string name="favorites">Favorites</string>
    <string name="search">Search</string>
    <string name="profile">Profile</string>

</resources>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#F44336</color>
    <color name="colorPrimaryDark">#E53935</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorWhite">#FFFFFF</color>
</resources>


Buat beberapa fragment untuk setiap menu bottom navigation.

HomeFragment.java
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.wimso.androidbottomnavigation.R;

/**
 * Created by Wim on 11/30/16.
 */
public class HomeFragment extends Fragment {

    public static HomeFragment newInstance() {
        return new HomeFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);
        return view;
    }
    
}

NotificationFragment.java
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.wimso.androidbottomnavigation.R;
/**
 * Created by Wim on 11/30/16.
 */
public class NotificationFragment extends Fragment {
    public static NotificationFragment newInstance() {
        return new NotificationFragment();
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_notification, container, false);
        return view;
    }
}
FavoritesFragment.java
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.wimso.androidbottomnavigation.R;
/**
 * Created by Wim on 11/30/16.
 */
public class FavoritesFragment extends Fragment {

    public static FavoritesFragment newInstance() {
        return new FavoritesFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_favorites, container, false);
        return view;
    }

}
SearchFragment.java
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.wimso.androidbottomnavigation.R;
/**
 * Created by Wim on 11/30/16.
 */
public class SearchFragment extends Fragment {

    public static SearchFragment newInstance() {
        return new SearchFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        return view;
    }

}
ProfileFragment.java
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.wimso.androidbottomnavigation.R;
/**
 * Created by Wim on 11/30/16.
 */
public class ProfileFragment extends Fragment {

    public static ProfileFragment newInstance() {
        return new ProfileFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_profile, container, false);
        return view;
    }

}
Selanjutnya buat MainActivity dan lengkapi code berikut :
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import com.wimso.androidbottomnavigation.fragment.FavoritesFragment;
import com.wimso.androidbottomnavigation.fragment.HomeFragment;
import com.wimso.androidbottomnavigation.fragment.NotificationFragment;
import com.wimso.androidbottomnavigation.fragment.ProfileFragment;
import com.wimso.androidbottomnavigation.fragment.SearchFragment;

public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {

    BottomNavigationView bottomNavigationView;

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

        if(savedInstanceState == null) {
            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(R.id.flContent, HomeFragment.newInstance())
                    .commit();
        }

        bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(this);
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment fragment = null;

        switch (item.getItemId()) {
            case R.id.action_home:
                fragment = HomeFragment.newInstance();
                break;
            case R.id.action_notifications:
                fragment = NotificationFragment.newInstance();
                break;
            case R.id.action_favorites:
                fragment = FavoritesFragment.newInstance();
                break;
            case R.id.action_search:
                fragment = SearchFragment.newInstance();
                break;
            case R.id.action_profile:
                fragment = ProfileFragment.newInstance();
                break;
        }

        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.flContent, fragment)
                .commit();

        return false;
    }

}
Build dan jalankan hasilnya akan tampak sebagai berikut :


Source code lengkap dapat dilihat di https://github.com/wimsonevel/AndroidBottomNavigation

Sekian tutorial kali ini, semoga bermanfaat.
Terima kasih :)

Share this :

Previous
Next Post »
7 Komentar
avatar

ada yang kurang yah mas, bottom_menu nya belum ada

Balas
avatar

cek aja di github saya gan... https://github.com/wimsonevel/AndroidBottomNavigation

Balas
avatar

mas,permisi saya mau tanya saya bkin seperti itu tapi animasi bottom nya engga gerak kenapa ya mas?

Balas
avatar

mungkin animasi di device di disable gan, coba di enable

Balas
avatar

Sangat membantu mas. Tapi saya masih bingung cara ngedit pilihan menunya sama ngubah icon.

Balas
avatar

cara ganti iconnya disini gan, sory lupa gak nyantumin di artikelnya https://github.com/wimsonevel/AndroidBottomNavigation/blob/master/app/src/main/res/menu/bottom_menu.xml

Balas
avatar

tau gak kenapa, ketika saya masukan map fragment didalamnya, ketika button nya di klik 2kali dia langsung crash/keluar ?.

Balas

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔