05 Compose - Layout – Box and Modifier Functions 1 
Tags: compose, kotlin, jetpack, android
Published: 2021-04-28 04:28:16


#Introduction:
In this Lecture we will talk about the most used Modifier Function.
#Modifier.Background():
First, some function has overload function like this one has 2 overloads function.
##1/
```kotlin
fun Modifier.background(
    color: Color, 
    shape: Shape = RectangleShape
): Modifier
```
##2/
```kotlin
fun Modifier.background(
    brush: Brush, 
    shape: Shape = RectangleShape, 
    alpha: Float = 1.0f
): Modifier
```
#color:
we can choose color by one of the following method.
####1/ By choose from default color like this:
```kotlin
.background(Color.Green)
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qen6djt12cwpcgh8wvkh.png)
 
####2/ Or by choose red, green, blue alpha as Float number [0f, 1f] like this:
```kotlin
.background(Color(red = 0.5f, green = 0.2f, blue = 0.7f, alpha = 1.0f))
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5x2nseetwam47qo9lxb.png)
 
####3/ Or by choose red, green, blue alpha as Int number [0, 255] like this:
```kotlin
.background(Color(red = 50, green = 100, blue = 200, alpha = 255))
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jbhrr8xvs3fzj5qgp82.png)

####4/ Or by choose Hex-Format like this:
```kotlin
.background(Color(0xFFaa9911))
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztye0sze8oc6r91el28h.png)

#Shape:
Can be RectangleShape or CircleShape or more advanced Shape that you need to use advanced function to do it. Here an example of CircleShape:
```kotlin
.background(Color(0xFFaa9911), shape = CircleShape,)
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqd7e2la8jjuw7t1yhy8.png)
 
#brush:
###1/ 
```kotlin
horizontalGradient(
colors: List<Color>, 
startX: Float = 0.0f, 
endX: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)
```
Creates a horizontal gradient with the given colors evenly dispersed within the gradient.
Example:
```kotlin
.background(brush=
                Brush.horizontalGradient(
                colors = listOf(Color.Red, Color.Blue, Color.Green),
                startX = 100.5f,
                endX = Float.POSITIVE_INFINITY,
                tileMode = TileMode.Mirror,)
                       )
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po6aua3cjosx50hoxwd8.png)
 
###2/
```kotlin
horizontalGradient(vararg colorStops: Pair<Float, Color>, 
startX: Float = 0.0f, 
endX: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)
```
Creates a horizontal gradient with the given colors dispersed at the provided offset defined in the colorstop pair.
Example:
```kotlin
.background(brush=
                Brush.horizontalGradient(
                    (0.2f to Color.Red),
                    (0.4f to Color.Blue),
                    (0.9f to Color.Green),
                startX = 0.0f,
                endX = Float.POSITIVE_INFINITY,
                tileMode = TileMode.Clamp,)
                       )
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91j657g8g7mooggpvsmz.png)
 
###3/
```kotlin
linearGradient(vararg colorStops: Pair<Float, Color>, 
start: Offset = Offset.Zero, 
end: Offset = Offset.Infinite, 
tileMode: TileMode = TileMode.Clamp)
```
Creates a linear gradient with the provided colors along the given start and end coordinates.
Example:
```kotlin
.background(brush=
                Brush.linearGradient(
                    (0.2f to Color.Red),
                    (0.4f to Color.Blue),
                    (0.9f to Color.Green),
                tileMode= TileMode.Clamp,)
                       )
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nzc6hn4l1zor9abv1hm.png)
 
