Cannot align Text within Column Jetpack

Question

I am practicing JetPack compose, but my text won't align in the center for some reason within the 2 surfaces. Any tips why?

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SimpleLayoutsTheme {
                // A surface container using the 'background' color from the theme
                MainScreen("Hello World!")
            }
        }
    }
}

@Composable
fun MainScreen(message: String) {
    Surface {
        Column {
            Surface(modifier = Modifier
                .width(500.dp)
                .height(250.dp)) {
                Text(text = message, Modifier.align(Alignment.CenterHorizontally))
            }
            Surface(modifier = Modifier
                .width(500.dp)
                .height(250.dp)) {
                Text(text = message, Modifier.align(Alignment.CenterHorizontally))
            }
        }
    }
}

I tried adding .FillMaxWidth() as a modifier to text, but it didn't help.

user_13252981 · Answer

You can not align directly on a surface. You have to wrap your content with Column, Row, Box, etc.

You can change your code like the following

@Composable
fun MainScreen(message: String) {

    Surface {
        Column {
            Surface(
                modifier = Modifier
                    .width(500.dp)
                    .height(250.dp),
                color = Color.Green
            ) {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = message)
                }
            }
            Surface(
                modifier = Modifier
                    .width(500.dp)
                    .height(250.dp),
                color = Color.Blue
            ) {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = message
                    )
                }
            }
        }
    }
}

Cannot align Text within Column Jetpack

1 Answers