With the advent of the latest version of Android, Lollipop (5.0), Google has introduced to the world the concept of their Material Design philosophy. Kudos to Google for creating a really well thought out and fresh visual language for their applications. You can explore more about the Material Design here. In one of our latest Mobile App development undertakings, we took a good look at the Material Design features and how to incorporate them into our app in a backwards compatible manner. This post will look at a few of our findings.

Material Design

AppCompat v21 for Material Design

Lollipop has introduced a brand new UI along with a few new APIs But for the next few years, almost all developers will be using the AppCompat v21 compatibility API to emulate most of the new behavior in older versions of the OS. In this release of AppCompat, Android introduces a new Toolbar widget. This is a generalization of the Action Bar pattern that gives you much more control and flexibility. Toolbar is a view in your hierarchy just like any other, making it easier to interleave with the rest of your views, animate it, and react to scroll events. You can also set it as your Activity’s action bar, meaning that your standard options menu actions will be display within it.

In order to use AppCompat, you just have to add it as a gradle dependency like so:

dependencies {
compile "com.android.support:appcompat-v7:21.0.+"
}

Use the ‘+’ for including the latest version.

A note about Gradle and Android Studio

If you haven’t tried out Android Studio in a while, now is a great time to check it out. It recently hit version 1.0 and we feel that now it is the best IDE for Android development. It also makes use of the gradle based build system by default and that is something we suggest you should be using.

Theming

First thing’s first. All of your themes (that want an Action Bar/Toolbar) must inherit from Theme.AppCompat. There are variants available, including Light and NoActionBar. For most apps, the following theme style should be enough:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- Set AppCompat's actionBarStyle -->
<item name="actionBarStyle">@style/MyActionBarStyle</item>
<!-- Set AppCompat's color theming attrs -->
<item name=”colorPrimary”>@color/my_awesome_red</item>
<item name=”colorPrimaryDark”>@color/my_awesome_darker_red</item>
<!-- The rest of your attributes -->
</style>

This should be enough to get you started. On older platforms, AppCompat automatically propagates their values to the framework attributes on API 21+. This automatically colors the status bar and Overview (Recents) task entry. If you have any issues with the text color on the toolbar, this post will probably help you.

Toolbar

The Toolbar is a generalization of the ActionBars. While the ActionBar was rigid in that it formed a part of the decoration of the application, the Toolbar is somewhat more free in that it can be placed anywhere in the user interface. This means you can add navigation buttons, branded logos, titles, subtitle, action menu items, or even your own custom views.

<android.support.v7.widget.Toolbar
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />

To use this toolbar as the App Bar, you need to derive from ActionBarActivity and call its setSupportActionBar() method.

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);

The height, width, background, and so on are totally up to you; these are just good examples. As Toolbar is just a ViewGroup, you can style and position it however you want.

Material Design is a great step in the right direction for Android. Some backwards compatibility issues aside, it should improve the user’s experience immensely. In a subsequent article, we will look at implementing transitions as per the Material Design philosophy.

Material Design for Android and Backwards Compatibility

2 thoughts on “Material Design for Android and Backwards Compatibility

  • July 9, 2015 at 11:25 am
    Permalink

    Best and impressive article. Thanks for providing this kind of useful information. You can refer <a href="http://www.onlinemarketingcourse.in“>online marketing course for much more details.

    Reply
  • August 23, 2016 at 5:27 pm
    Permalink

    This is very interesting technical information, here explains how the mobile Applications are developing. That this coded explains will bring me to get more interesting to learn more about mobile app development methods. The code which is used for Theming and Tool bar is very easy to understand.

    Reply

Your Thoughts: