WIA2007

MOBILE APPLICATION
DEVELOPMENT
APP BAR AND NAVIGATION VIEW
Created and Updated by S. Ong
Adapted by Chiew T K
Semester 1, 2023/2024

[email protected]
 2

IN PRACTICAL 6

[email protected]
 3

INTRODUCTION
• We will use the same navigation graph and files to
work on three different navigation methods:
 App Bar
 Bottom Navigation Bar
 Side Navigation Bar

[email protected]
 4

APP BAR
 5

APP BAR

• Also known as Action Bar

• Important because :
• it provides visual structure (usually the main one)
• Give user familiar interactive elements – provide
consistency across all Android App
• Key function:
• Give identity to your app and show user’s location
• Access to important function
• Support navigation and view-switching

[email protected]
 6

COMPONENTS IN APP
BAR
• In most basic form (as we have in the past), what are
the information shown on the App Bar?

Activity’s Title

Overflow Menu

[email protected]
 7

ACTIONBAR VS
TOOLBAR
• ActionBar vs ToolBar classes  which one to use?
• ActionBar  behaves differently depending on version
of Android applied.
• Thus, for consistency purposes, ToolBar (the support
library) might be the more suitable choice to use when
implementing App Bar.

[email protected]
 8

ADDING TOOLBAR INTO

ACTIVITY (1/2)
<?xml version="1.0" encoding="utf-8"?>

<androidx.drawerlayout.widget.DrawerLayout
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/DLMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" Adding Toolbar to
android:orientation="vertical"> the Main Activity
layout file.
<androidx.appcompat.widget.Toolbar
android:id="@+id/TBMainAct"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize" />
[email protected]
 9

ADDING TOOLBAR INTO

ACTIVITY (2/2)
<androidx.fragment.app.FragmentContainerView
android:id="@+id/NHFMain"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_animal_lover" />

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/menu_bottom" />
</LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

[email protected]
 10

SETUP THE MENU (1/3)

• menu/bottom_menu.xml
• To create the menu resource directory:
• Right click on the res directory  New  Android Resource
Directory  choose menu for the Resource Type  select
Finish.
• To add new menu resource file
• Right click on the newly created menu directory  New 
Menu Resource File  enter file name as “bottom_menu”
 select Finish.

[email protected]
 11

SETUP THE MENU (2/3)

• menu/bottom_menu.xml
• In the bottom_menu.xml file, you can either
• On Design Mode: Drag-and-drop TWO menu items to the
xml file.
• On Code Mode: manually code TWO menu items.
• Make sure that the two menu items contain the
following information:
• First menu item will link to the home menu, change the
ID to DestHome.
• Second menu item will link to the About Us menu,
change the ID to DestAboutUs.

[email protected]
 12

SETUP THE MENU (3/3)

• menu/bottom_menu.xml
• Your code should be similar with the following (ensure
to follow the ID as same as the destination ID in the
navigation graph destination):

[email protected]
 13

MODIFY THE THEME

• On your values/themes/theme.xml
• Make sure that the parent theme is set as NoActionBar
• This is to prevent the app from using the original AppBar,
as we want to replace it with our Toolbar (remember the
toolbar set in activity_main.xml?)
• For example:

• Your main theme might be different with the example

here, just make sure that you select “NoActionBar”
option from the style available.

[email protected]
 14

TOOLBAR IN ACTION
• Now, let’s make the toolbar visible (replace it with
the original appbar) by using the following codes in
MainActivity.java:

ID for the Toolbar

in
activity_main.xml

Set the toolbar as

the Action Bar in
main activity.

[email protected]
 15

TOOLBAR IN ACTION
(BINDING)
• In the onCreate callback method in MainActivity.java,
you also want to bind the NavHostFragment with the
NavController.
• NavController is an object that manages the app
navigation within the NavHost.

• Then, you want to bind your toolbar with the

navController:

[email protected]
 16

