Home > Mobile >  Align Text below Image center correctly
Align Text below Image center correctly

Time:09-04

   Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter){
        Image(
            painter = painterResource(R.drawable.background),
            contentDescription = null,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )

        Box(modifier = Modifier
            .fillMaxSize()
            .padding(top = 120.dp),
            contentAlignment = Alignment.TopCenter,
            content = {
                Image(
                    painter = painterResource(R.drawable.logo),
                    contentDescription = null,
                    contentScale = ContentScale.FillBounds
                )
                Text("Medicine")
            }
        )
    }

The Text() component, appears above the logo, how to bring it down below? Aligning it center below with some padding.

EDIT: I tried this,

Text(modifier = Modifier.align(Alignment.Center).padding(0.dp),text = "Medicine")

But, the text appear way down.

CodePudding user response:

I would try to change the inner Box to Column. There are examples of alignment in column

  • Related