Google brings Material Design to pre-Lollipop devices

AppCompat is an API library from Google which allows older versions of Android to be compatible with the latest "Material Design" elements of the world's most popular OS. The library has been updated to v21 in the Android 5.0 SDK, which was released last Friday, and means you can start designing alongside Google's new guidelines and bring it to your current users.

What's New?

Theming

Google's new design takes away from distracting, non-essential elements. The "action bar" - which runs across the top of the device and contains things like battery, Wi-Fi signal, missed notifications, and more - is essential but can affect the immersion of your application.

To help change this, Google has added support for "theming" which will colour the action bar to the same as the primary colour of your app. For example:

values/themes.xml:

 

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">

    <!-- colorPrimary is used for the default action bar background -->

    <item name=”colorPrimary”>@color/my_awesome_color</item>

 

    <!-- colorPrimaryDark is used for the status bar -->

    <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</item>

 

    <!-- colorAccent is used as the default value for colorControlActivated,

         which is used to tint widgets -->

    <item name=”colorAccent”>@color/accent</item>

 

    <!-- You can also set colorControlNormal, colorControlActivated

         colorControlHighlight, and colorSwitchThumbNormal. -->

    

</style>

Using this, AppCompat would propagate their values to the framework attributes on API 21+ and color the status bar and recent tasks appropriately. On older platforms, AppCompat can colour the action bar and some widgets but not the recent tasks view.

Widget Tinting

On Android L, all widgets will be tinted using the colours you've assigned to your app due to the OS-based additions of drawable tinting and referencing theme attributes in drawables. However, pre-Android L you are a little more limited in what will be tinted...

The following elements are supported:

  • Everything provided by AppCompat’s toolbar (action modes, etc)
  • EditText
  • Spinner
  • CheckBox
  • RadioButton
  • Switch
  • CheckedTextView

Toolbar

A new widget called 'Toolbar' was introduced in Android L which contains a navigation button, a logo image, a title and subtitle, one or more custom views, and an action menu (with an option overflow menu if needed.)

This has complete parity with the pre-Android L framework widget and can be used as an Action Bar (when you want to use existing Action Bar facilities) or as a standalone toolbar for situations that an Action Bar would not support.

In order to use Toolbar as an Action Bar, you must first disable the standard Action Bar. You must then create an instance of it - usually in your layout XML - and then in your Activity or Fragment you must set the Toolbar to act as your Action Bar like below:

@Override

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.blah);

 

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

    setSupportActionBar(toolbar);

}

SearchView Widget

AppCompat can now use Lollipop's new SearchView API which allows for far more customisation when adding a search into your application. It can be styled as below, but the default will work for most applications:

values/themes.xml:

<style name=”Theme.MyTheme” parent=”Theme.AppCompat”>

    <item name=”searchViewStyle”>@style/MySearchViewStyle</item>

</style>

<style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>

    <!-- Background for the search query section (e.g. EditText) -->

    <item name="queryBackground">...</item>

    <!-- Background for the actions section (e.g. voice, submit) -->

    <item name="submitBackground">...</item>

    <!-- Close button icon -->

    <item name="closeIcon">...</item>

    <!-- Search button icon -->

    <item name="searchIcon">...</item>

    <!-- Go/commit button icon -->

    <item name="goIcon">...</item>

    <!-- Voice search button icon -->

    <item name="voiceIcon">...</item>

    <!-- Commit icon shown in the query suggestion row -->

    <item name="commitIcon">...</item>

    <!-- Layout for query suggestion rows -->

    <item name="suggestionRowLayout">...</item>

</style>

All in all, AppCompat v21 looks a great way to bring some of Google's new Material Design love to pre-Android L devices. We're excited to see what you build with it. You can get your hands on Android SDK 5.0 (and its final APIs before release) here.

Do you plan to bring Material Design to your apps? Let us know in the comments.

Related Stories

Leave a comment

Alternatively

This will only be used to quickly provide signup information and will not allow us to post to your account or appear on your timeline.