Views and layouts

Views and layouts.

Android UI is built from Views. Views are the building blocks of what users see and touch. Layouts arrange those Views on screen. Today we understand the traditional View system that has been the foundation of Android UI.

The UI is a tree of Views.

A View is a single UI element. A button, a text field, an image. Each View draws itself and handles its own touch events.

Views are organized in a hierarchy. A parent View can contain children. Children can contain their own children.

At the top is a root View. Usually a layout container. It holds everything else.

The system traverses this tree to measure, layout, and draw the UI. First it measures each View. Then it positions them. Then it draws them.

Android provides many built-in Views.

TextView displays text. The most basic View.

Button is a clickable element. Users tap it to trigger actions.

EditText accepts text input. Users type in it.

ImageView displays images. From resources or network.

RecyclerView displays scrolling lists. Efficient for large data.

Each View has properties. Text content, color, size, visibility. You configure them in XML or code.

Views handle events. onClick for buttons. onTextChanged for EditText.

Layouts are ViewGroups that arrange children.

LinearLayout arranges children in a line. Horizontal or vertical. Children go one after another.

ConstraintLayout positions children using constraints. Child A is to the right of child B, aligned to parent top. Flexible and powerful.

FrameLayout stacks children on top of each other. Simple overlay layout.

RelativeLayout positions children relative to each other or parent. Similar to ConstraintLayout but older.

Choose the layout that fits your needs. ConstraintLayout handles most cases efficiently.

Define layouts in XML files.

Files live in res slash layout directory. activity_main dot xml for MainActivity.

XML declares the View hierarchy. Parent element contains child elements. Attributes set properties.

LinearLayout orientation vertical contains TextView and Button. The XML mirrors the hierarchy.

IDs let you reference Views in code. android colon id equals at plus id slash myButton.

Use the layout in Activity: setContentView R dot layout dot activity_main.

XML separates structure from logic. Designers can edit layouts without touching code.

Views have attributes that control appearance and behavior.

layout_width and layout_height control size. match_parent fills the parent. wrap_content fits the content.

Padding is space inside the View. Margin is space outside the View.

Text attributes: textSize, textColor, text. Control the displayed text.

Background, visibility, enabled. Control appearance and interaction.

Attributes are set in XML or code. XML for static values. Code for dynamic changes.

LinearLayout arranges children sequentially.

orientation vertical stacks children top to bottom. orientation horizontal places them left to right.

layout_weight distributes extra space. weight 1 on each child makes them equal size. Different weights give proportional sizes.

layout_gravity positions a child within its space. gravity centers content within the View.

LinearLayout is simple and intuitive. Good for rows and columns of items.

Nested LinearLayouts become inefficient. Prefer ConstraintLayout for complex UIs.

ConstraintLayout positions Views using constraints.

Constrain a View to another View or to the parent. left to left of parent. top to bottom of sibling.

Each View needs enough constraints to determine position. At least one horizontal and one vertical.

Chains group Views together. Spread chain distributes them evenly.

Guidelines are invisible lines for alignment. Percent positioning available.

ConstraintLayout is flat. One level, many children. No nesting needed. Better performance.

The Layout Editor makes visual editing easy.

View binding generates code to access Views safely.

Enable in build dot gradle: viewBinding true.

For each layout, a binding class is generated. ActivityMainBinding for activity_main dot xml.

In Activity: binding equals ActivityMainBinding dot inflate layoutInflater.

Access Views through binding: binding dot myButton dot setOnClickListener.

No more findViewById. Type-safe. Null-safe. Compile-time checked.

View binding is the modern way to access Views.

Let us summarize.

Views are UI elements organized in a hierarchy.

Common Views: TextView, Button, EditText, ImageView, RecyclerView.

Layouts arrange Views: LinearLayout, ConstraintLayout, FrameLayout.

Define layouts in XML. Use attributes to configure Views.

View binding provides type-safe View access.

The View system is the traditional Android UI approach. Next we will see Compose, the modern alternative.