A modern programming language that makes developers happier.

kotlinlang

2022-06-17 at 17.09.10.png

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?

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

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

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

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.

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. 

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. :pensive:

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.

bar.png

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"
                    )
                }
            }
        )
    }```


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