07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
MODULE
Navigation Drawer, Toolbar, FAB, and Snackbar
Nawfal Ali
Updated 25 November 2020
Click HERE to download the source code of this workshop material. Drawer layout
DrawerLayout acts as a top-level container for window content that allows for interactive “drawer” views to be pulled out from one or both vertical edges of the window.
Drawer positioning and layout is controlled using
the android:layout_gravity attribute on child views corresponding to which side of the view you want the drawer to emerge from left or right (or start/end on platform versions that support layout direction.) Note that you can only have one drawer view for each vertical edge of the window. If your layout con gures more than one drawer view per vertical edge of the window, an exception will be thrown at runtime.
https://www.alexandriarepository.org/module/navigation-drawer/ 1/17
07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
How to add a navigation drawer to your application and listen to its events?
The top-level of our hierarchy is a DrawerLayout. In this layout, we have two items:
a. a layout of type CoordinatorLayout, which contains:
i. a layout of type AppBarLayout that wraps a Toolbar
ii. a constraint layout that represents your main white area and should include your views such as text views, buttons, edit texts, etc.
iii. a oating action button (FAB button)
b. a navigation view that represents the drawer that can be pulled from left
or right
https://www.alexandriarepository.org/module/navigation-drawer/ 2/17
07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
i. A menu resource le containing the options to be displayed within the navigation drawer.
The navigation drawer is a panel that slides out from the left of the screen and contains a range of options available for selection by the user, typically intended to facilitate navigation to some other part of the application.
https://www.alexandriarepository.org/module/navigation-drawer/ 3/17
07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
AppBarLayout is a ViewGroup, most commonly used to wrap a Toolbar, that provides many of the Material Design features. Inside Toolbar we can design our action bar now as we want.
CoordinatorLayout
CoordinatorLayout is a general-purpose container that allows for coordinating interactive behaviors between its children.
open build.gradle(Module: app) and add the following dependencies:
1. implementation’androidx.appcompat:appcompat:1.1.0′
2. implementation’com.google.android.material:material:1.1.0′
3. implementation’androidx.constraintlayout:constraintlayout:1.1.3′
Add a new layout resource le where:
https://www.alexandriarepository.org/module/navigation-drawer/ 4/17
07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
le name: activity_drawer_main.xml (or any name you prefer) root element: androidx.drawerlayout.widget.DrawerLayout
Inside the drawer layout, we have to include two items:
a layout that should contain the toolbar, a constraint layout and a oating action button.
le name: app_bar_main (or any name you prefer) root element: androidx.coordinatorlayout.widget.CoordinatorLayout
https://www.alexandriarepository.org/module/navigation-drawer/ 5/17
07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
The le that we have just created should be included into the drawerlayout using
The second item that should be added to the drawer layout is the navigation view that represents the navigation drawer
https://www.alexandriarepository.org/module/navigation-drawer/ 6/17
07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
1.
The attribute android:layout_gravity=”start” tells the parent to position the
drawer on the left side of the screen.
The attribute app:menu=”@menu/nav_menu” represents a reference to the
menu le nav_menu
How to create a resource menu file
Step 1: Create an Android Resource Directory named “menu” as shown below:
https://www.alexandriarepository.org/module/navigation-drawer/ 7/17
07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
Step 2: right-click the menu folder select New–>Menu Resource File–> provide a name
https://www.alexandriarepository.org/module/navigation-drawer/ 8/17
07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria Where: 07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria 07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria 07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria 07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria 07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria 07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria 07/08/2 07/08/2021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
Step 3: Let’s create two menu items.
1. 2. 3. 4. 5.
6. 7. 8.
9.
https://www.alexandriarepository.org/module/navigation-drawer/ 9/17
Attribute android:id=”@+id/item_id_1′′ represents a unique ID for the menu item
attribute android:title=”Item One” sets the title for the menu item
app_bar_main.xml
Add a toolbar to your coordinator layout.
1. 2. 3. 4. 5.
6. 7. 8.
9. 10.
The toolbar is wrapped by AppBarLayout to get the material design features.
Now, beneath the toolbar, we should include our main content (activity_main).
1.
At the bottom of the page, let’s add a oating action button (FAB button).
https://www.alexandriarepository.org/module/navigation-drawer/ 10/17
1.
https://www.alexandriarepository.org/module/navigation-drawer/ 11/17
You cannot implement a new Toolbar if the activity already has an action bar supplied by the window decor
To disable the default toolbar, you need to use a theme that has no toolbar. Step 1: open values–>styles.xml
Step 2: change the default parent theme to be “Theme.AppCompat.Light.NoActionBar”
https://www.alexandriarepository.org/module/navigation-drawer/ 12/17
MainActivity.java
In the MainActivity.java class, we have to do the following:
Hook the drawer and the toolbar
Set the navigation items listener to the navigation view
Implement the navigation items listener
Listen to FAB events
Hook the drawer and the toolbar
Create references to the drawer layout, navigation view, and the toolbar
https://www.alexandriarepository.org/module/navigation-drawer/ 13/17
1. drawerlayout = findViewById(R.id.drawer_layout);
2. navigationView = findViewById(R.id.nav_view);
3. toolbar = findViewById(R.id.toolbar);
Set the toolbar to be the current toolbar for the activity
1. setSupportActionBar(toolbar);
Hook the drawer and the toolbar using ActionBarDrawerToggle class
1. ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
2. this, drawerlayout, toolbar, R.string.navigation_drawer_open,
R.string.navigation_drawer_close);
3. drawerlayout.addDrawerListener(toggle);
4. toggle.syncState();
ActionBarDrawerToggle is for displaying an drawer indicator in the appbar which needs 5 arguments.
1. Current Activity context
2. DrawerLayout variable
3. Toolbar variable
4. Drawer open description message via Resource string 5. Drawer close description message via Resource string
Set the navigation items listener to the navigation view
1. navigationView.setNavigationItemSelectedListener(new MyNavigationListener());
Implement the navigation items listener
https://www.alexandriarepository.org/module/navigation-drawer/ 14/17
https://
15/17
3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13. 14. 15. 16. 17. 18.
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
// get the id of the selected item
int id = item.getItemId();
if (id == R.id.item_id_1) { // Do something
} else if (id == R.id.item_id_2) { // Do something
}
// close the drawer
drawerlayout.closeDrawers(); // tell the OS
return true;
} }
1.
classMyNavigationListenerimplements
NavigationView.OnNavigationItemSelectedListener { 2.
Listen to FAB events
Step 1: Create a reference to the fab button:
1. FloatingActionButton fab = findViewById(R.id.fab); Step 2: set a new listener
1. 2. 3.
fab.setOnClickListener(new View.OnClickListener() { @Override
public void onClick(View view) {
www.alexandriarepository.org/module/navigation-drawer/
https://www.alexandriarepository.org/module/navigation-drawer/ 16/17
021 Navigation Drawer, Toolbar, FAB, and Snackbar | Alexandria
4. Snackbar.make(view, “Replace with your own action”, Snackbar.LENGTH_LONG)
5.
6. }
7. });
.setAction(“Action”, null).show();
The listener is an anonymous class of type View.OnClickListener. If the user clicks or taps on the fab button, the callback method “onClick” will get executed.
The method shows a Snakbar from the bottom of the screen.
The Snackbar widget provides brief feedback about an operation through a message at the bottom of the screen. Snackbars disappear automatically, either after a timeout or after a user interaction elsewhere on the screen, and can also be swiped o the screen.
References:
https://www.androdocs.com/kotlin/implementing-navigation-drawer- in-android-app-using-kotlin.html
Copyright © Monash University, unless otherwise stated. All Rights Reserved, except for individual components (or items) marked with their own licence restrictions
Copyright © 2021 Monash University, unless otherwise stated
Disclaimer and Copyright Privacy
Service Status
https://www.alexandriarepository.org/module/navigation-drawer/ 17/17