Material Design for Android App Developers

By Michael Burton

Your Android app runs, it works great, and does what it says it will do. But does it feel right? You may have noticed that every time you click on the toggle button in the app, there’s no visual acknowledgment of your click. Sure the image toggles, but is there more that you can do?

Android’s visual design language, called Material Design, is all about making your phone’s user interface (UI) look like physical materials. Backgrounds should look like card stock paper; views set on top of the background should be elevated to cast a shadow onto the background; button clicks should cause ripples that expand out over the view like ripples on a pond. These are the little details that make your app a delight to use.

Your UI is quite simple right now, so there’s no need to elevate one part of it over another. But what you do need is some sort of click animation.

Luckily, it’s simple to add one. Go back to your activity_main.xml layout file, and change your FrameLayout to add the following line:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/content"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:foreground="?android:attr/selectableItemBackground">

The foreground attribute in the FrameLayout class allows you to overlay a drawable on top of whatever is inside the FrameLayout. By setting your foreground to ?android:attr/selectableItemBackground, you are placing the Android-standard selectableItemBackground over your entire image. What does the selectableItemBackground do? It’s a usually transparent drawable that when clicked displays a ripple animation across its view.

The question mark (?) in an attribute value means that you are referencing a value in the currently applied theme. If you change your app’s theme or run your app on a phone with another version of Android, the app will look and behave slightly differently (as it should) because you are referencing values from the proper theme.

Go ahead and run your app again, and you will see the standard Android ripple animation when you click your FrameLayout.