ADD OPTIONS TO
OVERFLOW MENU
• Add the options in the bottom_menu.xml file to the
Overflow Menu:

[email protected]
 17

ADD ACTION TO
OVERFLOW MENU

• In MainActivity.java, link the selected option to the

NavHostFragment in activity_main.xml which is connected to
the navigation graph.
• Since the name set for the option item (DestHome and
DestAboutUs) is exactly the same as the destination ID, it will
be navigated automatically to the designated fragment..
[email protected]
 18

ADD UP ACTION ON
TOOLBAR
• Override the onSupportNavigateUp() method in
MainActivity.java to enable the up action in the
toolbar:

[email protected]
 19

OUTPUT
• At this step, your output should look like this:

[email protected]
 20

BOTTOM NAVIGATION BAR

 21

BOTTOM NAVIGATION BAR

• Also known as bottom navigation tab or bottom tab
• Helps user to navigate in a more seamless and
ergonomic manner.
• Consistently visible throughout the mobile
application.
• The tab should have equal importance / level of
navigation
• In most cases, these tab should be the top-level
destinations in the mobile application.
• Good references on dos and don’ts for bottom tab:
• https://material.io/components/bottom-navigation

[email protected]
 22

ADDING BOTTOM NAVIGATION

VIEW INTO ACTIVITY (1/2)
<?xml version="1.0" encoding="utf-8"?>

<androidx.drawerlayout.widget.DrawerLayout
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/DLMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<androidx.appcompat.widget.Toolbar
android:id="@+id/TBMainAct"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize" />
[email protected]
 23

ADDING BOTTOM NAVIGATION

VIEW INTO ACTIVITY (2/2)

<androidx.fragment.app.FragmentContainerView
android:id="@+id/NHFMain" Adding Bottom
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
Navigation View to
android:layout_height="0dp" the Main Activity
android:layout_weight="1" layout file.
app:defaultNavHost="true"
app:navGraph="@navigation/nav_animal_lover" />

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/menu_bottom" />
</LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

[email protected]
 24

SETUP BOTTOM TAB

• With the binding steps prepared in Slide 14, to setup
the bottom navigation menu:
• Step 1: In the onCreate callback method in
MainActivity.java, call “setupBottomNavMenu” method
while sending the navController to the method.
• Step 2: Write the following method to setup the bottom
tab and connect with the navController:

[email protected]
 25

OUTPUT
• Your bottom tab should be working now.

[email protected]
 26

NAVIGATION DRAWER
 27

NAVIGATION DRAWER
• Also known as hamburger menu (imagine the 3 lines
icon as an hamburger of bun-patty-bun).
• Side navigation to navigate within destinations
available in the app
• The side navigation can be permanently sit for larger
screen, OR
• It can be toggled to open or close
• It is also a good place to show the hierarchical
functions in your app (you can composite/group the
related functions)

[email protected]
 28

ADD NAVIGATION VIEW

• In your activity_main.xml, add navigation view after the
linear layout.

• In this example, menu_bottom.xml file is again used as

options in this side navigation.
[email protected]
 29

SETUP NAVIGATION
DRAWER (1/2)
• In the onCreate method in MainActivity.java, include
the following codes:

• This code adds a drawer listener to open and close

the drawer when the hamburger icon is clicked.

[email protected]
 30

SETUP NAVIGATION
DRAWER (2/2)
• Similar to the bottom navigation bar setup:
• Step 1: in the onCreate callback method in
MainActivity.java, call ”setupNavMenu” while sending
the navController to the method.
• Step 2: include the following method in
MainActivity.java

[email protected]
 31

OUTPUT
• When you click on the hamburger icon, you should
see the following output:

[email protected]
 32

REMINDER
• The Online Test 1 will be conducted during the Week
8 Lecture Period.
• Scope of the test: Week 1 – Week 7 contents
• Format of the test: MCQ.
• Duration: 1 hour

[email protected]