DEV Community

Cover image for 05 Compose - Layout – Box and Modifier Functions 1
One Past Last Jedi
One Past Last Jedi

Posted on • Edited on

05 Compose - Layout – Box and Modifier Functions 1

#compose #kotlin #jetpack #android

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

2/ 

fun Modifier.background( brush: Brush, shape: Shape = RectangleShape, alpha: Float = 1.0f ): Modifier
Enter fullscreen mode Exit fullscreen mode

color:

we can choose color by one of the following method.

1/ By choose from default color like this: 

.background(Color.Green)
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Alt Text

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

Alt Text

4/ Or by choose Hex-Format like this: 

.background(Color(0xFFaa9911))
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Alt Text

brush:

1/ 

horizontalGradient( colors: List<Color>, startX: Float = 0.0f, endX: Float = Float.POSITIVE_INFINITY, tileMode: TileMode = TileMode.Clamp)
Enter fullscreen mode Exit fullscreen mode

Creates a horizontal gradient with the given colors evenly dispersed within the gradient.
Example:

.background(brush= Brush.horizontalGradient( colors = listOf(Color.Red, Color.Blue, Color.Green), startX = 100.5f, endX = Float.POSITIVE_INFINITY, tileMode = TileMode.Mirror,) )
Enter fullscreen mode Exit fullscreen mode

Alt Text

2/ 

horizontalGradient(vararg colorStops: Pair<Float, Color>, startX: Float = 0.0f, endX: Float = Float.POSITIVE_INFINITY, tileMode: TileMode = TileMode.Clamp)
Enter fullscreen mode Exit fullscreen mode

Creates a horizontal gradient with the given colors dispersed at the provided offset defined in the colorstop pair.
Example:

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

Alt Text

3/ 

linearGradient(vararg colorStops: Pair<Float, Color>, start: Offset = Offset.Zero, end: Offset = Offset.Infinite, tileMode: TileMode = TileMode.Clamp)
Enter fullscreen mode Exit fullscreen mode

Creates a linear gradient with the provided colors along the given start and end coordinates.
Example:

.background(brush= Brush.linearGradient( (0.2f to Color.Red), (0.4f to Color.Blue), (0.9f to Color.Green), tileMode= TileMode.Clamp,) )
Enter fullscreen mode Exit fullscreen mode

Alt Text

4/ 

linearGradient(colors: List<Color>, start: Offset = Offset.Zero, end: Offset = Offset.Infinite, tileMode: TileMode = TileMode.Clamp)
Enter fullscreen mode Exit fullscreen mode

Creates a linear gradient with the provided colors along the given start and end coordinates.

5/ 

radialGradient(colors: List<Color>, center: Offset = Offset.Unspecified, radius: Float = Float.POSITIVE_INFINITY, tileMode: TileMode = TileMode.Clamp)
Enter fullscreen mode Exit fullscreen mode

Creates a radial gradient with the given colors evenly dispersed within the gradient.
Example:

.background(brush= Brush.radialGradient( colors= listOf(Color.Green, Color.Blue, Color.Yellow), center= Offset.Unspecified, radius= Float.POSITIVE_INFINITY, tileMode= TileMode.Clamp), )
Enter fullscreen mode Exit fullscreen mode

Alt Text

6/ 

radialGradient(vararg colorStops: Pair<Float, Color>, center: Offset = Offset.Unspecified, radius: Float = Float.POSITIVE_INFINITY, tileMode: TileMode = TileMode.Clamp)
Enter fullscreen mode Exit fullscreen mode

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

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

.background(brush= Brush.sweepGradient( colors= listOf(Color.Green, Color.Blue, Color.Yellow), center= Offset.Unspecified, ), )
Enter fullscreen mode Exit fullscreen mode

Alt Text

8/ 

sweepGradient(vararg colorStops: Pair<Float, Color>, center: Offset = Offset.Unspecified)
Enter fullscreen mode Exit fullscreen mode

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

Creates a vertical gradient with the given colors evenly dispersed within the gradient.
Example:

.background(brush= Brush.verticalGradient( colors= listOf(Color.Green, Color.Blue, Color.Yellow), ), )
Enter fullscreen mode Exit fullscreen mode

Alt Text

10/ 

verticalGradient(vararg colorStops: Pair<Float, Color>, startY: Float = 0f, endY: Float = Float.POSITIVE_INFINITY, tileMode: TileMode = TileMode.Clamp)
Enter fullscreen mode Exit fullscreen mode

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() .padding(all = 30.dp) ) { Text(text = "Hello Box 1") } }
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Alt Text

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

Alt Text

Finally:

We will continue discover more Modifier Functions because most those functions can be applied to most widgets (Composable function).
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 (1)

Collapse
 
one_past_last_jedi profile image
One Past Last Jedi •

No body write a comment :( ☹