How to add Bottom Navigation in the app in Android Kotlin ?
Q. What is bottom navigation?
Ans => Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destinations.
After clicking on my profile icon.
Workflow
Things we need to do.
- We need to implement In aap label build.gradle file
implementation 'com.google.android.material:material:1.1.0'
2. We need two resource files.
One is menu resource file name is
bottom_navigation.xml .
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><item
android:id="@+id/home_nav"
android:title="@string/home_menu"
android:icon="@drawable/ic_baseline_home"/><item
android:id="@+id/product_nav"
android:title="@string/product_menu"
android:icon="@drawable/bike_icon"/><item
android:id="@+id/refer_nav"
android:title="@string/refer_menu"
android:icon="@drawable/ic_baseline_refer"/><item
android:id="@+id/service_nav"
android:title="@string/myProfile_menu"
android:icon="@drawable/ic_baseline_profile"/>
</menu>
Another one is navigation resource file the name is
bottom_nav_graph.xml .
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/bottom_nav_graph"
app:startDestination="@id/home_nav"><fragment
android:id="@+id/home_nav"
android:name="com.example.yati.fragments.HomeFragment"
tools:layout="@layout/home_fragment" /><fragment
android:id="@+id/product_nav"
android:name="com.example.yati.fragments.ProductsFragment"
tools:layout="@layout/products_fragment" /><fragment
android:id="@+id/refer_nav"
android:name="com.example.yati.fragments.ReferFragment"
tools:layout="@layout/refer_fragment" /><fragment
android:id="@+id/service_nav"
android:name="com.example.yati.fragments.MyProfileFragment"
tools:layout="@layout/myprofile_fragment" />
</navigation>
Remember one thing the name of id should be same of manu resource file and navigation resource file like this.
Look below
In menu and fragment has same id.
<item
android:id="@+id/home_nav" /> <fragment
android:id="@+id/home_nav"/>
3. Now we need to work in activity_main.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=".activities.MainActivity"><FrameLayout
android:layout_marginTop="80dp"
android:id="@+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bottom_navView"><fragment
android:id="@+id/navigation_host"
app:defaultNavHost="true"
app:navGraph="@navigation/bottom_nav_graph"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/></FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navView"
app:menu="@menu/bottom_navigation"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
app:itemTextColor="@color/colorWhite"
app:itemBackground="@color/colorBlack"
app:itemIconTint="@color/colorWhite"
android:layout_height="wrap_content"/></RelativeLayout>
Last thing we need to handle the navigation in MainActivity.kt file
MainActivity.kt
class MainActivity :AppCompatActivity(){
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContentView(R.layout.activity_main)
val navView: BottomNavigationView = findViewById(R.id.bottom_navView) val navController=
findNavController(R.id.navigation_host)
navView.setupWithNavController(navController)}
}
That’s all friends. This is working you can try it and one thing manage color resource and icon resource by your self thanks for reading this article.
