Images, icons and shapes

Pocket Notes contains one picture file

Open the finished Pocket Notes project and look in res/drawable. There is a single file in there, and it is the launcher icon.

Yet the app has a plus symbol on its button, a pencil on its empty screen, a magnifying glass that appears when a search finds nothing, and rounded cards throughout. None of those is a picture. They are all drawn, at the moment they are needed, at exactly the size they are needed.

That is not a clever trick — it is the normal way to build an Android app, and it is most of the reason a well-built app is a few megabytes rather than forty.

Icon — the stamp

1Icon(
2    imageVector = Icons.Default.Add,
3    contentDescription = "New note"
4)

That is the plus on Pocket Notes' button. Three things about it are worth knowing:

• It is an ImageVector — a shape described as lines and curves, so it is sharp at any size and weighs almost nothing.
• It has no colour of its own. Icon paints the whole thing in one tint, and unless you say otherwise that tint is the current content colour — which, inside a Surface or a Button, is already the correct on colour from Lesson 3.11. Put an icon on a primary button and it comes out onPrimary with no code.
• It defaults to 24dp square, which is the Material standard. Change it with Modifier.size(44.dp).

The icons themselves come from Material Icons, in five styles:

Pick one style for a whole app. Mixed styles look like two people built it.

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

contentDescription is not optional

The second parameter of every Icon and every Image is the one that decides whether somebody using TalkBack can use your app at all.

The rule is one question: if the picture vanished, would information be lost?

1// Yes — the button has no other label.
2Icon(
3    imageVector = Icons.Default.Add,
4    contentDescription = "New note"
5)
6
7// No — the word "Roll" is right next to it.
8Icon(
9    imageVector = Icons.Default.Refresh,
10    contentDescription = null
11)

null is a real answer, not a cop-out. It tells Android this is decoration, skip it, which is better than announcing "image" for the fiftieth time. What is never acceptable is describing the picture instead of its purpose: "plus icon" tells a blind user nothing. "New note" tells them everything.

Never include the word "button" or "icon" — the screen reader already says that part.

Image — the photograph

For an actual picture, from res/drawable:

1Image(
2    painter = painterResource(R.drawable.dice_hero),
3    contentDescription = null,
4    contentScale = ContentScale.Crop,
5    modifier = Modifier
6        .fillMaxWidth()
7        .height(180.dp)
8        .clip(RoundedCornerShape(16.dp))
9)

painterResource turns a drawable — a PNG, a JPEG or a vector drawable — into a Painter, which is the thing Image knows how to draw. R.drawable.dice_hero is the same generated R class from Lesson 2.4, so a misspelled name is a compile error rather than a blank space.

contentScale is the parameter people forget, and it is the one that decides whether your photo looks professional or stretched:

FillBounds is the default-looking answer and is almost never right, because it ignores the picture's aspect ratio. If a photo of a person looks slightly wrong and you cannot say why, this is it.

Shapes

A shape in Compose is just a rule for cutting a corner. Three cover nearly everything:

1CircleShape
2RoundedCornerShape(16.dp)
3CutCornerShape(12.dp)

CircleShape is a full pill — on a square it is a circle, on a wide box it is a lozenge. RoundedCornerShape takes one radius for all four corners, or one each: RoundedCornerShape(topStart = 20.dp, bottomEnd = 20.dp). CutCornerShape slices the corner off flat instead of curving it.

Shapes turn up in four places, and they mean the same thing in all of them:

• Modifier.clip(shape) — trim whatever is drawn after it in the chain (Lesson 3.3).
• Modifier.border(2.dp, color, shape) — draw an outline on that curve.
• Surface(shape = ...) and Card(shape = ...) — the Material way.
• MaterialTheme.shapes.medium — the shape scale from your theme, so cards across an app agree.

Surface — colour, shape and content colour together

Surface is the Material container. Hand it a colour and a shape and it does three things: paints the background, clips its contents to the shape, and sets the content colour for everything inside so icons and text come out in the right on colour automatically.

Here is Pocket Notes' empty screen, which is nothing but a Surface, an Icon and two Texts.

1@Composable
2private fun EmptyMessage(
3    icon: ImageVector,
4    title: String,
5    body: String
6) {
7    val type = MaterialTheme.typography
8    val colors = MaterialTheme.colorScheme
9
10    Column(
11        modifier = Modifier
12            .fillMaxSize()
13            .padding(horizontal = 40.dp),
14        horizontalAlignment =
15            Alignment.CenterHorizontally,
16        verticalArrangement = Arrangement.Center
17    ) {
18        Surface(
19            shape = CircleShape,
20            color = colors.primaryContainer,
21            modifier = Modifier.size(96.dp)
22        ) {
23            Box(
24                contentAlignment = Alignment.Center
25            ) {
26                Icon(
27                    imageVector = icon,
28                    contentDescription = null,
29                    tint = colors.onPrimaryContainer,
30                    modifier = Modifier.size(44.dp)
31                )
32            }
33        }
34
35        Spacer(Modifier.height(24.dp))
36        Text(
37            text = title,
38            style = type.headlineSmall,
39            color = colors.onSurface
40        )
41        Spacer(Modifier.height(8.dp))
42        Text(
43            text = body,
44            style = type.bodyMedium,
45            color = colors.onSurfaceVariant,
46            textAlign = TextAlign.Center
47        )
48    }
49}

The pen: drawing it yourself

Sometimes the picture you need does not exist as an icon and would be silly as a photograph — a die showing whatever number was just rolled, for instance. Six PNGs would work, and would be six files that are wrong on some screen densities.

Dice Duel draws its die instead:

1Canvas(modifier = Modifier.size(160.dp)) {
2    val side = size.minDimension
3    drawRoundRect(
4        color = Color(0xFFFDFBFF),
5        size = Size(side, side),
6        cornerRadius = CornerRadius(
7            side * 0.22f,
8            side * 0.22f
9        )
10    )
11    drawCircle(
12        color = Color(0xFF241A4D),
13        radius = side * 0.085f,
14        center = Offset(side / 2f, side / 2f)
15    )
16}

That is a die showing one — the real DieFace is the same two calls with a loop over pip positions around them. Inside a Canvas you are in a DrawScope, which hands you size (the exact space you were given, in pixels) and a set of draw... functions. Every number is written as a fraction of side rather than a fixed measurement, which is why the same code produces a sharp 88dp die in the win banner and a 172dp one on the board.

Canvas gets a proper treatment in Part 5, where Focus Flow's ring dial is built on it.

So which one?

• The shape is a symbol with one colour → Icon, from Material Icons.
• It is a photograph or a multi-coloured graphic → Image with painterResource.
• It changes with your data, or does not exist as a file → Canvas.

If you are about to add a PNG of a symbol, stop and check the icon set first. It is almost always there, it will be sharper, and it will follow your theme colours for free.