06 Compose - Layout – Modifier Functions 2
Tags: compose, kotlin, jetpack, android
Published: 2021-05-04 10:03:45

#Introduction:
We will continue talking about Modifier Functions:

#AbsoluteOffset:
```kotlin
@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:
```kotlin
@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")
    }
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsj343izvhw6wcrnzbtf.png)
 
#Offset:
```kotlin
@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:
```kotlin
@Stable fun Modifier.padding(
    start: Dp = 0.dp, 
    top: Dp = 0.dp, 
    end: Dp = 0.dp, 
    bottom: Dp = 0.dp
): Modifier
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16vyam8fg0esivxs4irr.png)
 
Here start can be Right if we use RTL direction.
```kotlin
@Stable fun Modifier.padding(
    horizontal: Dp = 0.dp, 
    vertical: Dp = 0.dp
): Modifier
```
```kotlin
@Stable fun Modifier.padding(all: Dp): Modifier
```
```kotlin
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:
```kotlin
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:
```kotlin
@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.
```kotlin
aspectRatio = width / hight
```
```kotlin
Box(Modifier.width(100.dp).aspectRatio(0.5f).background(Color.Green))
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1xhic489a1s1a7s8zg3.png) 

#fillMaxHeight:
```kotlin
@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.
```kotlin
Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .background(color = Color.Yellow)
            .fillMaxHeight(fraction = 0.5f)
            .padding(all = 30.dp)
       )
    {
        Text(text = "Hello Box 1")
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcdcs4789jzno7j2coox.png)
 
#fillMaxWidth:
```kotlin
@Stable fun Modifier.fillMaxWidth(fraction: Float = 1f): Modifier
```
Same as fillmaxHeight() but with width.

#Height:
```kotlin
@Stable fun Modifier.height(height: Dp): Modifier
```
To specify height in dp.

#Width:
```kotlin
@Stable fun Modifier.width(width: Dp): Modifier
```
To specify width in dp.
```kotlin
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")
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oymncdlmqa1t2t2vhxhv.png)
 
#Alpha:
```kotlin
@Stable fun Modifier.alpha(alpha: Float): Modifier
```
Draw content with modified alpha that may be less than 1.
```kotlin
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")
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pehz02vltxqv0t8idiqk.png)
 
#Border:
```kotlin
fun Modifier.border(
    width: Dp, 
    color: Color, 
    shape: Shape = RectangleShape
): Modifier
```
```kotlin
fun Modifier.border(
    width: Dp, 
    brush: Brush, 
    shape: Shape
): Modifier
```
```kotlin
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")
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86k5qn89lwu86p4jd4c6.png)
 
#Clickable:
```kotlin
fun Modifier.clickable(
    enabled: Boolean = true, 
    onClick: () -> Unit
): Modifier
```
It make the Box clickable.
```kotlin
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")
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6vv5aehmsntoc7p1ny0.gif)
 
```kotlin
fun Modifier.clickable(
    interactionSource: MutableInteractionSource, 
    indication: Indication?, 
    enabled: Boolean = true, 
    onClick: () -> Unit
): Modifier
```
```kotlin
@Composable fun rememberRipple(
    bounded: Boolean = true, 
    radius: Dp = Dp.Unspecified, 
    color: Color = Color.Unspecified
): Indication
```
```kotlin
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")
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyy1qlo7txctw2osu394.gif)
 
#Rotate:
```kotlin
@Stable fun Modifier.rotate(degrees: Float): Modifier
```
It rotate the child of the Box by degrees amount.
```kotlin
…
.padding(all = 30.dp)
.rotate(degrees = -45.0f)
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87yqqr3m58gsf9vo12og.png)
 
#Shadow:
```kotlin
@Stable fun Modifier.shadow(
    elevation: Dp, 
    shape: Shape = RectangleShape,
): Modifier
```
It give shadow to the Box.
```kotlin
.shadow(
                    elevation = 50.dp,
                    shape = CircleShape,
                       )
…
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cu0zsghdwdo7kiq8sju7.png) 

#zIndex:
```kotlin
@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.
```kotlin
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)
           )
    }
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33j0u2d58eokw4slyqqs.png)
 
#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 :smile:

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


*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](https://dev.to/one_past_last_jedi/jetpack-compose-001-table-of-contents-2711)



[**Previous Class**](https://dev.to/one_past_last_jedi/05-compose-layout-box-and-modifier-functions-1-1hil)
	
[**Next Class**](https://dev.to/one_past_last_jedi/07-compose-layout-column-row-spacer-291j)