Developer

Hands-on with Android's material design: App theming

Follow along as William J. Francis dips his toes into the shallow end of the Android material design pool and tests the waters of styles.xml.

android-material-design-cnet.jpg
Android's Gmail app, before and after material design.
Image: Screenshot by Stephen Shankland/CNET

How do you eat an elephant? One bite at a time, of course! We've all heard it before, but if you've taken a moment to look at the massive specs for Android's new material design guide you may have a new found appreciation for those tried and true words of wisdom. I've been itching to get my hands on the new material design features, but it's a little tough to know where to start.

To that end, I decided to dip my toes into the shallow end of the material design pool and test the waters of styles.xml. Feel free to follow along with the brief tutorial below, or download and import the entire project directly into Android Studio.

1. Create a new project in Android Studio. Target a min SDK of API 14, and choose the "blank activity" template.

2. Under the /Gradle Scripts folder add the following line to the "dependencies" section of your build file:

compile 'com.android.support:appcompat-v7:21.0.+'

3. In the /res folder update the default layout to include a button.

activity_main.xml

<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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <Button
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Materials Design!"/>

</RelativeLayout>

4. In the /res/values/styles folder you will find styles for each of the platforms you will be supporting. Since we are using the support app-compat library, you should be able to delete all the alternate style resources, meaning the only file you should leave is styles.xml.

styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#ffc05d68</item>
    </style>
</resources>

5. Open the MainActivity .java file in the app/java/package folder and extend ActionBarActivity.

MainActivity.java
package com.authorwjf.hellomaterials;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

We are ready to run the application. Because we used the compatibility library the features should degrade gracefully, but I recommend creating a Lollipop emulator so you can see what sort of effects you get for free. In particular, I'm a big fan of the ink animation that occurs when you press the button down.

materialactionbarthemed1.png

Now that you have a base project set up there are plenty of other theming attributes to play with. Check out this link for the scoop on:

  • colorPrimaryDark
  • colorAccent
  • colorControlNormal
  • colorControlActivated
  • colorControlHighlight
  • colorSwitchThumbNormal

Also see

About William J. Francis

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

Editor's Picks

Free Newsletters, In your Inbox