BottomNavigationView

Video:
youtube.com/watch?v=tPV8xA7m-iw

Perpustakaan Dukungan Desain:

bottom_navigation.xml:
bottom_navigation.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <menu xmlns:android="http://schemas.android.com/apk/res/android">
3
4 <item
5 android:id="@+id/nav_home"
6 android:icon="@drawable/ic_home_black_24dp"
7 android:title="Home" />
8
9 <item
10 android:id="@+id/nav_favorites"
11 android:icon="@drawable/ic_favorite_black_24dp"
12 android:title="Favorites" />
13
14 <item
15 android:id="@+id/nav_search"
16 android:icon="@drawable/ic_search_black_24dp"
17 android:title="Search" />
18
19 </menu>

activity_main.xml:
activity_main.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:app="http://schemas.android.com/apk/res-auto"
4 xmlns:tools="http://schemas.android.com/tools"
5 android:layout_width="match_parent"
6 android:layout_height="match_parent"
7 tools:context="com.codinginflow.bottomnavigationviewexample.MainActivity">
8
9 <FrameLayout
10 android:id="@+id/fragment_container"
11 android:layout_width="match_parent"
12 android:layout_height="match_parent"
13 android:layout_above="@id/bottom_navigation"/>
14
15 <android.support.design.widget.BottomNavigationView
16 android:id="@+id/bottom_navigation"
17 android:layout_width="match_parent"
18 android:layout_height="wrap_content"
19 android:layout_alignParentBottom="true"
20 app:menu="@menu/bottom_navigation"
21 android:background="?android:attr/windowBackground"/>
22
23 </RelativeLayout>
fragment_home.xml:
fragment_home.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:background="@android:color/holo_red_light">
6
7 <TextView
8 android:layout_width="wrap_content"
9 android:layout_height="wrap_content"
10 android:text="Home Fragment"
11 android:textSize="30sp"
12 android:layout_centerInParent="true"/>
13
14 </RelativeLayout>

HomeFragment.java:
HomeFragment.java
package com.codinginflow.bottomnavigationviewexample;
1
2
import android.os.Bundle;
3
import android.support.annotation.Nullable;
4
import android.support.v4.app.Fragment;
5
import android.view.LayoutInflater;
6
import android.view.View;
7
import android.view.ViewGroup;
8
9
10
public class HomeFragment extends Fragment {
11
12
@Nullable
13
@Override
14
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle
15
savedInstanceState) {
16
return inflater.inflate(R.layout.fragment_home, container, false);
17
}
18
}

fragment_favorites.xml:
fragment_favorites.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:background="@android:color/holo_blue_light">
6
7 <TextView
8 android:layout_width="wrap_content"
9 android:layout_height="wrap_content"
10 android:text="Favorites Fragment"
11 android:textSize="30sp"
12 android:layout_centerInParent="true"/>
13
14 </RelativeLayout>

FavoritesFragment.java:
FavoritesFragment.java
 package com.codinginflow.bottomnavigationviewexample;
1
2
import android.os.Bundle;
3
import android.support.annotation.Nullable;
4
import android.support.v4.app.Fragment;
5
import android.view.LayoutInflater;
6
import android.view.View;
7
import android.view.ViewGroup;
8
9
10
public class FavoritesFragment extends Fragment {
11
12
@Nullable
13
@Override
14
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle
15
savedInstanceState) {
16
return inflater.inflate(R.layout.fragment_favorites, container, false);
17
}
18
}

fragment_search.xml:
fragment_search.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:background="@android:color/holo_green_light">
6
7 <TextView
8 android:layout_width="wrap_content"
9 android:layout_height="wrap_content"
10 android:text="Search Fragment"
11 android:textSize="30sp"
12 android:layout_centerInParent="true"/>
13
14 </RelativeLayout>

SearchFragment.java:
SearchFragment.java
package com.codinginflow.bottomnavigationviewexample;
1
2
import android.os.Bundle;
3
import android.support.annotation.Nullable;
4
import android.support.v4.app.Fragment;
5
import android.view.LayoutInflater;
6
import android.view.View;
7
import android.view.ViewGroup;
8
9
10
public class SearchFragment extends Fragment {
11
12
@Nullable
13
@Override
14
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle
15
savedInstanceState) {
16
return inflater.inflate(R.layout.fragment_search, container, false);
17
}
18
}
MainActivity.java:
MainActivity.java
1 package com.codinginflow.bottomnavigationviewexample;
2
3 import android.support.annotation.NonNull;
4 import android.support.design.widget.BottomNavigationView;
5 import android.support.v4.app.Fragment;
6 import android.support.v7.app.AppCompatActivity;
7 import android.os.Bundle;
8 import android.view.MenuItem;
9
10 public class MainActivity extends AppCompatActivity {
11
12 @Override
13 protected void onCreate(Bundle savedInstanceState) {
14 super.onCreate(savedInstanceState);
15 setContentView(R.layout.activity_main);
16
17 BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);
18 bottomNav.setOnNavigationItemSelectedListener(navListener);
19
20 //I added this if statement to keep the selected fragment when rotating the device
21 if (savedInstanceState == null) {
22 getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
23 new HomeFragment()).commit();
24 }
25 }
26
27 private BottomNavigationView.OnNavigationItemSelectedListener navListener =
28 new BottomNavigationView.OnNavigationItemSelectedListener() {
29 @Override
30 public boolean onNavigationItemSelected(@NonNull MenuItem item) {
31 Fragment selectedFragment = null;
32
33 switch (item.getItemId()) {
34 case R.id.nav_home:
35 selectedFragment = new HomeFragment();
36 break;
37 case R.id.nav_favorites:
38 selectedFragment = new FavoritesFragment();
39 break;
40 case R.id.nav_search:
41 selectedFragment = new SearchFragment();
42 break;
43 }
44
45 getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
46 selectedFragment).commit();
47
48 return true;
49 }
50 };
51 }