This window contains nothing but a single Text element. It aligns to the top-left.
fun main() = singleWindowApplication(
title = "Basic"
) {
App()
}
@Composable
fun App() {
Text("Hello World!")
}
This window contains a Box layout container set to the full width of the window.
fun main() = singleWindowApplication(
title = "Full Width"
) {
App()
}
@Composable
fun App() {
Box(
modifier = Modifier.fillMaxWidth()
) {
Text("Hello World!")
}
}
This window contains a Box layout container set to the full height of the window.
fun main() = singleWindowApplication(
title = "Full Height"
) {
App()
}
@Composable
fun App() {
Box(
modifier = Modifier.fillMaxHeight()
) {
Text("Hello World!")
}
}
This window contains a Box layout container set to the full width and height of the window.
fun main() = singleWindowApplication(
title = "Full Size"
) {
App()
}
@Composable
fun App() {
Box(
modifier = Modifier.fillMaxSize()
) {
Text("Hello World!")
}
}
This window contains a Row of Columns. Each of the Columns has a weight modifier which determines what proportion of the overall width it will try to take up.
fun main() = singleWindowApplication(
title = "Using Weights"
) {
App()
}
@Composable
fun App() {
Row(
modifier = Modifier.fillMaxSize()
) {
Column(
modifier = Modifier.weight(2.0f).fillMaxHeight()
) {
Text("Hello World!")
}
Column(
modifier = Modifier.weight(1.0f).fillMaxHeight()
) {
Text("From")
}
Column(
modifier = Modifier.weight(1.0f).fillMaxHeight()
) {
Text("Kotlin")
}
}
}
This window contains a Column of Rows. Only the middle Row has a weight modifier which results in that Row growing to fill all of the available space, pushing the other Rows up / down.
fun main() = singleWindowApplication(
title = "Single Weight"
) {
App()
}
@Composable
fun App() {
Row(
modifier = Modifier.fillMaxSize()
) {
Column(
modifier = Modifier.fillMaxHeight()
) {
Text("Hello World!")
}
Column(
modifier = Modifier.fillMaxHeight()
) {
Text("From")
}
Column(
modifier = Modifier.weight(1.0f).fillMaxHeight()
) {
Text("Kotlin")
}
}
}
This window contains a Box layout container with padding. This adds space around its content.
fun main() = singleWindowApplication(
title = "Padding"
) {
App()
}
@Composable
fun App() {
Box(
modifier = Modifier.padding(30.dp)
) {
Text("Hello World!")
}
}
This window contains a Box layout container set to fill the window, and with the alignment centred.
fun main() = singleWindowApplication(
title = "Simple Centering"
) {
App()
}
@Composable
fun App() {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Text("Hello World!")
}
}
This window contains a collection of Box containers with various alignment settings. These alignments affect all child elements, since they are set on the Box itself.
fun main() = singleWindowApplication(
title = "Box Alignment of All"
) {
App()
}
@Composable
fun App() {
Column() {
Row() {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.TopStart
) {
Button(...) { Text("A") }
}
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.TopCenter
) {
Button(...) { Text("A") }
}
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.TopEnd
) {
Button(...) { Text("A") }
}
}
Row() {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.CenterStart
) {
Button(...) { Text("A") }
}
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Button(...) { Text("A") }
}
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.CenterEnd
) {
Button(...) { Text("A") }
}
}
Row() {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.BottomStart
) {
Button(...) { Text("A") }
}
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.BottomCenter
) {
Button(...) { Text("A") }
}
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.BottomEnd
) {
Button(...) { Text("A") }
}
}
}
}
This window contains a single Box container with a number of elements inside. These each have different alignment settings which only affect them individually.
fun main() = singleWindowApplication(
title = "Alignment Within Box"
) {
App()
}
@Composable
fun App() {
Box(
modifier = Modifier.fillMaxSize()
) {
Button(
modifier = Modifier.align(Alignment.TopStart),
onClick = {...}
) {
Text("A")
}
Button(
modifier = Modifier.align(Alignment.TopCenter),
onClick = {...}
) {
Text("B")
}
Button(
modifier = Modifier.align(Alignment.TopEnd),
onClick = {...}
) {
Text("C")
}
Button(
modifier = Modifier.align(Alignment.CenterStart),
onClick = {...}
) {
Text("D")
}
Button(
modifier = Modifier.align(Alignment.Center),
onClick = {...}
) {
Text("E")
}
Button(
modifier = Modifier.align(Alignment.CenterEnd),
onClick = {...}
) {
Text("F")
}
Button(
modifier = Modifier.align(Alignment.BottomStart),
onClick = {...}
) {
Text("G")
}
Button(
modifier = Modifier.align(Alignment.BottomCenter),
onClick = {...}
) {
Text("H")
}
Button(
modifier = Modifier.align(Alignment.BottomEnd),
onClick = {...}
) {
Text("I")
}
}
}
This window contains a Column of Rows with various horizontal alignment settings.
fun main() = singleWindowApplication(
title = "Horizontal Alignment",
) {
App()
}
@Composable
fun App() {
Column() {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Start
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Center
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
}
}
This window contains a Column of Rows with various horizontal spacing settings.
fun main() = singleWindowApplication(
title = "Horizontal Spacing",
) {
App()
}
@Composable
fun App() {
Column() {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(20.dp)
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceAround
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
}
}
This window contains a Row of Columns with various vertical alignment settings.
fun main() = singleWindowApplication(
title = "Vertical Alignment"
) {
App()
}
@Composable
fun App() {
Row() {
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.Top
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.Center
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.End
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
}
}
This window contains a Row of Columns with various vertical spacing settings.
fun main() = singleWindowApplication(
title = "Vertical Spacing"
) {
App()
}
@Composable
fun App() {
Row() {
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.spacedBy(20.dp)
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.SpaceEvenly
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.SpaceAround
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.SpaceBetween
) {
Button(...) { Text("A") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
}
}
This window contains a Column of Rows with various vertical alignment settings.
fun main() = singleWindowApplication(
title = "Vertical Alignment"
) {
App()
}
@Composable
fun App() {
Column() {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
verticalAlignment = Alignment.Top
) {
Button(...) { Text("A\nA\nA") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
verticalAlignment = Alignment.CenterVertically
) {
Button(...) { Text("A\nA\nA") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
verticalAlignment = Alignment.Bottom
) {
Button(...) { Text("A\nA\nA") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
}
}
This window contains a Row of Column with various horizontal alignment settings.
fun main() = singleWindowApplication(
title = "Horizontal Alignment"
) {
App()
}
@Composable
fun App() {
Row() {
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.SpaceEvenly
horizontalAlignment = Alignment.Start
) {
Button(...) { Text("AAA") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.SpaceEvenly
horizontalAlignment = Alignment.CenterHorizontally
) {
Button(...) { Text("AAA") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.SpaceEvenly
horizontalAlignment = Alignment.End
) {
Button(...) { Text("AAA") }
Button(...) { Text("B") }
Button(...) { Text("C") }
}
}
}