Android screen components and their properties

Screen components and their properties

The application consists of windows called Activity. At a particular time, one Activity is displayed and occupies the entire screen, and the application switches between them. An example, a mail application. There is one Activity - list of letters, another - viewing the letter, the third - the settings of the box. At work, you navigate through Activity.

View is usually placed in the ViewGroup. The ViewGroup example is Layout. Layout can be of various types and is responsible for how its child View will be located on the screen (table, row, column).

Let’s create an application or open already exist. Start Android Studio and launch already created application.

In the left of screen you can see folder with name (res). There is you can find folder (layout)

This is a layout file. In it, we define the set and location of the View components that we want to see on the screen. When the application starts, Activity reads this file and displays to us what we have configured.

Important zones in figures 1 to 6. Let's go over them.

1) Design и Text

Design is a graphical representation of the screen.

Text is a text representation.

2) Screen Display Modes

Design - in it we see the View components the way they usually look on the screen.

Blueprint - only the outlines of the View components are displayed

Buttons in area 2 allow you to switch modes:

- Design

- Blueprint

- Design + Blueprint

3) Screen

Here you can see what the screen of your application looks like. Here we will add different components from area 4.

4) The palette

This is a list of all the View components that you can add to your screen: buttons, input fields, checkboxes, progress bars and more.

5) Component tree

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

6) Properties

This area is still empty. When working with any View component, the properties of this component will be displayed here. Using properties, you can customize the appearance, layout and contents of the View component.