Android Academy · Lesson

Layouts & Views

Design UIs with XML layouts. Use ConstraintLayout, LinearLayout, and common views like TextView, Button, ImageView, and EditText.

Layouts & Views is a free Android Academy lesson on CoddyKit — lesson 3 of 7. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, one of 7 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Building UIs with XML

Android UIs are defined in XML layout files stored in res/layout/. The layout describes the structure and appearance of your screen — which views are shown and where.

Your Kotlin code then inflates this layout and interacts with the views at runtime.

Common View Types

The most frequently used View widgets:

TextView — displays text
EditText — text input field
Button — clickable button
ImageView — displays an image
CheckBox — toggle on/off
Switch — on/off toggle (Material)

ConstraintLayout

ConstraintLayout is the recommended layout for most screens. It lets you position views relative to each other or the parent using constraints — like connecting anchor points.

Flat hierarchy — no nested layouts needed
Flexible — handles any screen size
Used by default in new Android Studio projects

ConstraintLayout XML

A TextView centered on screen in ConstraintLayout:

<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android!"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout

LinearLayout arranges views in a single row or column:

android:orientation="vertical" — stack views top to bottom
android:orientation="horizontal" — arrange side by side
android:layout_weight — distribute remaining space proportionally

Simple and predictable, but avoid deep nesting.

Key Layout Attributes

Every View has these essential attributes:

layout_width / layout_height: match_parent, wrap_content, or a fixed dp value
id: used to reference the view in Kotlin
margin: space outside the view
padding: space inside the view

Use dp for sizes (density-independent pixels) and sp for text sizes.

ScrollView

When content is taller than the screen, wrap it in a ScrollView:

Can contain only one direct child (usually a LinearLayout)
Vertical scrolling by default
Use HorizontalScrollView for horizontal scrolling

For long dynamic lists, use RecyclerView instead — it's more efficient.

Finding Views in Code

Two ways to access views in your Kotlin code:

findViewById(R.id.tvTitle) — classic way, returns the view by ID
ViewBinding — modern approach: generates a binding class from the XML, giving type-safe access to all views

ViewBinding is strongly preferred — you'll learn it in the next lesson.

Using findViewById

Access and modify views from onCreate:

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val tvTitle = findViewById<TextView>(R.id.tvTitle)
        tvTitle.text = "Welcome!"
        tvTitle.textSize = 20f
    }
}

Quick Check

Which unit should you use for text size in Android layouts?

Recap: Layouts & Views

You can now design Android screens:

UIs are defined in XML layout files in res/layout/
Common views: TextView, EditText, Button, ImageView
ConstraintLayout — flexible, flat, recommended
LinearLayout — simple row/column arrangement
Use dp for sizes, sp for text
Access views in Kotlin with findViewById

Next: make your UI interactive by handling user input.

Frequently asked questions

Is the “Layouts & Views” lesson free?

Yes — the full text of “Layouts & Views” is free to read here on the web, and the Android Academy course includes 7 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Android Academy course, upgrade to CoddyKit PRO.

What will I learn in “Layouts & Views”?

Design UIs with XML layouts. Use ConstraintLayout, LinearLayout, and common views like TextView, Button, ImageView, and EditText. You practise Android Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Android Academy?

No prior experience is required. Android Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 7, so you can start here or from the beginning and move at your own pace.

How long does the “Layouts & Views” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Android Academy lesson?

Yes. Every Android Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Android Academy