Accessibility and adaptive layouts

Why accessibility matters

Millions of people in India live with a visual, hearing or motor disability, and many more are elderly users with weaker eyesight. Android has built-in tools for them: TalkBack reads the screen aloud, font scaling enlarges text, and Switch Access lets people use the phone with buttons. If your app ignores these, those users simply cannot use it. Accessibility also helps everyone: big tap targets and clear contrast are easier for anyone using a phone in bright sunlight or on a moving bus.

Checklist for every screen

Semantics

Compose builds a semantics tree alongside the UI: a description of what each element means, which TalkBack and UI tests read. Most components fill it in automatically. You can merge a group into one announcement or add meaning to custom elements with Modifier.semantics.

Row(
    Modifier
        .clickable(onClick = onOpen)
        .semantics(mergeDescendants = true) { }       // read the row as one item
        .padding(16.dp)
) {
    Icon(Icons.Default.Star, contentDescription = null)   // decorative
    Text("4.5 rating")
    Text("Annapurna Mess, 1.2 km")
}

Testing it yourself

1. Turn on TalkBack in Settings > Accessibility and try to complete your main task with your eyes closed.
2. Set font size and display size to the largest values and check nothing is cut off.
3. Use Accessibility Scanner (a free Google app) to find small targets and low contrast.
4. Check the Play Console pre-launch report, which flags common accessibility issues.

Adaptive layouts

Android runs on phones, foldables, tablets and Chromebooks. Stretching a phone layout across a tablet wastes space. Window size classes group window widths into Compact (most phones in portrait), Medium (small tablets, unfolded foldables) and Expanded (large tablets, desktop). Your layout chooses a structure per class.

@Composable
fun MailApp(windowSizeClass: WindowSizeClass) {
    when (windowSizeClass.windowWidthSizeClass) {
        WindowWidthSizeClass.COMPACT -> SingleColumnInbox()            // list, then details on a new screen
        else -> Row { InboxList(Modifier.weight(1f)); MessagePane(Modifier.weight(2f)) }   // list + details side by side
    }
}

Material 3 also offers adaptive components such as NavigationSuiteScaffold, which shows a bottom bar on phones and a navigation rail on wider screens automatically.

Common mistakes

• Tiny custom icons as buttons (24 dp) with no padding: hard to tap.
• Text in fixed-height boxes that gets cut off at large font sizes.
• Status shown only by colour (green/red dot).
• Designing only for one phone size and never testing in landscape or on a tablet emulator.