
<p class="p1">This article is about Android <span class="s1" style="color: #008000;"><b>BottomNavigationView</b></span> (represents a standard bottom navigation bar for application) and how to combine it with Fragments with the help of a simple application.</p> 
 
 
 
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex"> 
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color: #520599;" href="https://github.com/arunk7839/AndroidBottomNavigationViewExp" target="_blank" rel="noreferrer noopener"><strong>DOWNLOAD CODE</strong></a></div> 
</div> 
<p><span class="embed-youtube" style="text-align:center; display: block;"><amp-youtube data-videoid="a5nb7fhLCfE" data-param-rel="1" data-param-showsearch="0" data-param-showinfo="1" data-param-iv_load_policy="1" data-param-fs="1" data-param-hl="en-US" data-param-autohide="2" data-param-wmode="transparent" width="1200" height="675" layout="responsive"><a href="https://www.youtube.com/watch?v=a5nb7fhLCfE" placeholder><amp-img src="https://i.ytimg.com/vi/a5nb7fhLCfE/hqdefault.jpg" alt="YouTube Poster" layout="fill" object-fit="cover"><noscript><img src="https://i.ytimg.com/vi/a5nb7fhLCfE/hqdefault.jpg" loading="lazy" decoding="async" alt="YouTube Poster"></noscript></amp-img></a></amp-youtube></span></p> 
<h4><span class="s1" style="color: #000080;"><b>BottomNavigationView</b></span></h4> 
 
 
 
<ul class="wp-block-list"> 
<li class="p1"><span class="s1" style="color: #008000;"><a style="color: #008000;" href="https://developer.android.com/reference/com/google/android/material/bottomnavigation/BottomNavigationView"><b>BottomNavigationView</b></a></span> makes it easy for users to explore and switch between top-level views in a single tap.</li> 
<li>It should be used when the app has three to five top-level navigations.</li> 
<li>When there are <strong><span style="color: #008000;">two</span></strong> top-level destinations then use <span style="color: #0000ff;"><strong>Tabs</strong></span> but If Destinations are more than <strong><span style="color: #008000;">five</span></strong> then use the <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://material.io/components/navigation-drawer"><span class="s1"><b>Navigation Drawer</b></span></a></span>.</li> 
<li>Bottom navigation should be used for <span style="font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;">Top-level destinations that need to be accessible from anywhere in the app.</span></li> 
<li class="p1">When the user taps on the icon it will change the top-level view accordingly.</li> 
</ul> 
 
 
 
<p>The following is an example of the Bottom Navigation bar:</p> 
 
 
 
<h4 class="wp-block-heading"><span style="color: #000080;"><strong>Creating new project</strong></span></h4> 
 
 
 
<p>1 . Create a new project by going to <span style="color: #008000;"><b>File </b><span class="s1"><b>⇒</b></span></span><b><span style="color: #008000;"> New Android Project</span>,</b> select <span style="color: #008000;"><strong>Empty Activity</strong></span>, provide <span style="color: #008000;"><strong>app name</strong></span>, select language to <strong><span style="color: #008000;">kotlin</span> </strong>and then finally click on <span style="color: #0000ff;"><strong>finish</strong></span>.</p> 
 
 
 
<p>2 . Open app-level <span style="color: #008000;"><strong>build.gradle</strong></span> file, add the dependency of<strong><span style="color: #008000;"> material design</span></strong> in the dependencies section, and <strong><span style="color: #0000ff;">sync</span></strong> the project.</p> 
 
 
 
<p><span style="color: #0000ff;"><strong>build.gradle</strong></span></p> 
 
 
 
<pre class="wp-block-preformatted">dependencies { 
 <strong><span style="color: #008000;"> //material design</span></strong> 
 implementation 'com.google.android.material:material:1.5.0-alpha01' 
}</pre> 
 
 
 
<p>Find the latest version of the material design from <a class="markup--anchor" href="https://maven.google.com/web/index.html?q=material#com.google.android.material:material" target="_blank" rel="noopener"><span style="color: #0000ff;"><strong>here</strong></span>.</a></p> 
 
 
 
<p>3 . As the Bottom Navigation items are rendered using a menu file, create a new xml file named <span style="color: #008000;"><b>bottom_navigation_menu</b><strong>.xml</strong></span> under <span style="color: #0000ff;"><strong>res ⇒ menu</strong></span> folder.</p> 
 
 
 
<p><span style="color: #0000ff;"><b>bottom_navigation_menu.xml</b></span></p> 
 
 
 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>; 
