DEV Community

Cover image for 06 Compose - Layout – Modifier Functions 2
One Past Last Jedi
One Past Last Jedi

Posted on • Updated on

06 Compose - Layout – Modifier Functions 2

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

Top comments (0)