Your First Kotlin Android App: Polishing the App

In this episode, you’ll add up the remaining views to complete the game screen. This is what the UI should look like at the end of this episode. I’ll be showing you how to use a faster approach to group and align views when working with constraint layout.

Alright let’s get started.

To get started with the design, I’ll drag in two buttons. I’ll set the id of the first button to startOverButton. Then also set the id of the second button to infoButton.

Next, head over to strings.xml file. You can see some extra strings i’ve added to the starter project. You’ll be making use of them in this episode. Okay, let’s head back to the layout editor.

Select the start over button, then click on the little button beside the text attribute. This opens up the “Pick a Resource” dialog. Go ahead and type in “start” in the search bar. Then select then start_over string resource and hit OK.

I’ll quickly do the same thing for the info button.

Cool!!! Now we have the two buttons set up. Next, we need to add the label and value textviews for the score and game round.

To create this, you’ll be working with a new view called LinearLayout. A LinearLayout is also a ViewGroup just like the ConstraintLayout we’ve been working with. This means that it can contain children views which can be arranged horizontally or vertically. You’ll be using it to group the score label and text.

Head over to the views Palette and type in linear in the searchbox. You can see we have two variations of the linearlayout: the horizontal and the vertical linearlayouts. We want to arrange the score label and text vertically, so go ahead and drag in the vertical linearlayout. Then set the id to scoreGroup.

Next we need to add two textviews inside it. One for the score label while the other one for the score itself. Go ahead and drag in two textviews inside the linearlayout. Set the id of the first textView to gameScoreLabel. Then set its text to a score label string. This time around, I’ll just search for score in the text box and then select the string. This is faster than clicking on the button beside the textbox that opens up a dialog.

For the second textview which will display the score, I’ll set the id to gameScoreTextView. For its text, I’ll set it 0. Don’t worry about the warning that says you should use a string resource. You’ll be setting the value programmatically later on in this course and I’ll show you how we can handle this without having to create a string resource.

Now that we’ve gotten the two textviews setup, lets set up the width and height of the linearlayout. As you see, it is unnecessarily big. Okay, set its width and height to wrap_content. This makes the linearlayout as big as its children and you see that we dont have any extra space.

Cool!!! The next thing to do is to align the children to the center. For this, you’ll set the gravity. And by the way, in case you’re having a hard time trying to select the linearlayout inside the design view, you can always select it from the component tree on the left side of your screen.

Once it is selected, go the attributes panel and search for gravity. Then click on flag icon beside it. This opens up a menu that shows you different values you can select. I want to center the children on the horizontal axis, so I’ll go ahead and select center_horizontally then click on the apply button to save the selection. In case the textview doesn’t center, just make sure that the width and height are set to wrap_content. I’ll do that now.

And the textviews are now centered horizontally.

Next, let’s do the same thing for the round group. For this, you’ll be working with xml because i dont want go over these steps again. You’ll just duplicate the code and change the necessary parts.

So click on the code button up in the navigation bar. Then scroll down to where the linearlayout is located inside this file. Copy and paste it below to create a duplicate.

First, change the id of the linearlayout to roundGroup. After that you change the id of the first textview to roundLabel Then the text to the current_round_label string resource.

For the second textview, just change the id to gameRoundTextView.

We’re done with this, so click on the design tab to switch back to the layout editor.

We have one problem: The round group is directly on top of the score group. Moving and positioning them would be very problematic. For this type of scenario, Android studio provides us with some tools that helps toggle the visibility of views. Inisde the component tree, hover over the column in front of the score group. You can see an eye icon and it says “visibility not set” Click on it. You can see two visibility groups: one for android and the other for something called tools. The one for android toggels the visibilty of view in our app. While tools visibilty toggles the visibility of view in the layout editor. This means that tools visibility has no effect when you run your app.

I’ll go ahead and select “invisible” in the tools visibility section. This hides the score group from the design view but it is visible in the blueprint view below. Selecting gone would make it invisible both in the design and blueprint views.

Okay, now that we’ve got the score group out of the way, select the roundGroup and set its height to 100. This is just temporary, we want to be able to easily move it around. Then drag the roundGroup to the right of the screen, just before the info button. Set its height back to wrap_content.

Then you go back and make the scoreGroup visible once again.

Whew!!! We’re now done with the setup. It’s time to add constraints. I will show you a faster way to do this.

Select new controls you added. And if the hit me button is mistakenly selected, just hold down the shift key and then click on it. This deselects it.

Then right click on one of the selected views, hover over “Chains” in the menu, then select “Create Horizontal Chain.” As you can see, Android Studio is intelligent enough to add the necessary constraints that chains all the selected views together and also constrains the views on edges to their parents in the horizontal axis.

This is nice, but we’re not done yet. Right click on them once more, go to align, then select “vertical centers.” This aligns them at the center of the vertical space.

Finally, we need to constrain this group relative to the hit me button and the parent. Remember, constraint layout is all about relationships. Views have to be positioned in relation to something. What we just did here was to position these controls in relation to each other. We also need to position them in relation to their environment.

Now here’s the catch: We don’t need to do this for all the views in the chain. We can just constrain one view to the environment and the other members of the chain will follow since they are all constrained to each other.

Let me show you what I mean. First, select the start over button. I’ll go ahead and constrain its top to the bottom of the hit me button. And also constrain its bottom to the bottom of its parent. Then when we move the start over button, every view in the chain follows. Works like magic.

I’ll undo that change. We’re now ready to start coding in some functionalities to these controls. I’ll see you in the next episode.