Your First Kotlin Android App: Polishing the App

You worked mainly with themes in the last episode. It’s time to create and assign styles for the TextViews in the bullseye app. Let’s do that now.

Open up the themes.xml file if you dont have it open already.

The first text we’re going to style is the game statistics text views: thats the score and round values. Add in the following style below the fullscreen theme:

<style name="game_stats_text">
    <item name="android:textSize">20sp</item>
</style>

This creates a style named game_stats_text and applies a textsize of 20sp. Let’s head over to the landscape layout file. Then activate the split mode editor by clicking on the split button up in the toolbar. Select the game score textview. This scolls the code editor to that section in the code. Then assign the style you just created to the textview like so:

style="@style/game_stats_text"

Next, copy the style attribute you just assigned. Select the game round textview from the design editor. Then paste in the style attribute to the game round textview:

style="@style/game_stats_text"

Run your app. And there you have it, the text size from the style is now assigned to both textviews. So if you want to change the text size for the statistics numbers, you just change it in the style definition and it updates accordingly.

Let’s style the instruction text. Head back to the themes.xml file.

Then paste the following code under the previous style:

<style name="instruction_text">
    <item name="android:letterSpacing">0.2</item>
    <item name="textAllCaps">true</item>
    <item name="android:textAlignment">center</item>
</style>

This style sets the letter spacing to 0.2. Letter spacing is the space between each letter in a string. The value of 0.2 adds more spacing between the characters of the instruction textview.

The next item sets the casing of the text to uppercase. So it doesn’t matter the casing in the strings.xml resource file, setting this attribute to true sets the text to all uppercase characters.

The final item aligns the text to the center.

Now head back to the layout editor. Then assign this style to the instruction textview.

style="@style/instruction_text"

And it updates instantly in the layout design editor and also when you run your app.

The final textview you will style is the target text. Remember, you manually set the size attribute. Let’s go the target textview in the code layout editor by clicking on it. Go ahead and remove the textSize attribute.

Then head over to the themes.xml file. And add in the following code:

<style name="big_text">
    <item name="android:textSize">32sp</item>
</style>

This time around, you are giving this style a more generic name: big_text. We do this because you will use this same text size for some other text in a future episode. Alright, let’s go add up the style.

Head back to the layout editor. Then add the style attribute for the target textview:

style="@style/big_text"

Then run your app.

Everything looks good but we need one final touch. Currently all textviews have a grey color. I want to make them bold and with a black color. Defining such style in a theme would be the best approach for this since we want all text in our application to have such appearance.

Let’s head over to the themes.xml file one final time. If you scroll up to your main theme’s definition, you can see a comment that says “Customize your theme here.” This is where you add your custom styling that can override the default styling.

Add in the following items below the comment:

<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/black</item>

Then run your app.

And voila!!! All textviews are updated to match the theme’s styling.