Pocket Notes 3 — the note list and the empty state

The screen you see most, and the screen you see first

Two screens matter more than any other in a notes app.

The list is the one you look at hundreds of times. It has to survive four hundred notes without getting slow, and it has to be readable at a glance, which means a preview and a timestamp that says "3 h ago" rather than 1755262800000.

The empty screen is the one you see once — on the very first launch, before you have written anything. It is the app's first impression, and in most apps it is a blank white void that makes you wonder whether something crashed.

This chapter builds both, and by the end the app finally looks like an app.

One new dependency

The empty state needs a pencil-on-paper icon, and the list needs a plus. The handful of icons bundled with Material 3 does not include the first one, so this chapter adds the full set.

1    implementation(libs.androidx.material3)
2    implementation(
3        libs.androidx.material.icons.extended
4    )

That artifact is large — a few thousand vector icons — but only the ones you actually reference end up in the APK, because R8 strips the rest out of a release build.

Milliseconds are for computers

updatedAt is a Long. Nobody wants to read a Long.

That java.time package is the reason this app sets minSdk = 26. It arrived with Android 8.0, and on anything older the build fails outright — the last entry in the Error Doctor below.

A note, drawn as a card

The screen with nothing on it

A blank screen is a screen you shipped without thinking about. An empty state is a screen you designed.

The rules are the same every time: a symbol so the eye has somewhere to land, a headline that is not an apology, and one sentence saying what to do next.

1@Composable
2fun EmptyNotes(modifier: Modifier = Modifier) {
3    EmptyMessage(
4        icon = Icons.Outlined.EditNote,
5        title = "No notes yet",
6        body = "Tap the + button to write your first " +
7            "one. Everything you type is saved on " +
8            "this phone, and only on this phone.",
9        modifier = modifier
10    )
11}

EmptyNotes is a thin wrapper around a private composable called EmptyMessage, which takes an icon, a headline and a sentence. That split looks like over-engineering for one empty state. It is not: chapter 6 adds a second one for "your search found nothing", and it will be six lines because of this decision.

The layout underneath is a centred Column with three things in it:

1        Surface(
2            shape = CircleShape,
3            color = colors.primaryContainer,
4            modifier = Modifier.size(96.dp)
5        ) {
6            Box(
7                contentAlignment = Alignment.Center
8            ) {
9                Icon(
10                    imageVector = icon,
11                    contentDescription = null,
12                    tint = colors.onPrimaryContainer,
13                    modifier = Modifier.size(44.dp)
14                )
15            }
16        }

A 96dp Surface clipped to a circle, filled with primaryContainer — the soft honey #FFDDB8 — with a 44dp icon centred inside it. contentDescription = null is correct here and not laziness: the icon says nothing the headline underneath does not already say, so announcing it twice to a screen reader is noise.

At the very bottom of that Column sits one more line:

1        // Nudges the block above dead centre, which
2        // reads better than true centre.
3        Spacer(Modifier.height(64.dp))

A 64dp spacer after everything, inside a vertically centred column, pushes the whole block up by 32dp. Mathematically centred and optically centred are not the same thing, and every designer you will ever work with knows it.

The list screen, rebuilt

That nested if is the payoff for putting loading in NotesUiState back in chapter 2. It is a single frame of wrongness that would be almost impossible to photograph and very easy to feel.

The lazy part

The app bar and the FAB stay on screen behind the empty state, because they belong to the Scaffold and the empty state is only the content slot.