How can I make this layout in Android compose with...

# compose

[Chethan]

How can I make this layout in Android compose without using constrain layout , I couldn’t done this just by simple Row , Column combination and possible option of layout alignment.

I have done this using constrain layout and it goes as follows

@Preview
@Composable
fun ConfirmationScreen() {

    ConstraintLayout(
        modifier = Modifier.fillMaxHeight().fillMaxWidth().background(Color.White)
    ) {

        val (topBar, confirmationText, continueButton) = createRefs()

       TopAppBarFlat(
            topBarTitle = "Screen Title",
            topBarColor = Color.White,
            topBarLeftIcon = R.drawable.ic_back,
            navigation = {

            },
            modifier = Modifier.constrainAs(topBar) {
                top.linkTo(<http://parent.top|parent.top>)
            }
        )

        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxWidth().wrapContentHeight().constrainAs(confirmationText) {
                bottom.linkTo(<http://continueButton.top|continueButton.top>)
                centerVerticallyTo(parent)
            }
        ) {

            Image(
                asset = imageResource(id = R.drawable.test),
                modifier = Modifier.fillMaxWidth(0.5F)
            )

            Text(
                text = "Screen Title.",
                style = TextStyle(
                    color = Color.Black,
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Center
                ),
                fontSize = 14.sp,
                color = Color.Black,
                modifier = Modifier.padding(10.dp)
            )

            Text(
                text = "Description....",
                style = TextStyle(
                    color = Color.Black,
                    fontSize = 14.sp,
                    fontWeight = FontWeight.Normal,
                    textAlign = TextAlign.Center
                ),
                fontSize = 14.sp,
                color = Color.Black,
                modifier = Modifier.padding(start = 50.dp, end = 50.dp)
            )
        }

        Button(
            onClick = {

            },
            modifier = Modifier.fillMaxWidth().padding(10.dp).preferredHeight(40.dp)
                .constrainAs(continueButton) {
                    bottom.linkTo(parent.bottom)
                },
            backgroundColor = Color.Black
        ) {
            Text(
                text = "OK",
                style = TextStyle(
                    color = Color.White,
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold,
                    textAlign = TextAlign.Center
                )
            )
        }
    }
}


@Composable
fun TopAppBarFlat(
    topBarTitle: String,
    topBarColor: Color = Color.Black,
    topBarLeftIcon: Int = R.drawable.ic_back,
    navigation: () -> Unit,
    modifier: Modifier = Modifier.fillMaxWidth()
) {
    TopAppBar(
        elevation = 0.dp,
        title = { Text(text = topBarTitle) },
        navigationIcon = {
            IconButton(onClick = { navigation() }) {
                Icon(vectorResource(topBarLeftIcon))
            }
        },
        backgroundColor = topBarColor,
        modifier = modifier
    )
}

[bharat to]

Surface(Modifier.fillMaxSize()) {
    Column(Modifier.padding(10.dp), horizontalAlignment = Alignment.CenterHorizontally) {
        Column(Modifier.weight(1f), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
            Box(modifier = Modifier.size(width = 150.dp, height = 150.dp).background(Color.Black))
            Text(text = "Screen Title")
            Text(text = "Description")
        }

        Button(onClick = {}, backgroundColor = Color.Black, modifier = Modifier.fillMaxWidth()) {
            Text("OK", color = Color.White)
        }
    }
}

[bharat to]

you can use the alignment and arrangement properties of Column

[Chethan]

@bharat to I also have to keep Topbar

[bharat to]

You can use Scaffold layout https://developer.android.com/codelabs/jetpack-compose-layouts?hl=en#4

[Chethan]

But in General, keeping something in TOP , Bottom and At Center takes constrain layout , no other works well for you. try making layout which has something at the top , bottom and center , you can’t do just by using column and row

[bharat to]

A single Column is enough to put something at top, bottom and center with center as weight 1f. Can you show how we can't use Column and Row for this?

[Chethan]

Let me share the code with you, you can correct me with possible options

[bharat to]

Sure