Your First Kotlin Android App: Polishing the App

It’s time for your first challenge of this part. For this, you will style the info button to look just like the start over button but this time around using the info icon. Alright, go ahead and tackle this one and you can watch the previous episode in case you need a refresher on the steps to take.

All the best!!!

Hint: The Info button will use the same circular background that was used for the start over button. The icon on the info button is the info icon.

How did it go? I believe you did well? I’ll implement it now.

First things first. Let’s add in the info icon. I’ll right click on the drawables folder. Go to New, then select “Vector Asset.” Then click on the “Clip Art” box. Search for “info” in the search box. Select it then hit okay.

I’ll rename it to info_24. I’ll leave the color as white. Then click on the next button. It shows you the directory where the vector asset would be saved. I’ll hit the finish button to create the vector.

Open up this file if its not open. And you can see the info icon.

Lets add the assets to the info button. Open up the layout file. Head over to the info button code. Then set background to the circular button drawable

android:background="@drawable/circular_button"

Update the width and height to 50dp like so:

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

Then remove the text property and change the button to an ImageButton.

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

android:src="@drawable/refresh_24"

And there you have it: a custom info button.

Run the app. And if you notice, I passed in the wrong icon. I’ll head back to the code and change it to the info icon.

Then run the app once again. And you can see the correct icon.

And when you press down the info button, you can see that it shows a grey background just like the start over button.