Now that BeatBox has been themed, it is time to do something about those buttons.
Currently, the buttons do not show any kind of response when you press on them, and they are just blue boxes. In this chapter, you will use XML drawables to take BeatBox to the next level (Figure 23.1).
Android calls anything that is intended to be drawn to the screen a drawable, whether it is an abstract shape, a clever bit of code that subclasses the Drawable class, or a bitmap image. In this chapter, you will see state list drawables, shape drawables, and layer list drawables. All three are defined in XML files, so we group them in the category of XML drawables.
Before creating any XML drawables, modify list_item_sound.xml.
Listing 23.1 Spacing the buttons out (res/layout/list_item_sound.xml)
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="viewModel"
type="com.bignerdranch.android.beatbox.SoundViewModel"/>
</data>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<Button
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:onClick="@{() -> viewModel.onButtonClicked()}"
android:text="@{viewModel.title}"
tools:text="Sound name"/>
</FrameLayout>
</layout>
You gave each button a width and height of 100dp so that when the buttons are circles later on they will not be skewed.
Your recycler view will always show three columns, no matter what the screen size is. If there is extra room, the recycler view will stretch those columns to fit the device. You do not want the recycler view to stretch your buttons, so you wrapped your buttons in a frame layout. The frame layout will be stretched and the buttons will not.
Run BeatBox and you will see that your buttons are all the same size and have some space between them (Figure 23.2).
