Lesson 4. Screen components and their properties

Lesson 4. Screen components and their properties

Let’s see how in the Android applications is formed what we see on the screen.

Lesson updated 07/07/2017

If you draw an analogy with Windows, the application consists of windows called Activity. At one particular time, one Activity is usually displayed and occupies the entire screen, and the application switches between them. An example is the mail application. In it one Activity – the list of letters, another – viewing letters, the third – setting of a box. When you work, you move on them.

Activity content is formed from different components called View. The most common View is the Button, Input Box, Checkmark, etc.

This can be roughly depicted as:

It should be noted that View is usually hosted in ViewGroup. The most common example of ViewGroup is Layout. Layout is of different types and is responsible for how its child View will be located on the screen (table, row, column …)

Also, Android 3.0 has a new entity – Fragment. But we will cover the snippets in later lessons so that we do not complicate the matter now.

Probably already confused with new words and terms, let’s see it all in practice.

Let’s create a supplement to this lesson. To do this, run Android Studio and open the Android lessons project we created in the previous lesson. Most likely, this project will immediately open to you by default.

Let me remind you that we decided to create all the modules (applications) for lessons in this project. Instead of creating a separate project for each lesson.

Let’s create a module. In the menu File >New> New Module. All the steps are similar to what we did in the previous lesson, but there will be other program and module names

Application / Library name: BasicViews
Module name: p0041basicviews
Package name: ru.startandroid.p0041basicviews

module p0041basicviews created and visible in the list of modules on the left:

In this module we are interested in a file: really > layout > activity_main.xml

This is a layout file. In it, we define the set and location of the View components we want to see on the screen. At program startup, Activity reads this file and shows us what we have built. Most likely, you already have it open for editing, but just in case let’s re-open it with a double click and see how it looks.

A bunch of buttons, captions, etc. I noted important areas with numbers (1 to 6). Let’s walk through them

1) Design and Text

Desing is a graphical representation of the screen. It is now open. And Text is a text representation. It looks like this:

Little is known. For now, we will only use Design submissions.

2) Display modes

In the screenshot in area 3 you see two screens. Ordinary white and some blue next to it. It’s the same screen, but it’s displayed in two different modes:
Design – In it, we see the View components as they normally look on the screen.
Blueprint – Only the contours of the View components are displayed

The buttons in area 2 allow you to switch modes:
– Design
– Blueprint
– Design + Blueprint

I usually will use Design mode in the lessons. You can use whichever you prefer.

3) Screen

Here you can see what your application screen looks like. We will be adding different components from area 4 here.

4) The palette

This is a list of all View components that you can add to your screen: buttons, input boxes, checkboxes, progressbar and more.

5) Component tree

Here is a hierarchy of View components of your screen. Now, for example, the root element is ConstraintLayout. And it has TextView embedded.

6) Properties

This area is still empty. When working with any View component, the properties of that component will be displayed here. The properties allow you to customize the appearance, location and contents of the View component.

To understand what the following is about, please see this lesson:

Lesson 180. ConstraintLayout. foundations

Although it is numbered 180, it is simple and straightforward. In it you will learn how to add View components to the screen. After reading, come back here and we will continue.

Now that you know how to add components to the screen, we can continue.

Right now, we only have TextView on the screen. Let’s add some more components. For example, Button and CheckBox.

Set them some bindings so they don’t leave at startup.

Note that the components appeared in Component Tree

value button and checkBox are the IDs that were assigned to the components automatically. As long as we leave them as such, we will later learn to change them and make them more meaningful.

Now let’s change the captions on these components. In the Component Tree tab (left and bottom), click TextView to select this component.

Now we need the Properties tab (right). In the screenshot, it is marked as area 6. Here we can customize the properties of the component selected in the Component Tree (or on the screen).

Find the property tab in the Properties tab text. Now there is the text Hello World!, Which is displayed on the screen. Let’s change it to your text. Place your cursor in this field and type in, for example, “Google Android”.

I do not advise pressing this Enter box because the studio sometimes offers autocomplete, which may not be right for you. Therefore, after you have written your text there, just click anywhere on the component screen.

The text on the screen has changed. It was Hello World! Became Google Android.

Similarly, you can change the text on the button and the checkbox. Just select these components on the screen or in the Component Tree, in the Properties search for the text property and write your text there. You can even in Russian.

Everything you have configured in this screen will be saved in the res> layout> activity_main.xml file.

Now let’s launch the application. To do this, select your module from the list of available ones and click the right triangle slightly to the right.

The studio will ask you whether to run the emulator

Select the emulator and press OK. You may have a different emulator name

We wait for the emulator to start and then admire the result

All your new texts should appear on the screen

The application shows us MainActivity, and in turn it reads the file activity_main.xml and displays all the View that we created and configured in it.

In the next lesson we:

Consider a layout file from another angle – XML
let’s see where Activity knows which layout file to read and try setting it to read another file
find out what layout file is used when changing screen orientation (horizontal / vertical)

Discuss in the forum [160 replies]

Leave a Comment