Android Academy · Lesson

Text and Column Basics

Show and stack content.

Text and Column Basics is a free Android Academy lesson on CoddyKit — lesson 2 of 4. 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 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Text Composable

The most basic thing you can show in Compose is text. The Text composable draws a string on the screen.

You pass the string you want to display as the first argument. That's all it takes to put words on screen.

@Composable
fun Hello() {
    Text("Hello, Android!")
}

Styling Text

Text accepts parameters to change its look. You can set fontSize, color, and fontWeight.

Sizes use the sp unit, which scales with the user's font settings. This keeps your app readable for everyone.

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

Why You Need a Layout

If you call Text twice in a row, both pieces of text land in the same spot, stacked on top of each other. Composables don't arrange themselves automatically.

To place items in order, you need a layout composable that organizes its children. The most common one for vertical stacking is Column.

The Column Composable

Column arranges its children vertically, one below the other. You put the child composables inside its trailing lambda block.

Each composable you write inside the braces becomes a row in that vertical stack, in the order you write them.

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

Order Matters in a Column

Inside a Column, children appear top to bottom in the exact order you list them. Move a line up in the code, and it moves up on screen.

This makes layouts predictable: read the code top to bottom and you know what the screen looks like top to bottom.

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

Vertical Arrangement

Column can control the spacing between its children using verticalArrangement. For example, Arrangement.spacedBy adds even gaps.

This is cleaner than adding spacing to each child by hand, and it keeps your layout consistent.

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("One")
    Text("Two")
}

Horizontal Alignment

By default a Column aligns its children to the start (left). Use horizontalAlignment to center or end-align them.

Set it to Alignment.CenterHorizontally and every child centers within the column's width.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

Meet the Row

Column stacks vertically; its sibling Row arranges children side by side, horizontally. They share the same idea but in different directions.

You'll mix Rows and Columns to build grids and cards. For now, remember: Column is down, Row is across.

Row {
    Text("Left")
    Text("Right")
}

Nesting Layouts

Layouts can hold other layouts. You can place a Row inside a Column to build richer designs.

Here a column shows a title, then a row with two pieces of text underneath. Nesting is how complex screens are built from simple parts.

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

Adding Space Between Items

To add a fixed gap between two composables, you can insert a Spacer. It's an empty composable that just takes up space.

Give it a height through a modifier, and it pushes the next item down. We'll explore modifiers more in the next lesson.

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

Putting It Together

With Text and Column you can already build a simple labeled screen. Stack a heading and a couple of detail lines.

This small pattern is the foundation of nearly every Compose screen you'll write.

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

Quick Check

Let's test your understanding of layout direction.

Recap

You learned to display strings with Text and style them using fontSize and fontWeight. A Column stacks children vertically in code order, while a Row arranges them horizontally.

You can control spacing with verticalArrangement or a Spacer, and align children with horizontalAlignment. Nesting Rows and Columns builds richer layouts. Next, you'll preview these screens without running the app.

Frequently asked questions

Is the “Text and Column Basics” lesson free?

Yes — the full text of “Text and Column Basics” is free to read here on the web, and the Android Academy course includes 4 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 “Text and Column Basics”?

Show and stack content. 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 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Text and Column Basics” 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