Tutorial bottom navigation with animation

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

Login Screen

Bottom Navigation 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.

16 Likes

Thank you.

Wow man! looking dope :slight_smile:

Thank You ! was very useful

Try this you can creat within minutes without any extension

1 Like