Now that BeatBox sounds intimidating, it is time to make it look intimidating, too.
So far, BeatBox sticks with the default UI styles. The buttons are stock. The colors are stock. The app does not stand out. It does not have its own brand.
We can restyle it. We have the technology.
Figure 22.1 shows the better, stronger, faster – or at least more stylish – BeatBox.
Begin by defining a few colors that you will use throughout the chapter. Edit your colors.xml file in res/values to match Listing 22.1.
Listing 22.1 Defining a few colors (res/values/colors.xml
)
<resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="red">#F44336</color> <color name="dark_red">#C3352B</color> <color name="gray">#607D8B</color> <color name="soothing_blue">#0083BF</color> <color name="dark_blue">#005A8A</color> </resources>
Color resources are a convenient way to specify color values in one place that you reference throughout your application.