BeatBox is looking good. You now have round buttons and they visually respond to presses. Time for something a little more advanced.

Layer list drawables allow you to combine two XML drawables into one. Armed with this tool, add a dark ring around your button when in the pressed state.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">

          <solid
              android:color="@color/red"/>
        </shape>
    </item>
    <item>
        <shape
            android:shape="oval">

          <stroke
              android:width="4dp"
              android:color="@color/dark_red"/>
        </shape>
    </item>
</layer-list>

You specified two drawables in this layer list drawable. The first drawable is a red circle, as it was before this change. The second drawable will be drawn on top of the first. In the second drawable, you specified another oval with a stroke of 4dp. This will create a ring of dark red.

These two drawables combine to form the layer list drawable. You can combine more than two drawables in a layer list to make something even more complex.

Run BeatBox and press on a button or two. You will see a nice ring around the pressed interface (Figure 23.5). Even slicker.

Figure 23.5  BeatBox complete

With the layer list drawable addition, BeatBox is now complete. Remember how plain BeatBox used to look? You now have something special and uniquely identifiable. Making your app a pleasure to look at makes it fun to use, and that will pay off in popularity.