Your First Kotlin Android App: Polishing the App

The about page is the page that will be displayed whenever the user taps the info button. Your challenge in this episode is to design the UI to look like the image on the slide. The text required to build the page is already added in the strings.xml file in the starter project of this episode.

Now before you start off this challenge I need to show you how to add a new activity for this. Let’s do that now.

Open up the project window inside android studio if you dont have it open already. Navigate to the package name directory which is inside the java folder. Currently, you have only one activity which is the MainActivity you’ve been working with.

To add a new activity, right click on the package folder, go to new, head down to activity, then select “Empty Activity.” For the activity name, type in AboutActivity. As you can see, a corresponding layout file will be generated. Leave every other option as they are then click the “Finish” button.

The layout file is also added to the list of file in the editor. Click on it to open it up.

Since bullseye is a based on landscape mode, you need to generate the landscape version of the layout file. Click on the “Orientation for Preview” button in the layout toolbar above. Then select “Create Landscape Variation.”

Okay, it’s time for you to build the UI to look like the screenshot in the slide. Remember, the strings needed for the textviews have been added to the starter project for this episode.

All the best.

Hint: Use the “big_text” style we created earlier as the style the bullseye text in the about page.

How did that go? I know, this was a big challenge and thumbs up to you if you made an attempt or pulled it off. Let me show you my solution.

First, I’ll drag in two textviews. I’ll give the first one an id named aboutTitle. Then the second one aboutBullseye. Next drag in a button and give it an id of backButton.

Before we add constraints, let’s add the text for these views using strings from the strings.xml file. I want to do this now so you can see how these views would appear with their actual text in them. For the about title set its text to @string/about_title_text inside the attribute window. For the aboutBullseye text, set its text to @string/about_bullseye_text. Finally, for the button, set its text to @string/back_button_text.

Cool!!! Now its time to add constraints.

I want the about bullseye text to always be at the vertical center of the screen while the title and the back button would be positioned in relation to it. So for that, I’ll go ahead and constrain all sides of the about textview to its parent.

Next, for the title text, constrain its bottom to the top of the about bullseye text. Then constrain the other sides to its parent.

Before we continue adjusting the constraints, let’s style the textviews so you can have a better understanding of the spacing we’re going to need.

Let’s start with the title text. Go ahead and select it. Then in the attributes panel, search for style. Then type in big_text in the style textbox. As you type in, it shows you the string. Go ahead and select it then hit the return key.

For the about text, let’s create a style for it since we’ll be seting multiple attributes. Head over to the themes.xml file. Scroll to the end and enter the following code:

<style name="about_bullseye_text">
    <item name="android:textAlignment">center</item>
    <item name="android:lineSpacingExtra">15sp</item>
    <item name="android:layout_marginStart">16dp</item>
    <item name="android:layout_marginEnd">16dp</item>
</style>

You created a style named about_bullseye_text. You set its text alignment to center instead of the default left alignment. You added the lineSpacingExtra attribute to add spacing between each line of text. This is done to make the text more readable. Finally, you added a start and end margin of 16dp to add some spacing at both edges of the text.

Let’s set the textview to use this style. Head back to the layout file. Then add the style to the about textview by first selecting the textview, then search for style. Then type in about_bullseye_text in the text box and select it when it pops up then hit the return key to apply it. Cool, you can see it updates to display these changes.

And I noticed something. The about text doesnt apply the margins we added. I think there’s something wrong with the width. Let’s check it out.

Head over to the attributes panel. If you look at the width, you can see it has the default value of wrap_content. Let’s change that up so the width is controlled by the constraint. Set the width to 0dp which ismatch constraint. And you can see the margins we added is now applied to the text.

I just noticed we havent added constraints to the back button. So let’s do that now. Constrain its top to the bottom of the about bullseye text. Then constrain the other sides to its parent.

Now that we’ve got the styling for all the views, let’s adjust the spacing between them. For this, you will be using the bias to adjust the spacing instead of using something like a margin that is always a fixed value. For the about title, adjust the vertical bias to 75 using the slider in the attibutes panel. And if its hard to hit the bullseye, you can always set it in the vertical bias textbox above.

Okay, lets set the vertical bias for the button. Select the button and take its vertical bias up to 20.

Using the bias gives us a more dynamic spacing because it uses the concept of relative spacing. So the title for instance has been adjusted 25% from its original location. Rememeber the default bias is always 50. So 75 means we pushed the title down by 25%.

The design is complete and now its time to navigate to this activity when you click the info button. Let’s do that now.