Jetpack Compose Center

May 6, 2022

Center in Column

@Composable
fun Center(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    Column(modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally) {

        content()
    }
}

Usage

Center {
    Text("Hello")
}

Center in Box

Box(
    modifier = Modifier.fillMaxSize().background(Color.Black.copy(alpha = 0.75f)),
) {
    Text(
        modifier = Modifier.align(Alignment.Center),
        text = "+100",
        color = Color.White,
        fontSize = 30.sp,
    )
}

NOTE: Fill Container Height/Width

NOTE: Center Text Vertically

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.