I got a design that's similar to this where my design team wants text for the "Cancel" and "Done" bu...

# compose

[Colton Idle]

I got a design that's similar to this where my design team wants text for the "Cancel" and "Done" buttons. Is there anything special or out of the box to do this? I know I can just make a row with text + clickable modifier, but is there anything else I should take into account so that I get the nice touch target of typical TopAppBar action items?

[ephemient]

they want you to build an iOS app?

[Francesc]

that's exactly what I thought when I saw the screenshot. Unfortunately this is the kind of thing we have to deal on a daily basis as Android devs

[Francesc]

if you have a Scaffold then topBar is just a Composable lambda so you can pass whatever you want in there, but given that this is not following material guidelines you won't find an out-of-the-box solution in the compose libraries

[Javier]

TextButton and the slot api in the toolbar or a custom one would be enough

[Colton Idle]

I guess I'll just use icons instead and just call it a day. Material guidelines don't really show examples with text... so I'm just gonna say that.

[Chris Sinco [G]]

Yes this design is very specific to the iOS Navigation Controller. The Material pattern would be to use the TopAppBar with Back/Close icon on the left, title text next to it (left aligned), and confirm/done actions on the right as either icons or text.

[Chris Sinco [G]]

So you get the same interaction design, just different visuals but at feels more native to the platform. Unfortunate you have to push back explicitly to the designers. 😔

[Colton Idle]

How would I use put both confirm/done actions on the right as text? I've only ever used the actions {} block which takes a composeable, but I want to make sure I have the right touch target sizes.

[Francesc]

If you want to use the actions version of the TopAppBar, you can add 2 buttons in there

topBar = {
        TopAppBar(
            modifier = Modifier.fillMaxWidth(),
            title = {
                Text(
                    text = "My app title"
                )
            },
            actions = {
                Button(
                    onClick = {},
                    modifier = Modifier.padding(horizontal = 8.dp)
                ) {
                    Text(
                        text = "Cancel"
                    )
                }
                Button(
                    onClick = {},
                    modifier = Modifier.padding(horizontal = 8.dp)
                ) {
                    Text(
                        text = "Done"
                    )
                }
            }
        )
    }

[Chris Sinco [G]]

If you use clickable it may enforce a min touch target height of 44 DP. Can't verify right now but I'd try that