Your First Kotlin Android App: An App From Scratch

When you make an android app, you build the layout using views. Views in android are a collection of layout components which you use to build the app’s UI.

Some common views include a TextView to show text on the screen. A Button to add interactivity to the app. And an ImageView which is used to display an image.

Android comes bundled with a lot of views to suit your applications needs. You can also download libraries written by other developers that gives you more custom views to choose from.

Let’s take a look at the what the Bull’s Eye screen will look like at the end of this part but with all the views highlighted and labelled.

As you can see, it consists of different views that makes up the user interface.

These views will be created using either a markup language called xml or the layout editor which has a drag and drop interface.

Then android will be responsible for creating and displaying the corresponding view objects behind the scenes.

Declaring your UI in XML helps you seperate your app’s logic from the UI. And you can also provide different designs for different screen sizes.

Now, dont worry if you’ve never learned xml. I’ll walk you through everything you need to know.

If you followed along and created a project in the earlier episode then just continue from where you left off. If you didn’t that’s fine too.

Just download and open up the stater project for the episode by clicking on file in the menu bar. Then select “Open” and browse to the download location in the finder and open up the folder inside Android Studio.

I’ll close up the dialog since i got my project already open.

In case you get a build error talking about the SDK when you open up the project, no need to be worried. Just click on the link that tells you to install the required SDK and everything should be fine.

If you recall, we opened up a file and updated some text in the last episode. Go ahead and open it up again.

It is located inside the layout folder inside the resources directory. This file named activity_main.xml defines the layout of the screen we see when we run the app.

If you look at the top, we have a button group that switches the view to display in the layout editor.

Clicking on Code shows the xml representation of the layout. Clicking on Split shows the code and design view side by side. And clicking on Design shows the screen in a interface designer format.

You’ll be working with the design view for now. You’ll start off by adding a TextView to the interface but before doing that you’ll delete the existing TextView.

Select it, then hit the backspace button. This deletes it from all views and if we check the code view, we can see we no longer have a TextView tag.

Android Studio updates every view in real time. I’ll select the design view once again.

Now, to add a TextView, head over to the palette pane at the left corner of the layout editor.

This contains all the built-in UI components that you can use to build your Android apps.

Currently, the palette group is set to show commonly used views. You can switch to specific group sets by selecting them.

I’ll switch it back to the common view set.

Next, go ahead and drag a TextView from the palette and drop it on the design view. Then position it by dragging it to the desired location.

On the right side of Android Studio, we have the attributes panel. It is used to configure properties of views. Select the text you just added, head over to the attrtibutes panel and update the text property to the following:

“PUT THE BULLSEYE AS CLOSE AS YOU CAN TO”

This sets the text of the TextView to the value entered.

Now go ahead and run your app.

OOppss!!! What just happened?

Why is the textview placed at the top-left corner of the screen?

To understand what’s happenning here, take a look at the component tree view right below the palette panel. You can see the textview we just added. It is inside something called a “ConstraintLayout.”

Next to the textview, we have a red icon which means that we have an error. Go ahead and click on it.

And the error states that the textview is not contrained.

To understand what this means, lets talk about ConstraintLayout.

A ConstraintLayout is a container that lets you position and size the views it contains in a flexible way. It belongs to the view category known as ViewGroup. A ViewGroup is just a view that can contain child views.

With ConstraintLayout you have a flat heirarchy of views which are constrained to one another or to their parent. The advantage of a flat heirarchy is that there is no unneccesary nesting of views to complicate the layout.

You simply add a view and set some rules for its horizontal and vertical positions and it obeys the rules when the app runs. You can see the set of Squiggly lines connected to the text here. Those are how the constraints are represented in android studio’s layout editor.

Now, back to the problem we had in our layout: “Why did the textview go to the top-left corner of the screen?”

Well, when you add a view that is a child of a ConstraintLayout, the view is drawn at position [0,0] which places it at the top left corner of the screen.

This means the view is drawn at 0dp from the top and 0dp from the left. To solve this, we need to add some rules to that view In other words, we need to constrain the view.

Back in Android Studio, go ahead and constrain the textview to something in order for it to hold its position. In this case, i will constrain all sides of the text view to its parent which is the constraint layout. I’ll do that by dragging the circular handles around the textview to the edges of the screen.

Cool!!!

Now the text is centered in the screen. And if we run the app once more, you can see it is correctly placed at the center of the screen.

But we dont want it centered. We want it moved to the top a bit.

Take a look at the layout group in the attributes panel. You can see the constraints of the textview.

You can see that all sides of the text view are constrained to its parent. On top of it, you can see a visual representation showing the constraint.

And on each side you can see the margins are set to 0. Margins are the spacing from a view to its surroundings.

Now we could set the bottom margin to say maybe 300 to push it up a bit. But the problem with this approach is that the value of the margin would be fixed and wont adapt to other screen sizes.

To position the view correctly for different screen sizes, we need to offset it on the vertical axis using the bias property.

The vertical and horizontal biases are those sliders beside the constraints. They are currently set to the default value of 50 which places the view in its original constraint which is at the center.

I’ll go ahead and slide it to 20. Now it is offset 20% from the top.

I know thats a lot of information to take in. But the whole idea behind constraint layout is to always add rules to views inside it. So that whenever the app runs, the views are constrained based on the rules set.

Alright, let’s continue building the interface in the next episode.