Material Design – appCompat v21

post
By kioko on November 17th In Android, Programming
Material Design

I had a Material Weekend and it was amazing. :-) I created a simple app implementing material design. The source code will be available on Github.

Material Design Demo

Material Design

Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. In simple words Material Design is Awesome. This is a game changer in the Android realm.

Let’s Get Started

The Android 5.0 SDK was released a couple of days ago and among the many cool updates, includes new UI widgets and theming abilities to create material design style apps. To enable you to bring your updated designs to older platforms, we have also updated the support libraries including AppCompat. In this post I’ll outline what’s new in AppCompat and how you can use it in your app.

AppCompat (aka ActionBarCompat) started out as a backport of the Android 4.0 ActionBar API for devices running on Gingerbread, providing a common API layer on top of the backported implementation and framework implementation. The new v21 appcompat update provides the API and feature-set that is up to date with Android 5.0.

Android 5.0 introduces a new widget…. Toolbar .  This  gives you much more control and flexibility in using it that the ActionBar does.

Toolbar

Setting Up

If you’re using Gradle, which I highly recommend; then the first thing to do is to add appcompat as a dependency in your build.gradle:
 

New integration

If you are not currently using AppCompat, or you are starting from scratch, then here’s how to set it up:  

  • All of your Activities must extend from ActionBarActivity. It extends from FragmentActivity from the v4 support library, so you can continue to use fragments.
  • All of your themes (that want an action bar/Toolbar) must inherit from Theme.AppCompat. There are variants available including Light and NoActionBar.
  • When inflating anything to be displayed on the action bar (such as a SpinnerAdapter for list navigation in the action bar), make sure you use the action bar’s themed context retrieved via getSupportActionBar().getThemedContext().
  • You must use the static methods in MenuItemCompat for any action-related calls on a MenuItem.

The Action Bar API guide is a comprehensive guide for AppCompat, although it needs to be updated for v21. Just ignore the ‘Example theme’ section at the bottom, where it mentions that you need to set ‘two version for each action bar style property’.

Migration from previous setup

If you already have an existing AppCompat setup then here’s how to update your theme to take advantage of the new capabilities: We now use the support implementation of Toolbar/ActionBar on all platforms meaning that we no longer read any android: attributes related to the action bar. For apps which already have existing appcompat setups, this means that you should remove your v14+ themes which re-set the same values in the android namespace. Please note, this is ONLY applicable for styles/widgets which affect the action bar. For most apps, you now only need one theme declaration, in values/: values/themes.xml:

Theming

AppCompat has support for the new color palette theme attributes which allow you to easily customise your theme to fit your brand with a primary and accent colour. Here’s a quick example: values/themes.xml:

 

By setting these, AppCompat will automatically propagate the values to the framework attributes on API 21+. This automatically colours the status bar and recents task entry.

On older platforms, AppCompat emulates the color theming where possible. At the moment this is limited to coloring the action bar and some widgets.

Widgets

Toolbar

Firstly, Toolbar is fully supported in AppCompat and has feature and API parity with the framework widget. To use it, you need to use the class android.support.v7.widget.Toolbar. There are two ways to use Toolbar:

  • Use a Toolbar as an action bar when you want to use the existing ActionBar facilities (such as menu inflation and selection, ActionBarDrawerToggle etc.) but want to have more control over it’s appearance.
  • Use a standalone Toolbar when you want to use the pattern in your app in situations the Action Bar would not support e.g. showing multiple toolbars on the screen, spanning only part of the width etc.

Action Bar

To use Toolbar as an action bar, the first thing you need to do is disable the decor provided action bar. The easiest way is to have your theme extend from Theme.AppCompat.NoActionBar (or the light variant).

Second, you need to create a Toolbar instance, usually via your layout XML:
The height, width, background, etc 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. Then in your Activity or Fragment, you set the Toolbar to act as your action bar:

Standalone

Very similar to above, but in this mode you do not set the Toolbar to act as your action bar. For this reason, you can use any AppCompat theme and you do not need to disable the decor-provided action bar. When used by itself, you need to populate the Toolbar with content/actions manually. For instance, if you want it to display actions, you need to inflate a menu into it:See the Toolbar javadoc for more information.

Styling

Styling of Toolbar is done differently to the standard action bar, and is set directly onto the view. Here’s a basic style you should be using when you’re using a Toolbar as your action bar:The app:theme declaration will make sure that your text and items are using solid colors (i.e 100% opacity white).

DarkActionBar

A common question I was asked during development was how to achieve a Toolbar which looks like ‘DarkActionBar’ (dark content, light overflow menu). This is achieved by providing the theme and popupTheme attributes:

This is just the beginning. There is a lot more you can do with Tollbar. This is just a tip of the iceberg.

 

Go ye and Materialise the world :-)

Leave a reply

Recent Posts

Recent Comments

Archives

Categories