Android development / Basic: Android and Compose foundations / Lesson 5

Layouts, resources, and inclusive controls

Arrange a reading list that respects constraints, translation, text scaling, and the meaning exposed to assistive technology.

About 4 min readContent reviewed 2026-10-23

On this page

Lesson goals

Explain parent constraints and modifier order.
Use resources and standard components to support diverse users.

Work with available space

Compose layout proceeds through measurement and placement under constraints supplied by parents. A child cannot assume the whole physical screen belongs to it: windows can resize, system bars occupy space, and the keyboard can reduce the usable area. Column stacks vertically, Row arranges horizontally, and Box overlays children. Start with these basic relationships before adding fixed sizes. Prefer content that can wrap or scroll to a layout that only fits one screenshot, and test long titles rather than relying on a short English sample.

Read modifiers as an ordered chain

Modifiers wrap behavior and layout in order, so padding before a click target does not have the same interaction boundary as padding after it. Accept a modifier parameter on reusable components and apply it at the outer node. This lets a parent position the component without reaching into its internals. Use dp for layout dimensions and scalable text units through theme typography. Avoid shrinking text simply to hide overflow: first inspect wrapping, minimum sizes, and constraints. A layout defect often originates in the parent rather than in the clipped child.

kotlin Let the parent position a content-sized summary

@Composable
fun ReadingSummary(title: String, subtitle: String, modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(16.dp)) {
        Text(title, style = MaterialTheme.typography.titleMedium)
        Spacer(Modifier.height(4.dp))
        Text(subtitle, style = MaterialTheme.typography.bodyMedium)
    }
}

Import Compose layout, Modifier, dp, and Material components in the existing app. The column has no fixed height, so text can wrap under font scaling. The external modifier is applied once at the component boundary.

Render large lists with stable identity

LazyColumn composes list content as needed instead of eagerly building every row. Supply stable unique keys so state follows the intended item when rows move. Keys are identities, not current positions, and duplicate ids violate that contract. Hoist important state outside individual rows; a lazy item can leave the composition as it scrolls away. Make empty, loading, and failed states explicit around the list. If content is paged, treat loading the next page separately from replacing the entire screen with a spinner.

Make language a resource decision

Store user-facing strings in resources and reference them from the UI. Use formatted placeholders instead of assembling sentences through concatenation, because word order differs across languages. Plural resources encode language-specific quantity rules. Use start and end for directional spacing where appropriate so right-to-left layouts can mirror correctly. Translate content descriptions as well as visible labels, and keep identifiers unchanged. A resource preview is useful, but inspect the complete Arabic screen with long text and real input because directionality involves layout, punctuation, and mixed-script values together.

xml Default resources under res/values

<resources>
    <string name="reading_title">Reading title</string>
    <string name="open_item">Open %1$s</string>
    <plurals name="item_count">
        <item quantity="one">%d item</item>
        <item quantity="other">%d items</item>
    </plurals>
</resources>

Create localized counterparts under res/values-ar using the same resource names and correct Arabic plural categories. Resolve quantities with the quantity API and supply the formatting count. This default English file alone does not implement Arabic localization.

Preserve meaning beyond appearance

Material controls provide useful semantics, focus behavior, and interaction defaults. A decorative icon should not repeat the adjacent label to a screen reader; an icon-only action needs a meaningful localized description. Communicate validation with text and semantics rather than color alone. Ensure controls remain usable with enlarged text, switch access, keyboard navigation, and a screen reader. Visual inspection cannot reveal every semantic error, so inspect the semantics tree and traverse the screen in its intended reading order before considering a layout complete.

Common errors and fixes

Text is clipped after increasing font size

Why it happens: A fixed row height assumes one text line.
How to fix it: Allow content-driven height and wrapping, then verify parent constraints.
Prevent it next time: Review large-font and long-translation previews early.

Row state moves to another item

Why it happens: A lazy list uses unstable or duplicate keys.
How to fix it: Use unique persistent item ids and hoist essential state.
Prevent it next time: Test insertions, deletions, and reordering.

A screen reader announces the same label twice

Why it happens: A decorative icon duplicates adjacent text semantics.
How to fix it: Remove the decorative description and preserve the meaningful control label.
Prevent it next time: Traverse complete controls with assistive technology.

Check your understanding

1. A title and action button share a Row. A long translated title pushes the button off screen. Propose a layout adjustment.

Show worked solution

Give the title a bounded share of remaining width with weight, allow wrapping, and retain space for the action. On narrower windows, place the action below if that better preserves usability. Verify focus and reading order after the rearrangement, since visual success alone does not prove the control remains accessible.

2. A list contains only a small star icon for marking favorites. Specify its nonvisual contract.