How to Create Bottom Navigation Bar Animation in Android ?

Hello Guys ,

   In this tutorial , we are making animated bottom navigation bar in android. In this app we create attractive bottom navigation bar in android. Bottom Navigation Bar is most useful for making responsive mobile application. In this app we use android BottomNavigationView library. 

Bottom Navigation bar app looking like below picture :

Let's get started.

Step 1 : Create a new Project.

Step 2 : Add icon in Drawable folder.

• In this app we required some icon for making animated bottom navigation bar.
• Go to drawable folder  and click right button on the mouse . And go to  "new" and click on them.
• and click on vector asset. choose icon for bottom navigation bar. 
• And that icon added in navbar_menu.xml file. using icon attribute in android.

Step 3 : Create Navbar_menu.xml file.

• Go to res folder and create new Android Resource Directory named "menu" . And create navbar_menu.xml file in menu directory.
• navbar_menu.xml file create for adding menu bar in bottom of the main page. These file is most important for creating bottom navigation bar.

Code :-

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/navigation_home" android:icon="@drawable/ic_baseline_home_24" android:title="Home" /> <item android:id="@+id/navigation_search" android:icon="@drawable/ic_baseline_search_24" android:title="Search" /> <item android:id="@+id/navigation_favourites" android:icon="@drawable/ic_baseline_favorite_border_24" android:title="Favourites" /> <item android:id="@+id/navigation_profile" android:icon="@drawable/ic_baseline_perm_identity_24" android:title="Profile" /> </menu>

Step 4 : Edit activity_main.xml file.

Code :-

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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/MyContainer" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:paddingTop="?attr/actionBarSize" tools:context=".MainActivity"> <!--Create BottomNavigation View --> <com.google.android.material.bottomnavigation.BottomNavigationView android:layout_width="0dp" android:layout_height="wrap_content" android:id="@+id/bottomNav_barView" android:layout_marginStart="0dp" android:layout_marginEnd="0dp" android:background="?android:attr/windowBackground" android:backgroundTint="@color/white" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:menu="@menu/navbar_menu"/> </androidx.constraintlayout.widget.ConstraintLayout>

• add navbar_menu.xml file in activity_main.xml file using menu attribute in BottomNavigationView library.

Our App is ready , let's check the app.

Output :

I hope you like post. If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support.  🙏