How do I align 2 composable functions to look like the first image?

Question

I've tried to create something close to the image using the following code:

fun MainBox(name: String, title: String){
    val image = painterResource(R.drawable.android_logo)
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Image(painter = image, contentDescription = null, modifier = Modifier.size(100.dp)  )
        Text(text = name, fontSize = 26.sp ,modifier = Modifier
            .fillMaxWidth()
            .wrapContentWidth(Alignment.CenterHorizontally))
        Text(text = title, color = Color(0xFF3ddc84), modifier = Modifier
            .fillMaxWidth()
            .wrapContentWidth(Alignment.CenterHorizontally))
    }
}
@Composable
fun Info(phone: String, at: String, email: String){
    Column(modifier = Modifier.fillMaxHeight().wrapContentHeight(Alignment.Bottom).padding(bottom = 20.dp)) {
        Row(modifier = Modifier.padding(10.dp)){
            Icon(Icons.Rounded.Phone, contentDescription = phone, modifier = Modifier.padding(start = 20.dp, end = 20.dp))
            Text(text = phone)
        }
        Row(modifier = Modifier.padding(10.dp)){Icon(Icons.Rounded.Share, contentDescription = at,  modifier = Modifier.padding(start = 20.dp, end = 20.dp))
            Text(text = at)}
        Row(modifier = Modifier.padding(10.dp)){ Icon(Icons.Rounded.Email, contentDescription = email,  modifier = Modifier.padding(start = 20.dp, end = 20.dp))
            Text(text = email)}
    }
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BusinessCardTheme {
        Column() {
            MainBox(name = "And Roid", title = "Developer man")
            Info(phone = "+1 234-567-8910", at = "@handle", email = "email@dev.com" )
        }
            }
}

I was able to get the contents of MainBox to the center using modifier = Modifier.fillMaxSize() in Column of MainBox but then Info dissapears. How do I center MainBox without shifting Info?

Answer 1

How about using Box ?

@Composable
fun MainBox(name: String, title: String) {
    val image = painterResource(R.drawable.ic_launcher_background)
    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        Column(modifier = Modifier.align(Alignment.Center), horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painter = image, contentDescription = null, modifier = Modifier.size(100.dp))
            Text(
                text = name, fontSize = 26.sp, modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentWidth(Alignment.CenterHorizontally)
            )
            Text(
                text = title, color = Color(0xFF3ddc84), modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentWidth(Alignment.CenterHorizontally)
            )
        }
        Info(
            modifier = Modifier.padding(bottom = 10.dp).align(Alignment.BottomStart),
            phone = "+1 234-567-8910", at = "@gastonsaillen", email = "gaston@gmail.com"
        )
    }
}

@Composable
fun Info(modifier: Modifier, phone: String, at: String, email: String) {
    Column(
        modifier = modifier
    ) {
        Row(modifier = Modifier.padding(10.dp)) {
            Icon(
                Icons.Rounded.Phone,
                contentDescription = phone,
                modifier = Modifier.padding(start = 20.dp, end = 20.dp)
            )
            Text(text = phone)
        }
        Row(modifier = Modifier.padding(10.dp)) {
            Icon(
                Icons.Rounded.Share,
                contentDescription = at,
                modifier = Modifier.padding(start = 20.dp, end = 20.dp)
            )
            Text(text = at)
        }
        Row(modifier = Modifier.padding(10.dp)) {
            Icon(
                Icons.Rounded.Email,
                contentDescription = email,
                modifier = Modifier.padding(start = 20.dp, end = 20.dp)
            )
            Text(text = email)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    Column() {
        MainBox(name = "And Roid", title = "Developer man")
        Info(
            modifier = Modifier.fillMaxSize(),
            phone = "+1 234-567-8910",
            at = "@handle",
            email = "email@dev.com"
        )
    }
}

Output