Introduction:
We will continue talking about Modifier Functions:
AbsoluteOffset:
@Stable fun Modifier.absoluteOffset(
x: Dp = 0.dp,
y: Dp = 0.dp
): Modifier
It will move the child of the Box not the Box itself by amount x and y dp and this amount can be negative from its original position without consider layout direction RTL or LTR.
Example 1:
@Composable
fun MyBox()
{
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(color = Color.Yellow)
.height(100.dp)
.width(100.dp)
.padding(all = 30.dp)
.absoluteOffset(x = -20.dp, y= -20.dp)
)
{
Text(text = "Hello Box 1")
}
}
Offset:
@Stable fun Modifier.offset(
x: Dp = 0.dp,
y: Dp = 0.dp
): Modifier
Same as absoluteOffset except it will consider RTL or LTR direction.
Padding:
@Stable fun Modifier.padding(
start: Dp = 0.dp,
top: Dp = 0.dp,
end: Dp = 0.dp,
bottom: Dp = 0.dp
): Modifier
Here start can be Right if we use RTL direction.
@Stable fun Modifier.padding(
horizontal: Dp = 0.dp,
vertical: Dp = 0.dp
): Modifier
@Stable fun Modifier.padding(all: Dp): Modifier
fun Modifier.padding(paddingValues: PaddingValues): Modifier
PaddingValues means we can store padding in variable and then use it here which is very good like this example:
val innerPadding = PaddingValues(top = 10.dp, start = 15.dp)
Box(Modifier.background(color = Color.Gray)) {
Box(Modifier.padding(innerPadding).size(50.dp).background(Color.Blue))
}
Important:
In jetpack Compose there is no Margin but you can simulate Margin by put a Box inside another Box, so the Padding of outer Box works as Margin for Inner Box.
AspectRatio:
@Stable fun Modifier.aspectRatio(
ratio: Float,
matchHeightConstraintsFirst: Boolean = false
): Modifier
Attempts to size the content to match a specified aspect ratio by trying to match one of the incoming constraints in the following order: Constraints.maxWidth, Constraints.maxHeight, Constraints.minWidth, Constraints.minHeight if matchHeightConstraintsFirst is false and the opposite if it true.
aspectRatio = width / hight
Box(Modifier.width(100.dp).aspectRatio(0.5f).background(Color.Green))
fillMaxHeight:
@Stable fun Modifier.fillMaxHeight(fraction: Float = 1f): Modifier
it makes the height as maximum as it can from the height available to it or some percent of it.
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(color = Color.Yellow)
.fillMaxHeight(fraction = 0.5f)
.padding(all = 30.dp)
)
{
Text(text = "Hello Box 1")
}
fillMaxWidth:
@Stable fun Modifier.fillMaxWidth(fraction: Float = 1f): Modifier
Same as fillmaxHeight() but with width.
Height:
@Stable fun Modifier.height(height: Dp): Modifier
To specify height in dp.
Width:
@Stable fun Modifier.width(width: Dp): Modifier
To specify width in dp.
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(color = Color.Yellow)
.width(200.dp)
.height(500.dp)
.padding(all = 30.dp)
)
{
Text(text = "Hello Box 1")
}
Alpha:
@Stable fun Modifier.alpha(alpha: Float): Modifier
Draw content with modified alpha that may be less than 1.
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.background(color = Color.Yellow)
.width(200.dp)
.height(500.dp)
.padding(all = 30.dp)
.alpha(alpha = 0.2f)
)
{
Text(text = "Hello Box 1")
}
Border:
fun Modifier.border(
width: Dp,
color: Color,
shape: Shape = RectangleShape
): Modifier
fun Modifier.border(
width: Dp,
brush: Brush,
shape: Shape
): Modifier
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.border(
width = 10.dp,
shape = CircleShape,
brush = Brush.linearGradient(
colors = listOf(Color.Blue, Color.Cyan,
Color.Green, Color.Magenta, Color.Red,
Color.Yellow),
)
)
.background(color = Color.Yellow, shape = CircleShape)
.width(200.dp)
.height(300.dp)
.padding(all = 30.dp)
)
{
Text(text = "Hello Box 1")
}
Clickable:
fun Modifier.clickable(
enabled: Boolean = true,
onClick: () -> Unit
): Modifier
It make the Box clickable.
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.border(
width = 10.dp,
shape = CircleShape,
brush = Brush.linearGradient(
colors = listOf(Color.Blue, Color.Cyan,
Color.Green, Color.Magenta, Color.Red,
Color.Yellow),
)
)
.clip(shape = CircleShape)
.background(color = Color.Yellow, )
.width(200.dp)
.height(300.dp)
.clickable(
onClick = {
println("I clicked")
}
)
.padding(all = 30.dp)
)
{
Text(text = "Hello Box 1")
}
fun Modifier.clickable(
interactionSource: MutableInteractionSource,
indication: Indication?,
enabled: Boolean = true,
onClick: () -> Unit
): Modifier
@Composable fun rememberRipple(
bounded: Boolean = true,
radius: Dp = Dp.Unspecified,
color: Color = Color.Unspecified
): Indication
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.border(
width = 10.dp,
shape = CircleShape,
brush = Brush.linearGradient(
colors = listOf(
Color.Blue, Color.Cyan,
Color.Green, Color.Magenta, Color.Red,
Color.Yellow
),
)
)
.clip(shape = CircleShape)
.background(color = Color.Yellow,)
.width(200.dp)
.height(300.dp)
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = rememberRipple(
bounded = true,
color = Color.Cyan,
radius = 50.dp
),
onClick = {
println("I clicked")
}
)
.padding(all = 30.dp)
)
{
Text(text = "Hello Box 1")
}
Rotate:
@Stable fun Modifier.rotate(degrees: Float): Modifier
It rotate the child of the Box by degrees amount.
…
.padding(all = 30.dp)
.rotate(degrees = -45.0f)
Shadow:
@Stable fun Modifier.shadow(
elevation: Dp,
shape: Shape = RectangleShape,
): Modifier
It give shadow to the Box.
.shadow(
elevation = 50.dp,
shape = CircleShape,
)
…
zIndex:
@Stable fun Modifier.zIndex(zIndex: Float): Modifier
It controls the drawing order for the children of the same layout parent. A child with larger zIndex will be drawn on top of all the children with smaller zIndex. When children have the same zIndex the original order in which the parent placed the children is used.
Box {
Box(
modifier = Modifier
.zIndex(3f)
.background(color = Color.Green)
.width(200.dp)
.height(200.dp)
)
Box(
modifier = Modifier
.zIndex(1f)
.background(color = Color.Cyan)
.width(300.dp)
.height(300.dp)
)
Box(
modifier = Modifier
.zIndex(2f)
.background(color = Color.Red)
.width(150.dp)
.height(350.dp)
)
}
Finally:
Ok, now we finish the most used Modifier Functions. Next class we will talk about Column which most, may be even all, Modifier Function apply to it.
See you 😄
================================================
You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.
Top comments (0)