https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

06/17/2022, 9:12 PM
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?
e

ephemient

06/17/2022, 9:29 PM
they want you to build an iOS app?
1
😂 7
😢 3
f

Francesc

06/17/2022, 9:35 PM
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
👌 1
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
j

Javier

06/17/2022, 10:23 PM
TextButton and the slot api in the toolbar or a custom one would be enough
c

Colton Idle

06/18/2022, 12:12 AM
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.
c

Chris Sinco [G]

06/18/2022, 3:19 AM
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. 😔
c

Colton Idle

06/20/2022, 3:12 PM
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.
f

Francesc

06/20/2022, 3:19 PM
If you want to use the
actions
version of the
TopAppBar
, you can add 2 buttons in there
Copy code
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"
                    )
                }
            }
        )
    }
c

Chris Sinco [G]

06/20/2022, 5:01 PM
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