## DEV Community is a community of 787,688 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

One Past Last Jedi

Posted on • Updated on

# 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)
.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.

``````@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)) {
}
``````

## 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)
)
{
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)
)
{
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)
.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,
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)
)
{
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,
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")
}
)
)
{
Text(text = "Hello Box 1")
}
``````

``````fun Modifier.clickable(
interactionSource: MutableInteractionSource,
indication: Indication?,
enabled: Boolean = true,
onClick: () -> Unit
): Modifier
``````
``````@Composable fun rememberRipple(
bounded: Boolean = true,
color: Color = Color.Unspecified
): Indication
``````
``````Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.border(
width = 10.dp,
shape = CircleShape,
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,
),
onClick = {
println("I clicked")
}
)
)
{
Text(text = "Hello Box 1")
}
``````

# Rotate:

``````@Stable fun Modifier.rotate(degrees: Float): Modifier
``````

It rotate the child of the Box by degrees amount.

``````…
.rotate(degrees = -45.0f)
``````

``````@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 😄

================================================