DEV Community

loading...
Cover image for 06 Compose - Layout – Modifier Functions 2

06 Compose - Layout – Modifier Functions 2

One Past Last Jedi
Kotlin, Jetpack Compose, C++, Dart, Flutter, JS, nodeJS, MongoDb
Updated on ・5 min read

Introduction:

We will continue talking about Modifier Functions:

AbsoluteOffset:

@Stable fun Modifier.absoluteOffset(
    x: Dp = 0.dp, 
    y: Dp = 0.dp
): Modifier
Enter fullscreen mode Exit fullscreen mode

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")
    }
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Offset:

@Stable fun Modifier.offset(
    x: Dp = 0.dp, 
    y: Dp = 0.dp
): Modifier
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Alt Text

Here start can be Right if we use RTL direction.

@Stable fun Modifier.padding(
    horizontal: Dp = 0.dp, 
    vertical: Dp = 0.dp
): Modifier
Enter fullscreen mode Exit fullscreen mode
@Stable fun Modifier.padding(all: Dp): Modifier
Enter fullscreen mode Exit fullscreen mode
fun Modifier.padding(paddingValues: PaddingValues): Modifier
Enter fullscreen mode Exit fullscreen mode

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))
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
Box(Modifier.width(100.dp).aspectRatio(0.5f).background(Color.Green))
Enter fullscreen mode Exit fullscreen mode

Alt Text

fillMaxHeight:

@Stable fun Modifier.fillMaxHeight(fraction: Float = 1f): Modifier
Enter fullscreen mode Exit fullscreen mode

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")
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

fillMaxWidth:

@Stable fun Modifier.fillMaxWidth(fraction: Float = 1f): Modifier
Enter fullscreen mode Exit fullscreen mode

Same as fillmaxHeight() but with width.

Height:

@Stable fun Modifier.height(height: Dp): Modifier
Enter fullscreen mode Exit fullscreen mode

To specify height in dp.

Width:

@Stable fun Modifier.width(width: Dp): Modifier
Enter fullscreen mode Exit fullscreen mode

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")
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

Alpha:

@Stable fun Modifier.alpha(alpha: Float): Modifier
Enter fullscreen mode Exit fullscreen mode

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")
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

Border:

fun Modifier.border(
    width: Dp, 
    color: Color, 
    shape: Shape = RectangleShape
): Modifier
Enter fullscreen mode Exit fullscreen mode
fun Modifier.border(
    width: Dp, 
    brush: Brush, 
    shape: Shape
): Modifier
Enter fullscreen mode Exit fullscreen mode
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")
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

Clickable:

fun Modifier.clickable(
    enabled: Boolean = true, 
    onClick: () -> Unit
): Modifier
Enter fullscreen mode Exit fullscreen mode

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")
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

fun Modifier.clickable(
    interactionSource: MutableInteractionSource, 
    indication: Indication?, 
    enabled: Boolean = true, 
    onClick: () -> Unit
): Modifier
Enter fullscreen mode Exit fullscreen mode
@Composable fun rememberRipple(
    bounded: Boolean = true, 
    radius: Dp = Dp.Unspecified, 
    color: Color = Color.Unspecified
): Indication
Enter fullscreen mode Exit fullscreen mode
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")
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

Rotate:

@Stable fun Modifier.rotate(degrees: Float): Modifier
Enter fullscreen mode Exit fullscreen mode

It rotate the child of the Box by degrees amount.


.padding(all = 30.dp)
.rotate(degrees = -45.0f)
Enter fullscreen mode Exit fullscreen mode

Alt Text

Shadow:

@Stable fun Modifier.shadow(
    elevation: Dp, 
    shape: Shape = RectangleShape,
): Modifier
Enter fullscreen mode Exit fullscreen mode

It give shadow to the Box.

.shadow(
                    elevation = 50.dp,
                    shape = CircleShape,
                       )

Enter fullscreen mode Exit fullscreen mode

Alt Text

zIndex:

@Stable fun Modifier.zIndex(zIndex: Float): Modifier
Enter fullscreen mode Exit fullscreen mode

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)
           )
    }
Enter fullscreen mode Exit fullscreen mode

Alt Text

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.

Table of Contents

Previous Class

Next Class

Discussion (0)

Forem Open with the Forem app