DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Create a Beautiful Login Form With Angular Material
  • How To Use Constraint Layout in Xamarin.Android
  • The 12 Biggest Android App Development Trends in 2023
  • Android Cloud Apps with Azure

Trending

  • No Spark Streaming, No Problem
  • .NET Performance Optimization Techniques for Expert Developers
  • Parallel Sort
  • A Better Web3 Experience: Account Abstraction From Flow (Part 1)
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. Getting Started with Material Design on Android: Toolbar and Navigation Drawer

Getting Started with Material Design on Android: Toolbar and Navigation Drawer

How to develop an Android app with material design guidelines using Toolbar and Navigation drawer.

Francesco Azzola user avatar by
Francesco Azzola
·
Oct. 28, 15 · Tutorial
Like (5)
Save
Tweet
Share
23.80K Views

Join the DZone community and get the full member experience.

Join For Free

Material design is a set of rule built by Google that guide how to develop an Android app. They can be applied not only to Android apps but also to web design. In the process of developing an app, Android provides some libraries that help developers to implement the main material guide line rules. The most important libraries are:

  • com.android.support:appcompat-v7:23.1.0
  • com.android.support:design:23.1.0

After all, these two libraries are imported by default when a developer starts a new project using Android Studio.

One important aspect of an app is represented by the color schema. Material design rules describe how to chose colors.

Let us suppose we create a simple Android project and let us follow the steps to implement an Android app following Material design rules.

Material Design: Colors

The first step is choosing the color schema for our app. For this purpose there is a great website that can be used to create the color schema according to material design rules.

After the colors are selected we can download colors.xml:

<resources>
    <color name="primary">#3F51B5</color>
    <color name="primary_dark">#303F9F</color>
    <color name="primary_light">#C5CAE9</color>
    <color name="accent">#03A9F4</color>
    <color name="primary_text">#212121</color>
    <color name="secondary_text">#727272</color>
    <color name="icons">#FFFFFF</color>
    <color name="divider">#B6B6B6</color>
</resources>


You can select the schema you like. The first result is shown in the picture below: 


android_material_design_toolbar



Now it's time to create our theme that uses the colors we selected before. The app should support the largest number of smart phones—not only those running Lollipop or later.

For this reason it is necessary to create two themes: one for the devices that run Android 5 or later and those that run pre-lollipop version.

So let's create two directories under the values:

style

style-v21

The first one is used by all smart phones running pre-Lollipop versions while the second folder is used by smart phones with OS starting from Lollipop.

In the first directory, style.xml we do:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">    <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary&lt/item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
    </style>
    <style name="MyAppTheme" parent="@style/AppTheme" />
</resources>

While in the second directory we simply add:

<resources>
   <style name="MyAppTheme" parent="AppTheme">
     <item name="android:windowContentTransitions">true</item>
     <item name="android:windowAllowEnterTransitionOverlap">true</item>
     <item name="android:windowAllowReturnTransitionOverlap">true</item>
     <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
     <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
  </style>
</resources>


Finally, in Manifest.xml, modify the file like so:

<application
     android:theme="@style/MyAppTheme" >
     ...
</application>


Android Toolbar

One of the most important components in developing an Android app is the Toolbar. The toolbar plays the role that was played before by Android's action bar. The toolbar can be used to hold:

  • Navigation button
  • App tile and subtitle
  • Action menu
  • Brand logo

According to material design the Toolbar has the primary color we selected before. Add it to the Android app:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/layout">

   <include layout="@layout/toolbar" />

</RelativeLayout>


Where the toolbar layout is: 

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/primary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


Notice at line 5 we set the default height of the toolbar using ?attr/actionBarSize and at line 6 the toolbar background.

In the activity it is necessary to set the toolbar:

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   setToolBar();
}
...
private void setToolBar() {
    Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(tb);
    ActionBar ab = getSupportActionBar();
    ab.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
    ab.setDisplayHomeAsUpEnabled(true);
}

Running the example we get:

android_material_design_toolbar

Add Action Menu To Toolbar

