How to make an Animated Bottom Navigation View Android Java

Want to add animated bottom navigation view Android Java icons like this? If the answer is yes then this tutorial is for you.

First, let me divide this long tutorial into 5 sections

1. Create a project.
2. Set up the Bottom Navigation View.
3. Create animated icons using shapeshifter and import it.
4. Create selector drawable files.
5. Run the app.

So, Let’s start 😎

1. Create a project: 

Come on…you know how to create an android studio project, right?. Open Android Studio and click on ‘Start a new Android Studio project‘ and select the empty activity, give it a nice name, let’s called this AnimatedBottomNavigationView and done. (BTW I am using Android Studio 4.0)

2. Set up the bottom navigation:

For this, first we have to add some library. Open build.gradle file(App level) and add these lines vectorDrawables.useSupportLibrary = true and implementation 'com.google.android.material:material:1.1.0'

defaultConfig {
    applicationId "in.kaushik.animatedbottomnavigationview"
    minSdkVersion 22
    // ... 

    // animation
    vectorDrawables.useSupportLibrary = true
}

and

dependencies {
    // ...

    // android material design library
    implementation 'com.google.android.material:material:1.1.0'

    // ...
}

And hit that Sync Now button.

Now it’s time to design our app. Open activity_main.xml file and replace the code with these.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        style="@style/Widget.MaterialComponents.BottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        android:background="#fafafa"
        app:elevation="16dp"
        app:itemIconTint="@color/bottom_navigation_color"
        app:itemTextColor="@color/bottom_navigation_color"
        app:labelVisibilityMode="selected"
        app:menu="@menu/bottom_navigation_view" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Open styles.xml file, change parent theme from Theme.AppCompat.Light.DarkActionBar to Theme.MaterialComponents.Light.DarkActionBar because we are using android material library not android.support library.

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

Now right-click on res folder and create a new android resource file (keep it in mind that resource type is Color) and name it bottom_navigation_color.xml and add these code.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#5271FF" android:state_checked="true" />
    <item android:color="#2e2e2e" />
</selector>

Now again right-click on res folder and create a new android resource file (now this the resource type is Menu) and name it bottom_navigation_view.xml and add these 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/selector_home"
        android:title="Home" />
    <item
        android:id="@+id/navigation_profile"
        android:icon="@drawable/selector_user_account"
        android:title="Profile" />
</menu>

Wait wait… we will add these drawable files later.

Now create two java files HomeFrag.java and UserProfile.java and two layout files home_frag.xml and user_profile_frag.xml and add these codes.

For HomeFrag.java

(Don’t forget to import the libraries by hitting alt + enter)

public class HomeFrag extends Fragment {
   @Nullable
   @Override
   public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
      return inflater.inflate(R.layout.home_frag, container, false);
   }
}

For home_frag.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        style="@style/TextAppearance.AppCompat.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home"
        android:textColor="#000" />

</LinearLayout>

For UserProfileFrag.java

public class UserProfileFrag extends Fragment {
   @Nullable
   @Override
   public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
      return inflater.inflate(R.layout.user_profile_frag, container, false);
   }
}

For user_profile_frag.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        style="@style/TextAppearance.AppCompat.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="User Profile"
        android:textColor="#000" />
</LinearLayout>

Now switch to MainActivity.java

public class MainActivity extends AppCompatActivity {
   BottomNavigationView navigation;
   FrameLayout main_container;
   Fragment active;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      main_container = findViewById(R.id.main_container);
      navigation = findViewById(R.id.navigation);
      final Fragment fragment1 = new HomeFrag();
      final Fragment fragment2 = new UserProfileFrag();
      final FragmentManager fm = getSupportFragmentManager();
      active = fragment1;

      fm.beginTransaction().add(R.id.main_container, fragment2, "2").hide(fragment2).commit();
      fm.beginTransaction().add(R.id.main_container, fragment1, "1").commit();

      navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
         @Override
         public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
               case R.id.navigation_home:
                  fm.beginTransaction().hide(active).show(fragment1).commit();
                  active = fragment1;
                  return true;
               case R.id.navigation_profile:
                  fm.beginTransaction().hide(active).show(fragment2).commit();
                  active = fragment2;
                  return true;
            }
            return false;
         }
      });
   }
}

Finally, we set up the Bottom Navigation View.

3. Create animation using shapeshifter:

Now we have to create some animated icons. For these, we will use a website called shapeshifter.design. Let’s create some icons using the Android Asset Studio.

And import them in shapeshifter website. I am not going to tell you how to animate icons because this tutorial already becomes so long and I don’t want to make it longer. The animations are so simple and easy to make, if you stuck anywhere, just google it. I will give two animated icons along with this project.

After making the animated icon, hit that export button and select Animated Vector Drawable and import these XML files to res/drawable files.

4. Create selector drawable file:

Create two more selector drawable files selector_home.xml and selector_user_account.xml.

For selector_home.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:targetApi="16">

    <!--animated icon-->
    <item
        android:id="@+id/state_on"
        android:drawable="@drawable/icon_avd_home"
        android:state_checked="true" />

    <!--normal icon-->
    <item
        android:id="@+id/state_off"
        android:drawable="@drawable/icon_home" />

    <transition
        android:drawable="@drawable/icon_avd_home"
        android:fromId="@id/state_off"
        android:toId="@id/state_on" />

</animated-selector>

For selector_user_account.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:targetApi="16">

    <!--animated icon-->
    <item
        android:id="@+id/state_on"
        android:drawable="@drawable/icon_avd_user_account"
        android:state_checked="true" />

    <!--normal icon-->
    <item
        android:id="@+id/state_off"
        android:drawable="@drawable/icon_user_account" />

    <transition
        android:drawable="@drawable/icon_avd_user_account"
        android:fromId="@id/state_off"
        android:toId="@id/state_on" />
</animated-selector>

5. Run the app:

Now run the app in the emulator or in a physical device. If all the following steps are done correctly then you can see the animated icons in the bottom navigation view.

If you face any problem, you can see my animated bottom navigation bar android Github repo.

Thank You 😘

Extra tips from my side:

As you know, the default Android Asset Studio has a limited number of icons. But you can create as many icons you want and animate them. For this, you will need software like Adobe Illustrator or Adobe XD. I personally use Adobe XD because it is easy to use and very lightweight as compared to Illustrator.

Just open XD and create the icon you want but keep it in mind that if you want to animate the icon, keep all the layers separated so that you can get more flexibility while creating the animation. Finally, export it as an SVG and import it to shapeshifter.design