Before creating any XML drawables, modify res/layout/list_item_sound.xml to prep your buttons for the changes to come.
Listing 22.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 22.2).