Once the toolbar is configured correctly, it is possible to add the action menu or menu items that appear on the Toolbar. To do it, under res/menu add a file called main_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/menu_settings"
          android:title="Settings"
          android:icon="@android:drawable/ic_menu_preferences"
          app:showAsAction="always"
          android:orderInCategory="100"/>

    <item android:id="@+id/menu_help"
        android:title="Help"
        android:icon="@android:drawable/ic_menu_help"
        app:showAsAction="ifRoom"
        android:orderInCategory="110" />

    <item android:id="@+id/menu_compass"
        android:title="Compass"
        android:icon="@android:drawable/ic_menu_compass"
        app:showAsAction="never"
        android:orderInCategory="105"/>

</menu>


Now in the activity there is:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.main_menu, menu);
  return true;
}


Running the example the app looks like: 

android_material_design_toolbar_options

When the user selects one of these item the app should be detect it and take the right action, to do so it is necessary to override a method: 

@Override
public boolean onOptionsItemSelected(MenuItem item) {
   int itemId = item.getItemId();
   String btnName = null;

   switch(itemId) {
     case R.id.menu_settings:
        btnName = "Settings";
        break;
     case R.id.menu_compass:
        btnName = "Compass";
        break;
    case R.id.menu_help:
        btnName = "Help";
        break;

  }

  Snackbar.make(layout, "Button " + btnName, Snackbar.LENGTH_SHORT).show();
  return true;
}


In this case we simply show an info message using a Snackbar. 

Android Navigation Drawer

Navigation drawer is one of the most import UI pattern introduced by Google in developing Android apps. Navigation drawer is a side menu that helps to organize the navigation inside the app. It is a uniform way to access different pages and information inside the app. You can refer to the official Google page to learn more. The implementation is very easy. The custom view that represents the navigation drawer must be the first element in the layout: 

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
  >

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

        <include layout="@layout/toolbar" />

        <!-- Let's add fragment -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/frame"/>

    </LinearLayout>



    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_items" />


</android.support.v4.widget.DrawerLayout>


In this case the toolbar is inside a LinearLayout, but the way the app handles it is the same shown before. In this case there is a FrameLayout to hold the page content shown through fragments. The NavigationView is the "real" menu of our app. The menu items are written in nav_items.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item android:id="@+id/fab"
              android:title="Floating Action Button"
              android:icon="@drawable/ic_action_fab" />

        <item android:id="@+id/star"
            android:title="Star"
            android:icon="@drawable/ic_action_star" />

        <item android:id="@+id/uploadr"
            android:title="Star"
            android:icon="@drawable/ic_action_upload" />
    </group>
</menu>

To handle when a user clicks on an item is very easy, just write:

private void setNavigationDrawer() {
    dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    NavigationView navView = (NavigationView) findViewById(R.id.navigation);
    navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {

            Fragment frag = null;
            int itemId = menuItem.getItemId();

            if (itemId == R.id.fab) {
               frag = new Fragment1();
            }
            else if (itemId == R.id.star) {
                frag = new Fragment2();
            }

            if (frag != null) {
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

                transaction.replace(R.id.frame, frag);
                transaction.commit();
                dLayout.closeDrawers();
                return true;
            }

            return false;
        }
    });
}


We simply add a listener to know when one of the menu items is pressed by the user and then set the right fragment. The last step is opening the drawer when the user clicks on the home icon, to do it:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
     int itemId = item.getItemId();
     String btnName = null;

     switch(itemId) {
         ...
         // Android home
         case android.R.id.home: {
             dLayout.openDrawer(GravityCompat.START);
             return true;
         }
     }
   .....
 }


Running the example app we have:

android_material_design_navigation_drawer

At the end of this post, you know how to use Android navigation drawer and toolbar according to material design guide lines 

Material Design Android (robot) Design app

Published at DZone with permission of Francesco Azzola, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Create a Beautiful Login Form With Angular Material
  • How To Use Constraint Layout in Xamarin.Android
  • The 12 Biggest Android App Development Trends in 2023
  • Android Cloud Apps with Azure

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: