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