Bottom Navigation Android with Lottie Animation

https://unsplash.com/photos/X8WQD0UYsfA

Bottom Navigation is a material component that makes it easy to explore and switch between the top-level view in single click or tap.

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin.

Bottom navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.

When you should use bottom navigation bar in your app

• Destinations requiring direct access
• Three to five top-level destinations

Now let’s we get started :

1. Create an Android Studio Project

Let’s open the Android Studio and create a new project, (put the name you want, I’m taking here LottieBottomBar) with empty activity template. Make sure you create project with androidx support lib.

2. Adding the BottomNavigationView and Lottie Library

To begin using BottomNavigationView in the project, make sure you have added this library in your app/build.gradle file

//Extended library    
implementation 'com.github.wwdablu:lottiebottomnav:1.1.0'    implementation 'com.airbnb.android:lottie:3.4.1'    
implementation 'androidx.appcompat:appcompat:1.2.0'

Source from :

• https://github.com/wwdablu/LottieBottomNav
• https://github.com/airbnb/lottie-android
• https://developer.android.com/jetpack/androidx/releases/appcompat

Now open res/layout/activity_main.xml file to add the BottomNavigationView widget. In this layout file you have to add one FrameLayout. It will serve as a container for the different fragments.

3. Don’t forget to create Empty Fragment, for example is below :

• DashboardFragment.java
• GiftsFragment.java
• MailFragment.java
• SettingsFragment.java

4. And then creates menu items for the bottom navigation bar

The LottieBottomNav contains an array of menu items. The full source code of the MainActivity is below:

Sample App

Conclusion

In this article, we learned how to create a bottom navigation bar in Android using BottomNavigationView and Lottie Animation with Library. We also create a sample application that gives the clarity of bottom navigation implementation.

That’s it. Now you have learn the implementation of the Bottom Navigation and Lottie Animation. Find full source code in below :

achmadqomarudin/LottieBottomBar

Questions? Comments? Contact us at yourfriends.medium.com