What composable could I use to generate a screen w...

# compose-wear

[Daniel Quantil]

What composable could I use to generate a screen with multiple buttons and text element? Is it scaffold? Maybe someone knows where to find a code example for something similar?

[yschimke]

My guess is Box with some custom layout. Either constraint layout or just manually positioning things.

[yschimke]

https://developer.android.com/jetpack/compose/layouts/constraintlayout

[yschimke]

If you are OK with mobile being completely above the buttons row you could use column, with the button in a row and positioning them vertically in the row.

[Daniel Quantil]

Thanks, I will give it a try. Was jsut working with ScalingLazyColumn so far

[John Nichol]

I dislike constraint layout personally and prefer to keep to simpler layout components where I can 🙂. Could you do your buttons as a row with 3 columns the first and third with Top content alignment and the middle with bottom?

[yschimke]

This is not right, but I think this is what we were suggesting with rows and layouts. Might be useful as a starting point.

[yschimke]

@WearPreviewDevices
@Composable
fun PhoneLayout() {
    Scaffold(
        modifier = Modifier.fillMaxSize(),
        timeText = { TimeText() }
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize(),
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(0.6f),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Bottom
            ) {
                Text(
                    text = "Call from",
                    style = MaterialTheme.typography.body2
                )
                Text(
                    text = "Sam Hitori",
                    style = MaterialTheme.typography.display2
                )
                Text(
                    text = "Mobile",
                    style = MaterialTheme.typography.body1
                )
            }
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(0.4f),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                Column(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxHeight(),
                    verticalArrangement = <http://Arrangement.Top|Arrangement.Top>,
                    horizontalAlignment = Alignment.End
                ) {
                    Button(onClick = { }, colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red)) {
                        Icon(imageVector = Icons.Filled.PhoneMissed, contentDescription = "Hang UP")
                    }
                }
                Column(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxHeight(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Button(onClick = { }, colors = ButtonDefaults.buttonColors(backgroundColor = Color.Green)) {
                        Icon(imageVector = Icons.Filled.Phone, contentDescription = "Answer")
                    }
                }
                Column(
                    modifier = Modifier
                        .weight(1f)
                        .fillMaxHeight(),
                    verticalArrangement = <http://Arrangement.Top|Arrangement.Top>,
                    horizontalAlignment = Alignment.Start
                ) {
                    Button(onClick = { }, colors = ButtonDefaults.buttonColors(backgroundColor = Color.DarkGray)) {
                        Icon(imageVector = Icons.Filled.More, contentDescription = "More")
                    }
                }
            }
        }
    }
}

[yschimke]

With previews

[yschimke]

On thing to be careful of is font sizes. You may want to make fonts non scaling, which is typical when they are large almost fill the screen items.

[yschimke]

Difference between smallest and biggest

[yschimke]

message has been deleted

[yschimke]

message has been deleted

[Daniel Quantil]

Many thanks Yuri! This was exactly what I was looking for.

[yschimke]

To be clear, there is a lot of work needed. But it's a starting point to give you some ideas. You may also want to change from weight(0.4f) to fillMaxHeight(0.4f). @John Nichol might be embarrassed at my compose layout skills and suggest a much more responsive approach.