## DEV Community is a community of 618,434 amazing developers

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

# 05 Compose - Layout – Box and Modifier Functions 1

One Past Last Jedi Updated on ・5 min read

# 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/

``````fun Modifier.background(
color: Color,
shape: Shape = RectangleShape
): Modifier
``````

## 2/

``````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:

``````.background(Color.Green)
``````

#### 2/ Or by choose red, green, blue alpha as Float number [0f, 1f] like this:

``````.background(Color(red = 0.5f, green = 0.2f, blue = 0.7f, alpha = 1.0f))
``````

#### 3/ Or by choose red, green, blue alpha as Int number [0, 255] like this:

``````.background(Color(red = 50, green = 100, blue = 200, alpha = 255))
``````

#### 4/ Or by choose Hex-Format like this:

``````.background(Color(0xFFaa9911))
``````

# 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:

``````.background(Color(0xFFaa9911), shape = CircleShape,)
``````

# brush:

### 1/

``````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:

``````.background(brush=
colors = listOf(Color.Red, Color.Blue, Color.Green),
startX = 100.5f,
endX = Float.POSITIVE_INFINITY,
tileMode = TileMode.Mirror,)
)
``````

### 2/

``````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:

``````.background(brush=
(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,)
)
``````

### 3/

``````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:

``````.background(brush=
(0.2f to Color.Red),
(0.4f to Color.Blue),
(0.9f to Color.Green),
tileMode= TileMode.Clamp,)
)
``````

### 4/

``````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/

``````radialGradient(colors: List<Color>,
center: Offset = Offset.Unspecified,
tileMode: TileMode = TileMode.Clamp)
``````

Example:

``````.background(brush=
colors= listOf(Color.Green, Color.Blue, Color.Yellow),
center= Offset.Unspecified,
tileMode= TileMode.Clamp),
)
``````

### 6/

``````radialGradient(vararg colorStops: Pair<Float, Color>,
center: Offset = Offset.Unspecified,
tileMode: TileMode = TileMode.Clamp)
``````

Creates a radial gradient with the given colors at the provided offset defined in the colorstop pair.

### 7/

``````sweepGradient(colors: List<Color>,
center: Offset = Offset.Unspecified)
``````

Creates a sweep gradient with the given colors dispersed evenly around the center.
Example:

``````.background(brush=
colors= listOf(Color.Green, Color.Blue, Color.Yellow),
center= Offset.Unspecified,
),
)
``````

### 8/

``````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/

``````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:

``````.background(brush=
colors= listOf(Color.Green, Color.Blue, Color.Yellow),
),
)
``````

### 10/

``````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:

``````@Composable
fun MyBox()
{
Box(
contentAlignment = Alignment.TopEnd,
modifier = Modifier
.background(color = Color.Yellow)
.fillMaxSize()
)
{
Text(text = "Hello Box 1")
}
}
``````

# 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:

``````.fillMaxSize(fraction = 0.5f)
``````

# 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:

``````Box {
Box(Modifier.fillMaxSize().background(Color.Cyan))
Box(
Modifier.matchParentSize()
.padding(top = 20.dp, bottom = 20.dp)
.background(Color.Yellow)
)
Box(
Modifier.matchParentSize()
.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)
)
}
``````

# Finally:

We will continue discover more Modifier Functions because most those functions can be applied to most widgets (Composable function).
See you 😄

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