You can see how the Box Layout is done!
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Compose_BasicsTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
MainScreen()
}
}
}
}
}
@Composable
fun MainScreen(){
Box(contentAlignment = Alignment.CenterEnd,
modifier = Modifier.size(400.dp,400.dp)){
val height = 200.dp
val width = 200.dp
TextCell(text = "1",
Modifier
.size(width = width, height = height)
.align(Alignment.TopStart))
TextCell(text = "2",
Modifier
.size(width = width, height = height)
.align(Alignment.BottomStart))
TextCell(text = "3",
Modifier
.size(width = width, height = height)
.align(Alignment.CenterEnd))
}
}
@Composable
fun TextCell(text:String,modifier: Modifier = Modifier,fontSize:Int = 150){
val cellModifier = Modifier
.padding(4.dp)
.border(width = 5.dp, color = Color.Green)
Text(text = text,cellModifier.then(modifier),
fontSize = fontSize.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
Surface {
Text(text = text,cellModifier.then(modifier),
fontSize = fontSize.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
}
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
Compose_BasicsTheme {
MainScreen()
}
}