TUTORIAL CREATING BOTTOM NAVIGATION WITH ANIMATION
Hi everyone, today i will share tutorial creating android app bottom navigation with kodular and navigate between a page with cool animation transition.
LAYOUT
So this tutorial using previous project, you can view the tutorial and import project from here. After import the project you will see the login screen, now let’s add a new screen. Click add new screen, name it as “Home”.
Add New Screen
Drag Vertical Arrangement component twice, after that drag component Bottom navigation. We can setup the list bottom menu using the blocks, find some good icon for the bottom menu. For example create two menu, List and Info. You can find the icon from this website material.io/resources/icons/?style=round download the icon and upload to the assets in kodular.
Kodular Layout Screen
Drag the animation utilities component, we will use this component to make transition animation. Turn off the checkbox visible Vertical Arrangement 2 to make the layout just like the picture below.
BLOCKS
For initialize block we will setup the bottom navigation menu. This block add the item for bottom navigation, you need to put the id, title and image for the icon.
Blocks Bottom Navigation Menu
After that, it’s time to make the navigation and make the animation for transition when change the menu.
Full Blocks
How it works
- Create a function to change the tab
- Create variable list or array to store the vertical container
- Create variable currentTab to store the current tab when tab of bottom navigation change
- Loop the array or list to make all of container visible to false
- Check the currentTab variable with the id, this will check if we click the left menu or the right menu
- Animate the container
- set container visible to true based on the Id
LIVE TESTING
Open your companion app and try to test the application. You will see the login screen from the previous tutorial, insert the username and password it will navigate to Home screen and It should be showing like this picture below.
Login Screen
Liked my work
If you liked my work or think it is useful then you can motivate me to make tutorials like this by following & visiting my blog https://amoebadev.home.blog
Download Link
AIA
APK
Thank you.
