BottomNavigationView

In this tutorial we will learn, how to add a bottom navigation to your activity and use it to switch between different fragments. We will fill our BottomNavigationView with 3 menu items and then check which item was selected with the OnNavigationItemSelectedListener interface and a switch statement. We will then create the appropriate fragment and display it in a FrameLayout with help of the getSupportFragmentManager, beginTransaction and replace methods. Link & Dependencies:- developer.android.com/topic/libraries/support-library/packages.html#design Add a directory in res folder and name it as menu. After adding menu folder in res folder add a xml file and name it bottom_navigation.xml. <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/nav_home" android:icon="@drawable/ic_home_black_24dp" android:title="Home" /> <item android:id="@+id/nav_favorites" android:icon="@drawable/ic_favorite_black_24dp" android:title="Favorites" /> <item android:id="@+id/nav_search" android:icon="@drawable/ic_search_black_24dp" android:title="Search" /> </menu> In activity_main.xml file add:- <?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=".bottomnavigationviewexample.MainActivity"> <FrameLayout android:id="@+id/fragment_container" 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:menu="@menu/bottom_navigation" android:background="?android:attr/windowBackground"/> </RelativeLayout> In fragment_home.xml add these lines of codes:- <?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" android:background="@android:color/holo_red_light"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Home Fragment" android:textSize="30sp" android:layout_centerInParent="true"/> </RelativeLayout> In HomeFragment.java class file add these lines of code:- 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; public class HomeFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_home, container, false); } } In fragment_favourites.xml add these lines of code:- <?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" android:background="@android:color/holo_blue_light"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Favorites Fragment" android:textSize="30sp" android:layout_centerInParent="true"/> </RelativeLayout> In FavouritesFragment.java class file add these lines of codes:- 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; public class FavoritesFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_favorites, container, false); } } In fragment_search.xml add these lines of codes:- <?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" android:background="@android:color/holo_green_light"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Search Fragment" android:textSize="30sp" android:layout_centerInParent="true"/> </RelativeLayout> In SearchFragment.java class file add these lines of codes:- 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; public class SearchFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_search, container, false); } } In MainActivity.java class file add these lines of codes:- 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; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation); bottomNav.setOnNavigationItemSelectedListener(navListener); //I added this if statement to keep the selected fragment when rotating the device if (savedInstanceState == null) { getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, new HomeFragment()).commit(); } } private BottomNavigationView.OnNavigationItemSelectedListener navListener = new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { Fragment selectedFragment = null; switch (item.getItemId()) { case R.id.nav_home: selectedFragment = new HomeFragment(); break; case R.id.nav_favorites: selectedFragment = new FavoritesFragment(); break; case R.id.nav_search: selectedFragment = new SearchFragment(); break; } getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, selectedFragment).commit(); return true; } }; }

Now start build your file and run on your device and see output.