Leave a rating/review
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.
startOverButton
.
Then also set the id of the second button to infoButton
.
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.
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.
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.
scoreGroup
.
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.
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.
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.
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.
roundGroup
.
After that you change the id of the first textview to roundLabel
Then the text to the current_round_label
string resource.
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.
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.