<;menu xmlns:android="http://schemas.android.com/apk/res/android">; 
 <;item 
 android:id="@+id/nav_home" 
 android:title="Home" 
 android:enabled="true" 
 android:icon="@drawable/ic_home"/>; 
 <;item 
 android:id="@+id/nav_search" 
 android:title="Search" 
 android:enabled="true" 
 android:icon="@drawable/ic_search"/>; 
 <;item 
 android:id="@+id/nav_radio" 
 android:title="Radio" 
 android:enabled="true" 
 android:icon="@drawable/ic_radio"/>; 
 <;item 
 android:id="@+id/nav_my_music" 
 android:title="My Music" 
 android:enabled="true" 
 android:icon="@drawable/ic_music"/>; 
 <;item 
 android:id="@+id/nav_library" 
 android:title="Library" 
 android:enabled="true" 
 android:icon="@drawable/ic_library"/>; 
<;/menu>;</pre> 
 
 
 
<p>4 . Create a new Fragment (named <span style="color: #008000;"><strong>HomeFragment.kt</strong></span>) for the <strong><span style="color: #0000ff;">home</span></strong> menu item by going to <span style="color: #0000ff;"><strong>root ⇒ New ⇒ Fragment ⇒ Fragment (Blank)</strong>.</span></p> 
 
 
 
<p><span style="color: #0000ff;"><strong>HomeFragment.kt</strong></span></p> 
 
 
 
<pre class="wp-block-preformatted">package com.c1ctech.androidbottomnavviewexp 
 
import android.os.Bundle 
import androidx.fragment.app.Fragment 
import android.view.LayoutInflater 
import android.view.View 
import android.view.ViewGroup 
 
class HomeFragment : Fragment() { 
 
 override fun onCreateView( 
 inflater: LayoutInflater, container: ViewGroup?, 
 savedInstanceState: Bundle? 
 ): View? { 
 <strong><span style="color: #008000;"> // Inflate the layout for this fragment</span></strong> 
 return inflater.inflate(R.layout.fragment_home, container, false) 
 } 
 
 companion object { 
 fun newInstance() = HomeFragment() 
 } 
}</pre> 
 
 
 
<p>5 . Open <span style="color: #008000;"><strong>fragment_home.xml</strong> </span>and add the below TextView.</p> 
 
 
 
<pre class="wp-block-preformatted"><;?xml version="1.0" encoding="utf-8"?>; 
<;androidx.constraintlayout.widget.ConstraintLayout 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" 
 tools:context=".HomeFragment">; 
 
 <;TextView 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="Home" 
 android:textSize="30sp" 
 android:textStyle="bold" 
 app:layout_constraintBottom_toBottomOf="parent" 
 app:layout_constraintEnd_toEndOf="parent" 
 app:layout_constraintStart_toStartOf="parent" 
 app:layout_constraintTop_toTopOf="parent" />; 
 
<;/androidx.constraintlayout.widget.ConstraintLayout>;</pre> 
 
 
 
<p>6 . Similarly, create fragments and their layout for the other four menu Items also.</p>
<!-- WP QUADS Content Ad Plugin v. 3.0.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
 
 
 
<p class="p1">7 . Open the layout file of the MainActivity i.e <b><span style="color: #008000;">activity_main.xml</span>,</b> add <span style="color: #0000ff;"><b>BottomNavigationView</b></span> widget and also add a <span style="color: #0000ff;"><b>FrameLayout</b></span> to load the <span style="color: #008000;"><b>Fragments</b></span> when the navigation item is selected.</p> 
 
 
 
<p><span style="color: #0000ff;"><b>activity_main.xml</b></span></p> 
 
 
 
<pre class="wp-block-preformatted"><;?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" 
 xmlns:app="http://schemas.android.com/apk/res-auto">; 
 
 <;FrameLayout 
 android:id="@+id/fragment_container" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:layout_above="@id/bottom_navigation" 
 />; 
 
 <;com.google.android.material.bottomnavigation.BottomNavigationView 
 android:id="@+id/bottom_navigation" 
 android:layout_alignParentBottom="true" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 app:menu="@menu/bottom_navigation_menu" 
 android:background="@color/colorPrimary" 
 app:itemIconTint="@android:color/white" 
 app:itemTextColor="@android:color/white"/>; 
 
<;/RelativeLayout>;</pre> 
 
 
 
<ul class="wp-block-list"> 
<li class="p1"><span style="color: #0000ff;"><b>app:menu</b></span> : The menu resource file to display the navigation items along with icon and text.</li> 
<li class="p1"><span style="color: #0000ff;"><b>app:itemBackground</b> : </span>Applies background color to bottom navigation.</li> 
<li class="p1"><span style="color: #0000ff;"><b>app:itemTextColor</b></span>: The text color of bottom navigation item.</li> 
<li class="p1"><span style="color: #0000ff;"><b>app:itemIconTint</b> : </span>The icon color of bottom navigation item.</li> 
</ul> 
 
 
 
<p>The <span style="color: #008000;"><strong><span class="inline-code">labelVisibilityMode</span></strong></span> attribute can be used to adjust the behavior of the text labels for each navigation item.</p> 
 
 
 
<p>There are four visibility modes:</p> 
 
 
 
