Your First Kotlin Android App: An App From Scratch

In the last episode, you added a textviews and positioned it by adding rules for its constraints. Let’s continue building the UI and as we go you’ll learn about two important parts of creating layouts in android: adding ids and working with string resources.

Back Android Studio, lets finish up the UI.

You’ll add another textview so you can practice working with constraint layout. In the future, you will generate a random number and display it in this TextView.

Go ahead and drag a text view on the screen.

Then change the text to some number. This new text view will appear under the previous one and we always want its position to be bound to the text above it.

So what do we do?

We constrain it or set some rules for the position of this new text view. And these are the rules:

First,

• we want the top of the text view to be constrained to the bottom of the previous textview so we connect it.
• next, we want this text view to be centered in relation to the previous text view, so we connect both the left and right constraints to the left and right constraints of the previous text.

And this places the random number text view at the center of the previous text view.

Now if you’re confused, not to worry.

In this course, you will learn by repetition so all these concepts will become clearer as you progress.

Also, if you look at the layout section of the attributes panel, you can see where each side of the textview is constrained.

Next, you’re going to add a spacing between the text views. For this, add a margin of 8 at the top new random number text view. And now we have some spacing.

Run your app once again. You have two text views displaying correctly in the app.

To add a slider to our UI, we’ll be using the seekbar view. Inside the views palette, type in seekbar in the search box.

Then drag it into the layout. Attach both its top and bottom constraints to its parent, in this case, the constraint layout. We do this because we want the slider to be at the vertical center of the screen. Then other views will be positioned relative to the seekbar. So let’s attach the bottom of the target text view to the top of the seekbar.

Next, drag in two more textviews. These textviews will be the labels for the minimum and maximum target values.

Then attach the start of the seekbar to end of the textview. Also do the same for the end of the seekbar but this time attach it to start of the textview on the right.

Then you set the width of the seekbar to 0dp which will make it match its constraint. Match constraint here simply means that the seekbar should take up the remaining avalable space. And that’s why you see the seekbar fill up the remaining horizontal space.

Next, constrain the left textview to left of its parent which in this case is the ConstraintLayout.

To center it relative to the height of the seekbar, constrain the top of the textview to the top of seekbar. And also constrain the bottom of the textview to the bottom of the seekbar. Cool!!! We have it centered on the vertical axis in relation to the seekbar.

Then set the start margin of the left textview to 32dp. But when we try to set the end margin you’ll notice it cant be set. We need to constrain the end of the text to something so the end margin will work. But if we try to do that in the design view, it will be hard.

For this, go to the code view. Then scroll down to the text view.

You can see all the attributes we set. Now go ahead and add the following for the end constraint:

app:layout_constraintEnd_toStartOf="@id/seekBar"

This constrains the end of the text to the start of the seekbar. Then we add an end margin of 16dp

android:layout_marginEnd="16dp"

We’ll do the same thing for the textview on the right. I’ll add the constraints and the margins. But this time we will make sure to constrain the start of the textview to the end of the seekbar. I’ll do this in the xml view and speed up the video for this part:

android:layout_marginStart="16dp"
android:layout_marginEnd="32dp"
...
app:layout_constraintBottom_toBottomOf="@+id/seek_bar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/seek_bar"
app:layout_constraintTop_toTopOf="@+id/seek_bar"

Go through the code I just added and you’ll see its plain English. The layout language was designed to make the properties easy to understand.

And if you go to the design tab, all views are positioned correctly.

Now, notice we have a warning on all of the textviews in the component tree.

Go ahead and click on the warning sign of one of the textviews. This opens up a panel. And the warning states that the text in the in textview was hardcoded and that we should use a string resource. Now, what’s a string resource and why is this warning important?

Let’s talk about that in the next episode.