4
4
.
.
2
2
.
.
6
6
B
B
o
o
x
x
I
I
n
n
f
f
o
o
[
[
R
R
]
]
Box is Container View which organizes his child Views on top of each other (in depth along z-axis and not vertically).
Each child can be aligned at the: center, sides or corners.
Syntax
import androidx.compose.foundation.layout.Stack
Box {
Text("Bottom")
Text("Top")
}
E
E
x
x
a
a
m
m
p
p
l
l
e
e
In this example we create Row View with Text child Views aligned at different positions on the screen.
Text("Below all") is defined first so it appears below all the other Views.
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.dp
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Box(Modifier.fillMaxSize().fillMaxWidth().fillMaxHeight()) {
Text("Below all" , Modifier.background(Color.Green).fillMaxSize())
Text("Top Start" , Modifier.align(Alignment.TopStart ).padding(20.dp))
Text("Top Center" , Modifier.align(Alignment.TopCenter ).padding(20.dp))
Text("Top End" , Modifier.align(Alignment.TopEnd ).padding(20.dp))
Text("Center Start" , Modifier.align(Alignment.CenterStart ).padding(20.dp))
Text("Center " , Modifier.align(Alignment.Center ).padding(20.dp))
Text("Center End" , Modifier.align(Alignment.CenterEnd ).padding(20.dp))
Text("Bottom Start" , Modifier.align(Alignment.BottomStart ).padding(20.dp))
Text("Bottom Center", Modifier.align(Alignment.BottomCenter).padding(20.dp))
Text("Bottom End" , Modifier.align(Alignment.BottomEnd ).padding(20.dp))
}
}
}
}
Output