<ul class="wp-block-list"> 
<li><strong><span style="color: #0000ff;"><span class="inline-code">LABEL_VISIBILITY_AUTO</span> (default):</span></strong> The label behaves as “labeled” when there are 3 items or less, or “selected” when there are 4 items or more</li> 
<li><span style="color: #0000ff;"><strong><span class="inline-code">LABEL_VISIBILITY_SELECTED</span></strong></span>: The label is only shown on the selected navigation item</li> 
<li><strong><span class="inline-code" style="color: #0000ff;">LABEL_VISIBILITY_LABELED</span></strong>: The label is shown on all navigation items</li> 
<li><strong><span class="inline-code" style="color: #0000ff;">LABEL_VISIBILITY_UNLABELED</span></strong>: The label is hidden for all navigation items</li> 
</ul> 
 
 
 
<p class="p1">8 . Open <span style="color: #008000;"><b>MainActivity.kt</b></span> and add the below code:</p> 
 
 
 
<p><span style="color: #0000ff;"><b>MainActivity.kt</b></span></p> 
 
 
 
<pre class="wp-block-preformatted">package com.c1ctech.androidbottomnavviewexp 
 
import android.os.Bundle 
import android.widget.Toast 
import androidx.appcompat.app.AppCompatActivity 
import androidx.fragment.app.Fragment 
import kotlinx.android.synthetic.main.activity_main.* 
 
class MainActivity : AppCompatActivity() { 
 
 override fun onCreate(savedInstanceState: Bundle?) { 
 super.onCreate(savedInstanceState) 
 setContentView(R.layout.activity_main) 
 
 val toolbar = getSupportActionBar(); 
 
 loadFragment(HomeFragment.newInstance()) 
 
 bottom_navigation.setOnItemSelectedListener { item ->; 
 var fragment: Fragment 
 when (item.itemId) { 
 R.id.nav_home ->; { 
 toolbar?.setTitle("Home") 
 fragment = HomeFragment() 
 loadFragment(fragment) 
 true 
 } 
 R.id.nav_radio ->; { 
 toolbar?.setTitle("Radio") 
 fragment = RadioFragment() 
 loadFragment(fragment) 
 true 
 
 } 
 R.id.nav_search ->; { 
 toolbar?.setTitle("Search") 
 fragment = SearchFragment() 
 loadFragment(fragment) 
 true 
 
 } 
 R.id.nav_my_music ->; { 
 toolbar?.setTitle("My Music") 
 fragment = MyMusicFragment() 
 loadFragment(fragment) 
 true 
 
 } 
 R.id.nav_library ->; { 
 toolbar?.setTitle("Library") 
 fragment = LibraryFragment() 
 loadFragment(fragment) 
 true 
 
 } 
 else ->; false 
 } 
 
 } 
 
 bottom_navigation.setOnItemReselectedListener { item ->; 
 when (item.itemId) { 
 R.id.nav_home ->; { 
 Toast.makeText(this, "Home Item reselected", Toast.LENGTH_SHORT).show() 
 } 
 R.id.nav_radio ->; { 
 Toast.makeText(this, "Radio Item reselected", Toast.LENGTH_SHORT).show() 
 } 
 R.id.nav_search ->; { 
 Toast.makeText(this, "Search Item reselected", Toast.LENGTH_SHORT).show() 
 } 
 R.id.nav_my_music ->; { 
 Toast.makeText(this, "My Music Item reselected", Toast.LENGTH_SHORT).show() 
 } 
 R.id.nav_library ->; { 
 Toast.makeText(this, "Library Item reselected", Toast.LENGTH_SHORT).show() 
 
 } 
 } 
 } 
 } 
 
 private fun loadFragment(fragment: Fragment) { 
<strong><span style="color: #008000;"> // load fragment 
</span></strong> supportFragmentManager.beginTransaction() 
 .replace(R.id.fragment_container, fragment) 
 .commit() 
 } 
}</pre> 
 
 
 
<ul class="wp-block-list"> 
<li class="p1"><strong><span style="color: #0000ff;"> loadFragment()</span></strong> – loads the Fragment into FrameLayout. It is also called in <span style="color: #008000;"><b>OnItemSelectedListener</b></span> callback by passing the appropriate fragment instance.</li> 
<li><b><b><span style="color: #0000ff;">OnItemSelectedListener</span>: </b></b>listener that will be notified when a navigation item is selected.</li> 
<li><b><b><span style="color: #0000ff;">OnItemReselectedListener</span>: </b></b>listener that will be notified when the currently selected navigation item is reselected.</li> 
</ul> 
 
 
 
<p>9 . Now if you run the project you can see the fragments loaded when navigation is selected.</p> 
 
 
 
<div class="image"><img class="alignnone wp-image-2740" src="https://c1ctech.com/wp-content/uploads/2021/07/Screenshot_1626787477-576x1024.png" alt="" width="348" height="619" /> <img class="alignnone wp-image-2741" src="https://c1ctech.com/wp-content/uploads/2021/07/Screenshot_1626790021-576x1024.png" alt="" width="348" height="618" /></div>