Pocket Notes 4 — the editor screen

The button that has been lying to you

The + button in the corner of Pocket Notes has been fake since chapter 2. Tap it and you get a note called "Test note" with a body that says "Saved straight to SQLite." Useful for proving the database works. Completely useless for writing anything down.

This chapter makes it real, and doing that needs three things the app has never had: a second screen, a road between the two screens, and a decision about when a note gets saved.

The first two are mechanical. The third is a design choice, and it is the most interesting thing in this lesson.

One dependency

Two screens need a way to get between them.

1    implementation(libs.androidx.activity.compose)
2    implementation(libs.androidx.navigation.compose)

navigation-compose is small — a controller, a back stack, and a way to describe screens by name. It is not a framework; it is a lookup table with history.

A route is a piece of text

That is the whole idea, and it is worth stopping on for a second because people expect it to be harder.

A route is a String. "list" means the list screen. "editor/7" means the editor showing note 7. "editor/0" means the editor showing a note that does not exist yet — a new one — because chapter 1 decided that id = 0 is what an unsaved Note looks like.

Going to a screen is nav.navigate("editor/7"). Coming back is nav.popBackStack(). There is nothing else.

The ViewModel grows up

addTestNote() is deleted. Two real functions replace it.

The list reports upward

NoteListScreen changes by four lines. Its signature grows two lambdas:

1@OptIn(ExperimentalMaterial3Api::class)
2@Composable
3fun NoteListScreen(
4    vm: NotesViewModel,
5    onOpenNote: (Long) -> Unit,
6    onNewNote: () -> Unit
7) {
8    val state by vm.uiState.collectAsState()

The FAB stops calling the ViewModel and starts calling upward:

1            FloatingActionButton(
2                onClick = onNewNote,

and the real lambda finally reaches the cards:

1                NoteList(
2                    state = state,
3                    onOpenNote = onOpenNote
4                )

NoteCard has been calling onClick(note.id) since chapter 3 and that call has been going nowhere. Now it arrives. This is state hoisting applied to events rather than values: the screen that knows a tap happened is not the screen that knows what a tap should do.

The editor

One new file, and the most interesting composable in Pocket Notes.

What it remembers

The two ways out

Here is the heart of the chapter.

Why no Save button? Because a Save button does not remove the question, it moves it. Every app with one also needs an answer to "you have unsaved changes" — which means a dialog, which means interrupting somebody who was trying to leave, to ask them a question they should never have had to think about.

Saving on the way out deletes the whole category of problem. The cost is that you must catch every way out, and the guard against empty notes has to be right. Both are five lines. The dialog is not.

Fields that look like paper

1    // Borderless fields: the note is the page, not a
2    // form. Only the cursor keeps the accent colour.
3    val fieldColors = TextFieldDefaults.colors(
4        focusedContainerColor = Color.Transparent,
5        unfocusedContainerColor = Color.Transparent,
6        focusedIndicatorColor = Color.Transparent,
7        unfocusedIndicatorColor = Color.Transparent,
8        cursorColor = colors.primary
9    )

A Material TextField normally has a filled grey box behind it and an underline that thickens when focused. Both are excellent on a sign-up form, where you want to say there are three separate things to fill in here. Both are wrong on a note, where there is only one thing — the writing — and every box you draw round it makes it look more like paperwork.

Four colours go transparent. The cursor keeps the app's honey #8A5100, because a cursor you cannot find is a genuine problem rather than a stylistic one.

The app bar above them is deliberately plain:

1            TopAppBar(
2                title = {
3                    Text(
4                        text = if (isNew) "New note"
5                        else "Edit note",
6                        style = type.titleMedium
7                    )
8                },
9                navigationIcon = {
10                    IconButton(onClick = { finish() }) {
11                        Icon(
12                            imageVector =
13                                Icons.Default.Close,
14                            contentDescription =
15                                "Save and close"
16                        )
17                    }
18                },

The contentDescription is "Save and close", not "Close". A ✕ usually means discard, and TalkBack users get no other clue about which one this is. Naming the actual behaviour costs one word and removes an entirely reasonable fear.