###4/
```kotlin
linearGradient(colors: List<Color>, 
start: Offset = Offset.Zero, 
end: Offset = Offset.Infinite, 
tileMode: TileMode = TileMode.Clamp)
```
Creates a linear gradient with the provided colors along the given start and end coordinates.
###5/
```kotlin
radialGradient(colors: List<Color>, 
center: Offset = Offset.Unspecified, 
radius: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)
```
Creates a radial gradient with the given colors evenly dispersed within the gradient.
Example:
```kotlin
.background(brush=
                Brush.radialGradient(
                    colors= listOf(Color.Green, Color.Blue, Color.Yellow),
                    center= Offset.Unspecified,
                    radius= Float.POSITIVE_INFINITY,
                    tileMode= TileMode.Clamp),
                       )
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igh2czgqezx02a8lgmn9.png) 

###6/
```kotlin
radialGradient(vararg colorStops: Pair<Float, Color>, 
center: Offset = Offset.Unspecified, 
radius: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)
```
Creates a radial gradient with the given colors at the provided offset defined in the colorstop pair.
###7/
```kotlin
sweepGradient(colors: List<Color>, 
center: Offset = Offset.Unspecified)
```
Creates a sweep gradient with the given colors dispersed evenly around the center.
Example:
```kotlin
.background(brush=
                Brush.sweepGradient(
                    colors= listOf(Color.Green, Color.Blue, Color.Yellow),
                    center= Offset.Unspecified,
                                   ),
                       )
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzarhs07q0m82ibun5s5.png)
 
###8/
```kotlin
sweepGradient(vararg colorStops: Pair<Float, Color>, 
center: Offset = Offset.Unspecified)
```
Creates a sweep gradient with the given colors dispersed around the center with offsets defined in each colorstop pair.
###9/
```kotlin
verticalGradient(colors: List<Color>, 
startY: Float = 0.0f, 
endY: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)
```
Creates a vertical gradient with the given colors evenly dispersed within the gradient.
Example:
```kotlin
.background(brush=
                Brush.verticalGradient(
                    colors= listOf(Color.Green, Color.Blue, Color.Yellow),
                                   ),
                       )
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mepic0qn16vjdnwjbev.png)
 
###10/
```kotlin	
verticalGradient(vararg colorStops: Pair<Float, Color>, 
startY: Float = 0f, 
endY: Float = Float.POSITIVE_INFINITY, 
tileMode: TileMode = TileMode.Clamp)
```
Creates a vertical gradient with the given colors at the provided offset defined in the PairFloat,Color.


#Modifier.fillMaxSize(fraction: Float = 1f)
It make the Box() or the widget as big as the available to it. For example if we apply it to our Box(), the box will take the whole screen:
```kotlin
@Composable
fun MyBox()
{
    Box(
        contentAlignment = Alignment.TopEnd,
        modifier = Modifier
            .background(color = Color.Yellow)
            .fillMaxSize()
            .padding(all = 30.dp)
       )
    {
        Text(text = "Hello Box 1")
    }
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7s3cvtxumbzg4gi2vri.png)
 
#We notice that contentAlignment 
is Alignment the Child of the Box inside the Box.

####We can also make it to fill some percent of max size like this:
```kotlin
.fillMaxSize(fraction = 0.5f)
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yomt7fzlv9lsa5n8fau5.png)
 
#Bact to the Box():
Box can have more than one Child but children will be stacked one on top of the other.
A box with no content that can participate in layout, drawing, pointer input due to the modifier applied to it. For example:
```kotlin
Box {
    Box(Modifier.fillMaxSize().background(Color.Cyan))
    Box(
        Modifier.matchParentSize()
            .padding(top = 20.dp, bottom = 20.dp)
            .background(Color.Yellow)
    )
    Box(
        Modifier.matchParentSize()
            .padding(40.dp)
            .background(Color.Magenta)
    )
    Box(
        Modifier.align(Alignment.Center)
            .size(300.dp, 300.dp)
            .background(Color.Green)
    )
    Box(
        Modifier.align(Alignment.TopStart)
            .size(150.dp, 150.dp)
            .background(Color.Red)
    )
    Box(
        Modifier.align(Alignment.BottomEnd)
            .size(150.dp, 150.dp)
            .background(Color.Blue)
    )
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h43sp5r0tq5n9mmt5x9l.png)

#Finally:
We will continue discover more Modifier Functions because most those functions can be applied to most widgets (Composable function).
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/jetpack-compose-004-layout-box-and-modifier-2386)
	
[**Next Class**](https://dev.to/one_past_last_jedi/06-compose-layout-modifier-functions-2-51ep)