Skip to content
  • Services
    Our Approach
    Personalized, in-depth technical guidance on a global scale that helps organizations achieve their digital transformation goals.
    Learn more
    • Our Approach
    • Development
    • Design
    • Digital Experience Platform
    • Data & Analytics
    • Cloud & DevOps
    • Support
  • Work
    Our Work
    Through our expertise in strategy, design, and engineering, we help clients deliver digital transformation at scale.
    Learn more
    • Our Work
    • Healthcare
    • Finance
    • Manufacturing
    • Agriculture
    • Education
  • About
    About us
    For over 20 years, we’ve partnered with companies of all sizes and industries to solve their most complex business problems.
    Learn more
    • About us
    • Leadership
    • Locations
    • Events
    • News
  • Careers
    Join our Team
    Take your career to the next level. We offer exciting opportunities across every stage of the software development life cycle.
    Learn more
    • Join our Team
    • Open Positions
    • Application Process
    • Benefits
    • Learning & Development
  • Insights
    Our Insights
    Read our latest blogs, watch our recent videos, and browse our library of e-books — all full of insights from our experts.
    Learn more
    • Our Insights
    • Blog
    • Videos
    • Downloads
  • Contact
Menu

Material Design For Pre-Lollipop Devices

There is no need to wait for Lollipop (Android 5.0) adoption to start using aspects of material design. In this post we’ll focus on the new Toolbar.

Chris Black

MentorMate Alumni

Material design is Google’s new specification for designing applications across a variety of devices. Using the latest AppCompat library for Android, you can start integrating some aspects of material design in your Android apps today. There is no need to wait for Lollipop (Android 5.0) adoption to start using aspects of material design. Check out the support library details for a full list of what’s been added. In this post we’ll focus on the new Toolbar and how it can be integrated with a menu drawer.

Lollipop is the new operating system (OS) for Android devices. This is a major release and has updates to many aspects of the OS.

Toolbar

One of the big additions to the support library was the Toolbar widget. It’s a generic replacement for the ActionBar. The Toolbar is often still referred to as an ActionBar when it’s docked to the top of the application. Here is an example of what the new Toolbar looks like:

lollipop-toolbar

Since the Toolbar is generic, it no longer needs to be tied to the top of the app. Here is an example of the Toolbar placed in a different location:

layout-structure-toolbars-toolbars-04_large_xhdpi

The first step to adding the new Toolbar is to update your theme to support material design through AppCompat. Notice that we are setting windowActionBar to false. We only want one ActionBar and will be creating a Toolbar in the next step that will be added to the Activity.

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <!-- Set AppCompat’s color theming attrs -->
        <item name="colorPrimary">@android:color/holo_red_light</item>
        <item name="colorPrimaryDark">@android:color/holo_red_light</item>
        <item name="windowActionBar">false</item>
        <item name="searchViewStyle">@style/MySearchViewStyle</item>
    </style>
</resources>

Pro-tip: Use the AppCompat theme even to ensure forward compatibility as well as backwards support. If your app still uses the old Holo theme, Lollipop devices will try to apply the new material design which may break functionality.

Next, make sure your main activity extends ActionBarActivity (from the support library). Add the following code to the onCreate method of your Activity. If you have a menu drawer already, this will break your project. Continue to the menu drawer section for instructions on how to fix this.

// Set the ActionBar
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);

After adding this code you can access the ActionBar like you would normally, using the getSupportActionBar() method.

ActionBarDrawerToggle

Google’s material design guidelines suggest the navigation drawer should appear over the app bar. However, only about half of the newly designed Google apps follow this convention. The other half use the new ActionBarDrawerToggle to animation the hamburger icon into an arrow. At this point, with an even split between these implementations, use the one that fit’s your app design the best.

Below the ActionBar

menu-below

Used in Google Play, Google Drive and Play Music

Above the ActionBar

menu-above

Used in Gmail and Google Wallet

Adding the arrow animation is as simple as setting the mDrawerToggle as a listener for the mDrawerLayout. If you prefer not to use this animation (when covering the ActionBar with the menu drawer) just remove this line of code.

// Used to animate the hamburger menu into an arrow
mDrawerLayout.setDrawerListener(mDrawerToggle);

DrawerLayout Integration

If you use the current wizard within Android Studio, a few of changes need to be made to the NavigationDrawerFragment to support the Toolbar widget and ActionBarDrawerToggle. The biggest change is moving the adapter initialization from onCreateView to setUp. The reason for this is that we need a reference to the ActionBar to create the adapter. When using the Toolbar, this needs to be passed in via the setUp function to ensure the ActionBar reference exists.

You can get the source code for this on GitHub.

Conclusion

Material design is a big step forward in the design specification for Android. The AppCompat library can be used to start integration aspects of material design to pre-Lollipop devices. Keep your apps looking current by integrating these new design patterns as available in the support library.

At this point, only some aspects of material design have been added to the support library. Google will likely update the library in the future to include additional support. For now, the following components have been added to the v7 support library: Toolbar (which takes the place of the ActionBar), SwitchCompat, CardView, RecyclerView and Palette.

Additional Resources:
AppCompat v21 — Material Design for Pre-Lollipop Devices!
Material Design on Android Checklist
Material Design Everywhere: Using AppCompat 21
appcompat v21: material design for pre-Lollipop devices!

Talk with us more about incorporating material design into your Android apps.

Tags
  • Mobile
  • Culture
  • Development
Share
  • Share on Facebook
  • Share on LinkedIn
  • Share on Twitter
Share
  • Share on Facebook
  • Share on LinkedIn
  • Share on Twitter
Sign up for our monthly newsletter.
Sign up for our monthly newsletter.

Read what's next.

Blog

Evolving Web Apps Through File Bundling and Minification

Blog

The Three Keys to Optimizing Code Review

  • Twitter
  • LinkedIn
  • Instagram
  • Facebook
United States
MentorMate1350 Lagoon Ave, Suite 800
Minneapolis
, MN 55408

+1 612 823 4000
Bulgaria
67 Prof. Tsvetan Lazarov Blvd.
Sofia 1592, Bulgaria,
+359 2 862 2632
Sweden
Drottninggatan 29
411 14 Göteborg

+46 3 199 0180
Paraguay
Carlos M. Gimenez 4855
Asunción, Paraguay

+595 21 327 9463

Copyright © 2023 MentorMate, Inc.

  • Cookies
  • Privacy
  • Terms
  • Continuity Policy
This site is registered on wpml.org as a development site.