Your First Kotlin Android App: Polishing the App

It’s time to style the buttons in the bullseye app.

If you take a look at the buttons in the app, they all have the same look and feel of the default button. You’ll change that now.

You’ll give the buttons a custom look like the image below. In that screenshot, you can see that the hit me button has a rounded corner while the start over and info buttons are circular with custom icons.

To achieve the circular button, you will make use of drawables. A Drawable is just a name of any visual resource that can be drawn on the screen. So a shape, an icon or an image are all classified as drawables in Android.

You’ll style the start over button to see drawables in action. This button would need two items: the circular black background and the icon. Let’s do that now.

First, let’s create the background. To do this, open up the project window. Then right click on the drawables folder, go to new, then select “Drawable Resource File.” Enter “circular_button” as the file name then click “OK.”

This creates a new xml file in the drawables folder. And if you look at the content of the file, it has a selector tag as its root element. You use a selector element when you want a drawable to have different states. In here we would define two states for the button: when it is pressed and the default state.

Enter the following code for the default state:

<item android:state_pressed="false">
    <shape android:shape="oval">
        <solid android:color="@color/black" />
    </shape>
</item>

Each graphic for the state is represented by an item element. You set the pressed state to false so this will be displayed when the button is not pressed. The shape is set to oval and given a solid color of black. Remember the black color is defined in the colors.xml file.

Now the nesting of these elements in xml might seem a bit intimidating at the moment. Not to worry, you’ll get used to it over time and if you observe closely you can always make out pseudo codes in plain English from this structure. Plus, Android Studio provides autocompletion as you type.

Next, let’s add up the item for the pressed state. Go ahead and copy this item. Then paste it below. Android studio already gives us a warning and if you hover over it, you can see that Android Studio says that the second node is unreachable because it is identical to the first item. You can see that the selector element is just like an if/else statement. The state provided in each item must be unique.

So I’ll go ahead and change the pressed state to true and also change the color to grey. So this second item will be be displayed when you press the button.

To see what the pressed state looks like before trying it out on the button, head over to the toolbar up in the preview window by the right. You’ll see the state selector switch. Go ahead and click on it. It shows you different types of state you can provide and toggles for each type of state. You worked with the pressed state in your code and you can see false is selected as its current state. Go ahead and select true. As you can see, the circular button with the grey background is shown as the pressed state. I’ll change that back to false.

Next, you need to add the icon. For this, right click on the drawables folder once again. Go to New, then select “Vector Asset.” Then click on the “Clip Art” box. Search for “refresh” in the search box above. Select it then hit okay.

Let’s give it a shorther name. I’ll just name it refresh_24 where 24 is the width and height of the icon. Then you change the color by clicking on the color box. Then give it a white color by selecting the top-left corner of the color pallette. Click on the next button. It shows you where this vector asset would be saved and you can see that would be inside the drawables folder. Okay, I’ll hit the finish button.

Go ahead and open up this file if its not open. You can see the corresponding xml code. The advantage of creating drawables as vector assets instead of plain images is that you can edit its size and other properties in the xml file and the graphic wont lose its quality. Imagine if this was a plain image and you needed a bigger version or you need to change its color. With vectors, you can easily change the properties in here and the resolution will still be maintained.

Now its time to add these assets to the button. Open up the layout file. Head over to the start over button code. Then set its background to the circular button drawable you just created like so:

android:background="@drawable/circular_button"

You can see the button is distorted. Let’s fix that by changing the width and height. For this, update the width and height to 50dp like so:

android:layout_width="50dp"
android:layout_height="50dp"

Then remove the text property. You can see we have a circular button but with the wrong background color. You need to add the refresh icon and the button view doesnt give us access to add images. For this, you use an ImageButton. Go ahead and change the Button to an ImageButton. And instantly, the correct color from the drawable shows up.

Finally, let’s add the icon. Add in the src of the icon by entering the following code:

android:src="@drawable/refresh_24"

And voila!!! You have your custom button.

Let’s run the app to see the pressed state in action. When you press down the start over button, you can see that it shows a grey backgorund. Cool!!!

One more thing to do. Let’s change up the styling for the hit me button. I’ll be doing this in the xml layout file by setting some attributes. Click on the hit me button in the split editor to take you to its code. Then add in the following attributes:

android:padding="16dp"
app:cornerRadius="12dp"

Here you added a padding to give the button more inner spacing. This would make the button bigger. Then you added a corner radius of 12dp to make the edges of the button rounded.

Run the app once again. And there you have it, better styles for the buttons in the bullseye screen.