Themes and material design
Creating a new theme, technically speaking, is very easy, and we will see how to do it in a minute. From an artistic point of view, however, it is more difficult. Choosing which colors work well together, let alone suit your app and the imagery, is much more difficult. Fortunately, we can turn to material design for help.
Material design has guidelines for every aspect of UI design and all the guidelines are very well documented. Even the sizes for text and padding that we used for the CardView project were all taken from material design guidelines.
Not only does material design make it possible for you to design your very own color schemes, but it also provides palettes of ready-made color schemes.
Tip
This book is not about design, although it is about implementing design. To get you started, the goal of our designs might be to make our UI unique and to stand out at the exact same time as making it comfortable for, even familiar to, the user.
Themes are constructed from XML style items. We saw the styles.xml file in Chapter 3, Exploring Android Studio and the Project Structure. Each item in the styles file defined the appearance and gave it a name such as colorPrimary or colorAccent.
The questions that remain are, how do we choose our colors and how do we implement them in our theme? The answer to the first question has two possible options. The first answer is to enroll on a design course and spend the next few years studying UI design. The more useful answer is to use one of the built-in themes and make customizations based on the material design guidelines, discussed in depth for every UI element at https://developer.android.com/guide/topics/ui/look-and-feel/.
We will do the latter now.
Using the Android Studio theme designer
From the Android Studio main menu, select Tools | Theme Editor. On the left-hand side, notice the UI examples that show what the theme will look like, and on the right are the controls to edit aspects of the theme:
As mentioned, the easiest way to create your own theme is to start with, and then edit, an existing theme. In the Theme dropdown, select a theme you like the look of. I chose AppCompat Dark:
Select any items on the right-hand side that you want to change the color of, and choose a color in the screen that follows:
You will be prompted to choose a name for your new theme. I called mine Theme.AppCompat.MyDarkTheme:
Now, click the fix text to apply your theme to the current app, as indicated in the following screenshot:
You can then run your app on the emulator to see the theme in action:
So far, all our apps have been run on a phone. Obviously, a huge part of the Android device ecosystem is tablets. Let's see how we can test our apps on a tablet emulator, as well as get an advanced look at some of the problems this diverse ecosystem is going to cause us, and then we can begin to learn to overcome these problems.