UI Development

In the previous chapter, we saw how Android Studio provides many invaluable tools for designing layouts quickly and simply. However, we only concerned ourselves with the design of static UIs. This, of course, is an essential first step, but our interfaces can, and should, be dynamic. And, according to material design guidelines, user interactions should be illustrated graphically using movement and color to intuitively demonstrate the action being performed, such as the ripple animations that result from tapping on a button.

To see how this is done, we need to look at a practical example and start building a simple, but functional, application. But first, we will examine one or two more ways of applying the look and feel we want, and Android users expect, to our designs. This process is largely assisted by the use of support libraries, in particular, the AppCompat...

Material design

Although Material design is by no means essential, and can be ignored entirely if you are developing full-screen apps such as games, which often come with their own design rules, it is nevertheless an elegant design paradigm and is widely recognized and understood by the user base.

One very good reason for implementing Material is that many of its features, such as card views and sliding drawers, can be applied with great ease, thanks to the associated support libraries.

One of the first design decisions we need to take is what color scheme, or theme, we want to apply to our app. There are one or two material guidelines regarding the shade and contrast of our themes. Fortunately, Android Studio's Theme Editor makes generating material-compliant themes very simple indeed.

...

The design library

As mentioned, the design support library provides widgets and views commonly found in material apps.

As you will know, the design library, like other support libraries, needs to be included as a gradle dependency in the module level build.gradle file, as follows:

dependencies { 
    compile fileTree(include: ['*.jar'], dir: 'libs') 
    androidTestCompile('com.android.support.test.espresso:espresso-
      core:2.2.2', { 
          exclude group: 'com.android.support', module: 'support-
                annotations' 
    }) 
    compile 'com.android.support:appcompat-v7:25.1.1' 
    testCompile 'junit:junit:4.12' 
    compile 'com.android.support:design:25.1.1' 
} 

Although it is always useful to understand how things are done, there is, in fact, a great shortcut for adding a support library...

Collapsing app bars

Another well recognized Material design feature is the collapsing toolbar. This generally contains a relevant image and a title. This type of toolbar will fill a large proportion of the screen when the user scrolls to the top of the content, it handily tucks itself out of the way when the user wishes to view more content and scrolls down. This component serves a useful purpose, as it provides a great branding opportunity and a chance for our app to stand out visually, but it does so without using up valuable screen real estate.

A collapsing app bar

The best way to see how this is constructed is to examine the XML code behind it. Follow the steps to recreate it:

1. Start a new Android Studio project. We will be creating the following layout:

Project component tree

2. First open the styles.xml file.
3. Ensure that the parent theme speculates no action bar, as follows...

Summary

In this chapter, we built on the work of the previous chapter and explored how more sophisticated layouts can be easily constructed using the coordinator layout and its associated library, which does a great deal of the work for us such as automating collapsing toolbars and preventing overlapping widgets.

We concluded the chapter by exploring another invaluable design library, the percent library, which can solve a multitude of design problem when developing for very different screen sizes and shapes.

The next chapter will expand on this one by exploring more dynamic elements for interface development, such as screen rotation, developing for wearables, and reading sensors.