IS2023 Mobile Application for Business

Tutorial 3 Kodular - Navigation Menu

This tutorial will create an android app bottom navigation with Kodular and navigate between pages
with cool animation transitions.

This tutorial introduces:

• Kodular https://www.kodular.io/
• Space Component https://docs.kodular.io/components/layout/general/space/
• Vertical Scroll Arrangement
https://docs.kodular.io/components/layout/general/vertical-scroll-arrangement/
• New Screens https://docs.kodular.io/components/screen/
• Icons https://fonts.google.com/icons?selected=Material+Icons+Round
• Bottom Navigation https://docs.kodular.io/components/layout/navigation/bottom-
navigation/
• Animation Utilities https://docs.kodular.io/components/utilities/animation-utilities/

Part I: Setting up App testing environment:

• Sign up/Login to Kodular website https://www.kodular.io/

• Connect with your Android device with Kodular Companion App
https://play.google.com/store/apps/details?id=io.makeroid.companion&hl=zh&gl=US , which
you downloaded from Google Play Store
• If you do not have an Android device, please refer to our Android Studio and emulator setup guide.

Part II: Input a project template.

Step 1: Download T3_template.aia file from the Canvas week 3 folder and save the file to Desktop.

Step 2: On Chrome/Firefox, go to the website: https://www.kodular.io/

• Sign in with your Google account.
• Import T3_template.aia project.

1|P a g e
IS2023 Mobile Application for Business

Part III: Designer View

Add Screen and Layout components.

• After importing the project .aia file, you will see the login screen. Let's add a new screen. Click
add new screen, name it as "Home". Later, we will add another screen called “Screen3.”

• From Palette>Layout>General, drag 2 Vertical Arrangement components.

• From Palette>Layout>Navigation, drag a Bottom Navigation component.

2|P a g e
IS2023 Mobile Application for Business

• We can set up the Bottom menu using the blocks editor later, and we must find some
suitable icons for the Bottom menu. For example, create three menu items, List, Info, and
Next Screen.
(You can find the icon from this website
https://fonts.google.com/icons?selected=Material+Icons+Round and then download the
icon and upload it to the assets in Kodular)

• From Palette>Utilities, drag the Animation Utilities component; we will use this component
to make transition animation.

• Uncheck the Visible option for Vertical_Arrangement2 to make it invisible.

3|P a g e
IS2023 Mobile Application for Business

Part IV: Blocks and Event Handlers

Step 1 . In the Blocks Editor

• For initializing the block, we will set up the Bottom navigation menu. This block adds the item
for Bottom navigation, and you need to put the id, title, and image for the icon.

Icon image are in the Assets Manager under the Settings.

4|P a g e
IS2023 Mobile Application for Business

• Create a variable list or array to store the vertical container.

• When a user clicks on the Bottom Navigation Menu, first, set all the containers (Vertical
Arrangement) visible to false.

5|P a g e
IS2023 Mobile Application for Business

• Then continue to extend this block, if user click of the 3rd menu item, it will open the
other screen named Screen3, if the user clicked on the 1st or 2nd menu item, the blocks
will display the Red/Blue vertical arrangement accordingly, plus a little animated effect.

• Overshoot Horizontal: https://docs.kodular.io/components/utilities/animation-

utilities/
• Start a horizontal overshoot animation. If 'tension' is set to 0, you will not see an
overshoot animation. Then you will see just a simple deceleration animation. The
duration is set in millisecond. For example, 1 second = '1000'.

6|P a g e
IS2023 Mobile Application for Business

• When we navigate back to this home screen from Screen3, we need to update the tab
position to the state that the user requested on Screen3. That would be based on the result
variable from Screen3.

7|P a g e
IS2023 Mobile Application for Business

• Add a new screen. Click add a new screen, name it as "Screen3.”

• Add a Vertical Arrangement.

• Add a Label and put it inside the vertical arrangement, modify its Text property to "Please add
a new function of your own choice to this screen. You only need to design the UI components
— no need to implement its blocks."

• Set the Label’s Height and Width to Fill parent.

• As mentioned, you can freely customize this screen.

• Add Bottom Navigation

8|P a g e
IS2023 Mobile Application for Business

• For initialize block, we will retrieve the value pass from the home screen. And we will set up
the Bottom navigation menu. This block adds the item for Bottom navigation. You need to
put the id, title, and image for the menu item.

• When the user clicks on the Bottom navigation menu and selects item 1 or item 2, we will
close this Screen3 and return the selected Menu ID of the selected menu item.

9|P a g e
IS2023 Mobile Application for Business

• Test run and debug your app!

1. Navigate back to Sceen1, connect with your Android phone or an emulator.
2. Click the Login region at the bottom.
3. Input the username: Amy.
4. Input the password: password.
5. Click the Login button.
6. Click OK to close the popup dialog box.
7. Test your 3 bottom navigation menus.

Part V: Submit your work [Individual]

• Submit your snipped screenshots i.e., the component's view and block's view for all your
screens to Canvas "Tutorial 3 Submission Link".
• Include your student ID and Full Name on your design view’s screenshot.
• Deadline: 1-week time

Done!

Reference:
1. https://amoebadev.home.blog/2019/11/22/create-android-app-login-screen/
2. https://community.kodular.io/t/tutorial-bottom-navigation-with-animation/45685

10 | P a g e