DEV Community: Ramsingh Manek

Complete Guide to Layouts in Compose - Android Jetpack Compose

Ramsingh Manek — Tue, 04 Apr 2023 09:41:31 +0000

The Layouts composable are a very essential and important component for creating UI. Jetpack compose provides predefined layouts like Column, Row, Box, and ConstraintLayout.

Common Attributes for the layout composable:

Showing widgets vertically using Column:

In Composable there is a Column as a LinearLayout with vertical orientation. It simply layouts all child widgets as vertical columns. All the children in the Column layout will be arranged vertically at the top position and in horizontal alignment at the start position, by default. Update the above function as below:

@Preview
@Composable
fun ColumnExample() {

Column(
modifier = Modifier.fillMaxSize()
) {
Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small),
contentDescription = null
)
Text(text = "Espresso", fontSize = 25.sp)
}
}

In the above example, we have not used any alignment-related property. So let's see how the output would be if we set alignment to image and text compostables.

Weight

We can divide the components into equal portions using the weight in the modifier in the Column layout using the weight(weight value) modifier. Let’s see a basic example below:

@Preview
@Composable
fun ColumnExampleWithWeight() {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxWidth()
) {
Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small),
contentDescription = null,
Modifier.weight(2f)
)
Text(
text = "Espresso",
fontSize = 25.sp,
modifier = Modifier
.weight(2f)
.align(Alignment.CenterHorizontally)
)
}
}

Layout Alignment

By default, all children in the Column are aligned in the top-left corner position. We can align the children in the Column layout using the following alignments

With the Column layout, we have constant Alignment.CenterHorizontal interface are:

1. Start

2.CenterHorizontally

3. End

The above parameter is used to align the components horizontally along the horizontal axis.

Column(
modifier = Modifier
.fillMaxSize()
.background(Color.Black),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small),
contentDescription = null
)
Text(text = "Espresso", fontSize = 25.sp, color = Color.White)
}

Layout Arrangement

The arrangement can be used to control the positions of the child along the same axis as the parent container like vertically for Column. Arrangements values can be set on the Column layout using vertical arrangement parameters.

The column composable has a vertical arrangement parameter which accepts the values as follows

1. Arrangement.Top - Arrange the content at the top of the content area vertically

2. Arrangement. Center - Arrange the content at the center vertically in the content area

3. Arrangement.Bottom - Arrange the content at the bottom of the content area vertically.

Column(
modifier = Modifier
.fillMaxSize()
.background(Color.Black),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small),
contentDescription = null
)
Text(text = "Espresso", fontSize = 25.sp, color = Color.White)
}

Showing widgets horizontally using Row:

In Composable there is a Row as a LinearLayout with horizontal orientation. It simply layouts all child widgets as horizontal rows. All the children in the Row layout will be arranged vertically at the top position and in horizontal alignment at the start position, by default. Update the above function as below:

Row(
modifier = Modifier
.fillMaxSize()
.background(Color.Black),
) {
Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small),
contentDescription = null,
modifier = Modifier.size(100.dp)
)
Text(text = "Espresso", fontSize = 25.sp, color = Color.White)
}

Weight

We can add the weight in the modifier in the Row layout using the weight(weight value) modifier. Let’s see a basic example below:

@Preview
@Composable
fun RowExampleWithWeight() {

Row(
modifier = Modifier
.fillMaxSize()
.background(Color.Black),
) {
Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small),
contentDescription = null,
modifier = Modifier.weight(1f)
)
Text(
text = "Espresso",
fontSize = 25.sp,
color = Color.White,
modifier = Modifier.weight(1f)
)
}
}

Layout Alignment

By default, all children in Row are aligned in the top-left corner position. We can align the children in the Row layout using the following alignments

With the Row layout, we have constant Alignment.CenterVertical interface is:

4. Top

5.CenterVertically

6. Bottom

The above parameter is used to align the components horizontally along the horizontal axis.

Layout Arrangement

The arrangement can be used to control the positions of the child along the same axis as the parent container like horizontally for Rows. Arrangements values can be set on the Row layout using horizontal arrangement parameters.

The column composable has a vertical arrangement parameter that accepts the values as follows

1. Arrangement. Start - Arrange the content at the start of the row horizontally to the content area

2. Arrangement.Center - Arrange the content at the center horizontally in the content area

3. Arrangement.End - Arrange the content at the end of the row to the content area horizontally.

Row(
modifier = Modifier
.fillMaxSize()
.background(Color.Black),
verticalAlignment =Alignment.CenterVertically
) {
Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small),
contentDescription = null,
modifier = Modifier.weight(1f)
)
Text(
text = "Espresso",
fontSize = 25.sp,
color = Color.White,
modifier = Modifier.weight(1f)
)
}

Layout Arrangement Spacing

Arranging space between each child component in Rows or Columns is spaced across the content area. The spacing can be achieved by using the horizontal arrangement and vertical arrangement parameters that require one of the following values.

1. Arrangement.SpaceEvenly - All child components are spaced equally, including before the first component and after the last component.

2. Arrangement.SpaceBetween - All children are spaced equally in the parent layout. There is no space added before the first and after the last child.

3. Arrangement.SpaceAround - All children are spaced equally in the parent layout. It includes half spacing before the first and after the last child.

Below example are used with Row composable

1.SpaceEvenly:

@Composable
fun TextCell(value: String) {
val cellModifier = Modifier
.padding(5.dp)
.size(100.dp, 100.dp)
.border(width = 2.dp, color = Color.Red)
.wrapContentHeight()

Text(
text = value,
modifier = cellModifier,
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
}

Now, call the above function to create Text composable as follows:

Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier.fillMaxSize()
) {
TextCell(value = "A")
TextCell(value = "B")
TextCell(value = "C")
}

2.SpaceBetween

Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.fillMaxSize()
) {
TextCell(value = "A")
TextCell(value = "B")
TextCell(value = "C")
}

3.SpaceAround

Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceAround,
modifier = Modifier.fillMaxSize()
) {
TextCell(value = "A")
TextCell(value = "B")
TextCell(value = "C")
}

Below examples are used with Column composable. Also, we will use the same TextCell() for column example

1.SpaceEvenly

Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier.height(600.dp)
) {
TextCell(value = "A")
TextCell(value = "B")
TextCell(value = "C")
}

2.SpaceBetween

Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.height(600.dp)
) {
TextCell(value = "A")
TextCell(value = "B")
TextCell(value = "C")
}

3.SpaceAround

Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.SpaceAround,
modifier = Modifier.height(600.dp)
) {
TextCell(value = "A")
TextCell(value = "B")
TextCell(value = "C")
}

Box Layout

Boxes are the third most used composable when developing applications using jetpack compose. The box composable will stack the child on top of each other. By default, the children will be placed at the top-start position. The stacking order is the order in which children are declared in the box layout, the first child will be at the bottom of the stack and the last child will be visible on the top of the stack.

Aligning the child in the Box Layout

Using the Box layout we can specify the position of the child where we want to align our child elements inside our box. There are 3 vertical options available top, center, and bottom. Horizontal options are, start, center, and end. So there are 9 possible alignments for our child's in-box layout as shown below table:

Here is a simple example of a box layout

Box(contentAlignment = Alignment.Center,
modifier = Modifier.size(400.dp, 400.dp)) {

TextCell("1")
TextCell("2")
TextCell("3")
}

BoxScope modifiers

The following BoxScope modifiers are available that need to be applied to child components in the box layout.

1. align() - Aligns the child to a specified alignment value within the Box content layout. The set of alignment values is the same as those listed above for box content alignment.

2.matchParentSize() - If this modifier is specified to the child then the size of the child will be the same as the parent box.

Now, add the following function to add text cells in the box layout as follows to add text layout to all different positions.

@Composable
fun TextCellBox(value: String, modifier: Modifier) {
val cellModifier = Modifier
.wrapContentHeight()
.size(30.dp, 30.dp)
.border(width = 2.dp, color = Color.Red)

Text(
text = value,
modifier = cellModifier.then(modifier),
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
}

Here is the box example for adding text to all positions.

Box(modifier = Modifier.size(height = 150.dp, width = 200.dp).padding(15.dp)) {
TextCellBox(value = "A", modifier = Modifier.align(Alignment.TopStart))
TextCellBox(value = "B", modifier = Modifier.align(Alignment.TopCenter))
TextCellBox(value = "C", modifier = Modifier.align(Alignment.TopEnd))
TextCellBox(value = "D", modifier = Modifier.align(Alignment.CenterStart))
TextCellBox(value = "E", modifier = Modifier.align(Alignment.Center))
TextCellBox(value = "F", modifier = Modifier.align(Alignment.CenterEnd))
TextCellBox(value = "G", modifier = Modifier.align(Alignment.BottomStart))
TextCellBox(value = "H", modifier = Modifier.align(Alignment.BottomCenter))
TextCellBox(value = "I", modifier = Modifier.align(Alignment.BottomEnd))

}

Let's now check how the matchParentSize() modifier will work by a simple example.

Box(
Modifier
.size(200.dp)
.background(Color.Blue)
)
{

Text(
text = "CENTER",
modifier = Modifier
.padding(10.dp)
.background(Color.Red)
.matchParentSize()
.wrapContentHeight(),
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)

}

Using the clip() modifier

The clip() modifier is used to render the specified shape to box composable layout. To define the shape of the composable, the clip() modifier is called with values such as RectangleShape, CircleShape, RoundedCornerShape, or CutCornerShape.

The following example will clip the box composable and draw the circle with blue color. When rendered it will look like the box appears in the below image.

Box(
Modifier
.size(300.dp)
.padding(50.dp)
.clip(CircleShape)
.background(Color.Blue)
)

To draw different shapes like rounded corners just change the value in the clip() modifier as RoundedCorderShape, and pass the radius for each direction to it to draw the required corners. If only a single value is passed as a radius then it will be applied the same to all corners. Let's see a simple example with a rounded corner box and a simple “Hello” text inside it.

Box(
Modifier
.clip(RoundedCornerShape(15.dp))
.size(300.dp)
.padding(50.dp)
.background(Color.Blue)
)
{

Text(
text = "Hello!",
modifier = Modifier
.padding(20.dp)
.clip(RoundedCornerShape(15.dp))
.background(Color.Red)
.matchParentSize()
.wrapContentHeight(),
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
}

Constraint Layout

The ConstraintLayout positions the children according to the constraint settled between them. It is similar to “ConstraintLayout” which we use to add views in XML for Android Development.

Generating References

By default, the children in ConstraintLayout will be positioned on the top-left-hand corner of the content area with the assumption of the app running on left to right and top-to-bottom locale. Before assigning the constraints the compostables must assign a reference. There are two steps in the process generating the references and assigning them to the composable before applying the constraints.

createRef() function is used to create a single reference and result assigned to constant, for example

        Val text1 = createRef()

Alternatively, if you want to create multiple references in a single step by calling same createRefs() function as shown below:

Val (text1, text2, text3) = createRefs()

Assigning references to a composable

After creating the reference, it can be applied to an individual composable using the constraints () modifier function. For example, assign text1 reference to Text composable. As we can see in the given example, the constraints () modifier function has a trailing lambda in which we can specify the constraint for the composable.

ConstraintLayout{
Val img = createRef()
Image(
Bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small), contentDescription = null, modifier = Modifier.constraintAs(img){
// add constraints here
})

}

Adding Constraint

The most common constraint of the composable is between one side of the composable and another side of either another composable or parent ConstraintLayout itself. The constraints are added using the constraints () modifier function and declared inside the training lambda block via the call to link () function.

Let’s see how we can implement constraint layout by using the link () function as shown below by updating the above sample code.

Compose example 1.0

In the above example, we have set the constraint of the image view to the left - the top position of the parent ConstraintLayout instance, both with 16. dp margin.

In addition to the linkTo() function there are other functions to apply constraints, a component can be centered horizontally or vertically relative to the parent itself or any other component using centerHorizontallyTo() and centerVerticallyTo() respectively. For example,

Image(
Bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small), contentDescription = null, modifier = Modifier.constraintAs(img){
centerVerticallyTo(parent)
centerHorizontallyTo(parent)
})

In the above example, the image will be positioned vertically from center to parent on the vertical axis, and horizontally from center to parent on the horizontal axis of the ConstraintLayout.

centerAround() function can be used to position the component in the center vertically or horizontally relative to the side of another component.

Now, after learning to add constraints let’s create a simple view with an image and some text as below.

ConstraintLayout(
modifier = Modifier
.fillMaxSize()
.background(Color.Black)
) {
val img = createRef()
val txtTitle = createRef()
val txtDescription = createRef()
val txtTagline = createRef()
Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small),
contentDescription = null,
modifier = Modifier
.constrainAs(img) {
top.linkTo(parent.top, margin = 16.dp)
start.linkTo(parent.start, margin = 16.dp)
}
.background(Color.Blue)
.clip(RoundedCornerShape(10.dp))
.size(80.dp)
.wrapContentHeight()
)

   Text("Espresso", modifier = Modifier.constrainAs(txtTitle) {
       top.linkTo(parent.top)
       linkTo(start = img.end, end = parent.end, startMargin = 10.dp, endMargin = 16.dp)
       width = Dimension.fillToConstraints
   }, fontSize = 24.sp, color = Color.White)

   Text(
       text = "Espresso is coffee of Italian origin, brewed by forcing a small amount of nearly boiling water under pressure (expressing) through finely-ground coffee beans.",
       modifier = Modifier.constrainAs(txtDescription) {
           top.linkTo(txtTitle.bottom, margin = 5.dp)
           linkTo(txtTitle.start, txtTitle.end)
           width = Dimension.fillToConstraints
       }, color = Color.White
   )

   Text(
       text = "This is example of ConstraintLayout",
       modifier = Modifier.constrainAs(txtTagline) {
           linkTo(parent.start, parent.end)
           top.linkTo(txtDescription.bottom, margin = 10.dp)
       }, color = Color.White
   )

}

Opposing Constraints

Till now we have seen how to set constraints to components to a fixed position within the parent with margins. The opposing constraints are the constraints created with both sides of the component along the same axis horizontally or vertically are constrained. For example, applying the opposing constraint on the button on the horizontal axis.

val btnOpposed = createRef()
Button(onClick = { }, modifier = Modifier.constrainAs(btnOpposed) {
top.linkTo(txtTagline.bottom, margin = 20.dp)
start.linkTo(parent.start)
end.linkTo(parent.end)
}) {
Text("Centered Button")
}

As you can see in the above image the opposing constraint will position the component in the horizontal center position in the constraint layout. The link () function can accept the parameters to concise the opposing constraint which can be declared as the following example, by updating the above-given code.

val btnOpposed = createRef()
Button(onClick = { }, modifier = Modifier.constrainAs(btnOpposed) {
top.linkTo(txtTagline.bottom, margin = 20.dp)
linkTo(parent.start, parent.end)
}) {
Text("View Detail")
}

The link to the () function has two arguments in the lambda block, which will position the button in the center horizontally with a single line of code. If you require to position the component center vertically or center horizontally, within the parent, the same result can be achieved using the following line of code.

centerVerticallyTo(parent)
centerHorizontallyTo(parent)

Constraint Bais

To arrange a component to center position on a particular axis opposing constraint is used. When the bias is applied to a constrained component, it will be moved relative to the available space. Let's understand the basis constraint with a simple example.

Add the following code to the previous compose example 1.0 and update the button code block as below.

val btnOpposed = createRef()
val (imgLlike, imgShare) = createRefs()

Image(
Icons.Filled.Favorite,
contentDescription = null,
modifier = Modifier.constrainAs(imgLlike) {
linkTo(btnOpposed.top, btnOpposed.bottom)
linkTo(parent.start, parent.end, bias = 0.05f)
},
colorFilter = ColorFilter.tint(Color.White)
)

Image(
Icons.Filled.Share,
contentDescription = null,
modifier = Modifier.constrainAs(imgShare) {
linkTo(btnOpposed.top, btnOpposed.bottom)
linkTo(parent.start, parent.end, bias = 0.15f)
}, colorFilter = ColorFilter.tint(Color.White)
)

Button(onClick = { }, modifier = Modifier.constrainAs(btnOpposed) {
top.linkTo(txtTagline.bottom, margin = 20.dp)
linkTo(parent.start, parent.end, bias = 0.9f)
}) {
Text("View Detail")
}

In this example button “View Detail” will be positioned at 90% of the width of the parent. Same way icons of share and favorite have been constrained using bias and positioned at 5% and 15% of the parent.

Constraint Margin

We can set the margin to a composable to fix the gap according to our needs, between a component and another element like a composable barrier, guideline, or the side of the parent ConstraintLayout.

Please consider the above example for margin. The horizontal bias constraint setting will control the position of the component on the right-hand side of the layout.

After adding a margin constraint to a component a fixed gap appears and a component can not be moved even when adjusting the bias. In the code given below margin of 30 dp is added and the right-hand constraint into the button is composable and can not be moved even when setting bias to 100%.

val btnClose = createRef()
Button(onClick = {}, modifier = Modifier.constrainAs(btnClose) {
bottom.linkTo(parent.bottom, margin = 30.dp)
linkTo(parent.start, parent.end, bias = 1.0f, endMargin = 30.dp)
}) {
Text(text = "Close")
}

This margin on the right-hand side of the button will be preserved even if screen orientation changes or any other component or view are added to the right side of the button. Even if we don’t specify the bias setting, the margin will be applied and will not affect the positioning of the component.

Working with Chains in ConstraintLayout

When we need to arrange more than two components on the same axis horizontally or vertically with equal spacing around them we can use Chain constraint in ConstraintLayout. A chain constraint for two or more components can be created by using one of the functions either createHorizontalChain() or createVerticalChain().

Both these functions require passing parameters of the component references created using createRef() or createRefs(). Let's understand chain constraint by a simple example, arranging the 3 buttons horizontally with equal spacing around them.

val (obtnFood, obtnFashion, obtnTravel) = createRefs()
createHorizontalChain(obtnFood, obtnFashion, obtnTravel)

OutlinedButton(
onClick = { },
modifier = Modifier
.constrainAs(obtnFood) {
bottom.linkTo(btnClose.top, margin = 20.dp)
centerHorizontallyTo(parent)
}) {
Text(text = "Food")
}
OutlinedButton(
onClick = { },
modifier = Modifier
.constrainAs(obtnFashion) {
bottom.linkTo(btnClose.top, margin = 20.dp)
centerHorizontallyTo(parent)
}) {
Text(text = "Fashion")
}
OutlinedButton(
onClick = { },
modifier = Modifier
.constrainAs(obtnTravel) {
bottom.linkTo(btnClose.top, margin = 20.dp)
centerHorizontallyTo(parent)
}) {
Text(text = "Travel")
}

A chain constraint can also be arranged using Packed, Spread, or SpreadInside styles.

1. Packed: A style where all the components are grouped together and placed in the center of the available space.

2. Spread: A style where all components are evenly distributed

3.SpreadInside: A style where all components are evenly distributed but the first and last components are fixed to each end.

To change the style, you need to add a style parameter to createHorizontalChain() or createVerticallyChain(). Changing the style from the default Spread chain to SpreadInside is as follows.

createHorizontalChain(
obtnFood,
obtnFashion,
obtnTravel,
chainStyle = ChainStyle.SpreadInside
)

After changing the chain style to SpreadInside the following preview will be generated in the preview pane.

Working with Guidelines

ConstraintLayout provides horizontal or vertical guidelines. Guidelines are invisible lines that are not visible to users. Guidelines are helpful to the developer to constrain views and design layouts easily. Guidelines are useful when a number of components need to align to a specific axis line like horizontally or vertically. A guideline can have the value as a percentage of either the height or width of the parent.

The following function call will create a vertical guideline to the starting edge of the parent.

createGuidelineFromStart(fraction = 0.25f)

The following function call will create a horizontal guideline to the bottom edge of the parent and the guideline will be positioned above the 60dp from the bottom edge.

createGuidelineFromBottom(offset = 60.dp)

Now, let's create a simple example using guidelines at 40% of the parent and show the banner image at the top above the guideline, and below the image we can show some description or other content.

Below the banner image, we have set the like and share images. And at the bottom, there is a button “View Detail”. The like and share images are again set with a vertical guideline, on the first half we have set the Like image, and on the other half we have set the Share image.

ConstraintLayout(
modifier = Modifier
.fillMaxSize()
) {

val (img, imgLlike, imgShare, btnViewDetail) = createRefs()
val guideLineCoverImage = createGuidelineFromTop(0.4f)
val guideLineMiddleVerticalLine = createGuidelineFromStart(0.5f)

Image(
bitmap = ImageBitmap.imageResource(id = R.drawable.espresso_small),
contentDescription = null,
modifier = Modifier
.constrainAs(img) {
top.linkTo(parent.top)
bottom.linkTo(guideLineCoverImage)
height = Dimension.fillToConstraints
}
.background(Color.Blue)
.wrapContentWidth()
.fillMaxHeight()
)

Image(
Icons.Filled.Favorite,
contentDescription = null,
modifier = Modifier
.constrainAs(imgLlike) {
top.linkTo(img.bottom, 10.dp)
linkTo(parent.start, guideLineMiddleVerticalLine)
}
.size(50.dp),
colorFilter = ColorFilter.tint(Color.Gray)
)

Image(
Icons.Filled.Share,
contentDescription = null,
modifier = Modifier
.constrainAs(imgShare) {
top.linkTo(img.bottom, 10.dp)
linkTo(guideLineMiddleVerticalLine, parent.end)
}
.size(50.dp),
colorFilter = ColorFilter.tint(Color.Gray)
)

Button(onClick = { }, modifier = Modifier.constrainAs(btnViewDetail) {
linkTo(parent.start, parent.end)
bottom.linkTo(parent.bottom)
width = Dimension.fillToConstraints
}) {
Text("View Detail")
}
}

Here is the preview of the above code. In the image there you can see the vertical dotted line between the Like and Share images which is a guideline but when we run it is not visible to the user.

Also, let's take another simple example for showing buttons using guidelines.

ConstraintLayout(
modifier = Modifier
.wrapContentSize()
.padding(30.dp)
) {
val (button1, button2, button3) = createRefs()
val verticalGuideline = createGuidelineFromStart(0.6f)

   Button(onClick = { }, modifier = Modifier.constrainAs(button1) {
       top.linkTo(parent.top)
       end.linkTo(verticalGuideline, margin = 20.dp)
   }) {
       Text("Button 1")
   }

   Button(onClick = { }, modifier = Modifier.constrainAs(button2) {
       top.linkTo(button1.bottom)
       start.linkTo(verticalGuideline, margin = 40.dp)
   }) {
       Text("Button 2")
   }

   Button(onClick = { }, modifier = Modifier.constrainAs(button3) {
       top.linkTo(button2.bottom)
       end.linkTo(verticalGuideline, margin = 20.dp)
   }) {
       Text("Button 3")
   }

}

Working with barriers in ConstraintLayout

The barrier constraints are created for a specific side of one or more components using the following 4 available functions.

1.createStartBarrier()

2.createEndBarrier()

3.createTopBarrier()

4.createBottomBarrier()

Each of the functions accepts the reference of the component that needs to create a barrier with optional margin parameters.

val barrier = createEndBarrier(button1, button2, margin = 30.dp)

createEndBarrier() function will create the vertical barrier positioned 30 dp from the widest width of button1 or button2. So start and the end is used to create vertical barriers and the top and bottom are used for horizontal barriers.

To learn about barriers, let's create a sample code to understand scenarios. Implement the following sample code.

ConstraintLayout(
modifier = Modifier
.size(300.dp, 200.dp)
.padding(10.dp)
) {

val (button1, button2, button3) = createRefs()

Button(onClick = { }, modifier = Modifier
.constrainAs(button1) {
top.linkTo(parent.top)
start.linkTo(parent.start)
}
.width(100.dp)) {
Text("Button 1")
}

Button(onClick = { }, modifier = Modifier
.constrainAs(button2) {
top.linkTo(button1.bottom, margin = 20.dp)
start.linkTo(parent.start)
}
.width(100.dp)) {
Text("Button 2")
}

Button(onClick = { }, modifier = Modifier.constrainAs(button3) {
linkTo(parent.top, parent.bottom)
linkTo(button1.end, parent.end, startMargin = 10.dp)
width = Dimension.fillToConstraints
height = Dimension.fillToConstraints

}) {
Text("Button 3")
}
}

In the above example, button 3 is arranged to the right-hand side of button 1. And button3 needed its size to fill with available maximum free space. Also need to ensure that if the size of button1 and button2 is changed button3 should be changed in response to them.

In the above code sample if button1’s size is set to 200. dp which is increased its width then button3’s size will get changed see the below screenshot.

Now, if button2’s width changes that will not affect button3’s size but it affect that button2 overlapped by button3 as you can see in the below screenshot.

Clearly, this does not look good. Isn’t it? This is happening because button3 is constrained by only button1 and is not affected by changes made on button2. To solve the above issue we need to set button3 to the right-hand side of both button1 and button3. We can achieve this by using barrier constraints.

Update the above sample code with the below-given code.
ConstraintLayout(
modifier = Modifier
.size(300.dp, 200.dp)
.padding(10.dp)
) {

val (button1, button2, button3) = createRefs()
val barrier = createEndBarrier(button1, button2)

Button(onClick = { }, modifier = Modifier
.constrainAs(button1) {
top.linkTo(parent.top)
start.linkTo(parent.start)
}
.width(100.dp)) {
Text("Button 1")
}

Button(onClick = { }, modifier = Modifier
.constrainAs(button2) {
top.linkTo(button1.bottom, margin = 20.dp)
start.linkTo(parent.start)
}
.width(180.dp)) {
Text("Button 2")
}

Button(onClick = { }, modifier = Modifier.constrainAs(button3) {
linkTo(parent.top, parent.bottom)
linkTo(button1.end, parent.end, startMargin = 10.dp)
start.linkTo(barrier, margin = 10.dp)
width = Dimension.fillToConstraints
height = Dimension.fillToConstraints
}) {
Text("Button 3")
}
}

If you have any queries regarding Android app development connect with our Android app developers.

Unity Visual Effect Graph Guide - Everything That You Need to Know

Ramsingh Manek — Thu, 23 Mar 2023 11:05:12 +0000

Unity's Visual Effect Graph (VFX Graph) is a powerful tool that enables game developers to create stunning particle effects that enhance the visual fidelity of their games.

It provides a flexible and customizable framework that allows for the creation of advanced particle systems that can be used to add depth, detail, and immersion to games.

In this blog post, we'll explore how to create advanced particle systems using Unity's VFX Graph.

What is a Particle System?

A particle system is a collection of small, dynamic objects, known as particles, that are used to simulate various effects, such as fire, smoke, explosions, and more.

A particle system consists of a set of rules that govern how particles are generated, their lifespan, movement, color, and other properties.

The rules are defined by a set of parameters that can be adjusted to create different effects.

What is Unity's Visual Effect Graph?

Unity's Visual Effect Graph (VFX Graph) is a powerful tool that allows developers to create complex particle systems with a high degree of control and flexibility.

It is a node-based visual scripting tool that enables developers to create stunning particle effects quickly and easily.

VFX Graph is built on top of Unity's High Definition Render Pipeline (HDRP), which provides enhanced visual quality and rendering capabilities.

Creating a Simple Particle System

To get started with VFX Graph, let's create a simple particle system that emits particles from a point in space.

Here's how:

↪Create a new Unity project and import the HDRP package if it's not already installed.

↪Create a new VFX Graph asset by right-clicking in the Project window and selecting Create > Visual Effects > Visual Effect Graph.

↪Open the VFX Graph asset by double-clicking it in the Project window. This will open the VFX Graph editor.

↪In the VFX Graph editor, right-click in the graph view and select Create Node > Context > Spawn.

↪In the Spawn node, set the Spawn Count parameter to 10 and the Spawn Rate parameter to 1.

↪Right-click in the graph view again and select Create Node > Output > Output Particle System.

↪Connect the Spawn node to the Output Particle System node by dragging a connection from the Spawn node's output port to the Output Particle System node's input port.

↪Save the VFX Graph asset by pressing Ctrl+S or by selecting File > Save.

↪Create a new GameObject in the Scene view by right-clicking and selecting Create > Empty.

↪Add a Visual Effect component to the GameObject by selecting Add Component > Effects > Visual Effect.

↪In the Visual Effect component, select the VFX Graph asset that you just created.

↪Play the scene, and you should see particles being emitted from the GameObject's position.

Advanced Particle Systems

Now that you know how to create a basic particle system in VFX Graph let's explore some more advanced techniques that you can use to create more complex effects.

Particle Trails

Particle trails are a common effect used in games to create the illusion of movement.

They are often used for things like rockets, bullets, and other fast-moving objects.

To create a particle trail effect in VFX Graph, you can use the Trail Renderer node.

Here's how:

↪In the VFX Graph editor, right-click in the graph view and select Create Node > Renderer > Trail Renderer.

↪Connect the Trail Renderer node to the Spawn node by dragging a connection from the Spawn node's output port to the Trail Renderer node's input port.

↪In the Trail Renderer node, set the Trail Length parameter to 1 and adjust other parameters to your liking.

↪Save the VFX Graph asset and play the scene.

Particle Collisions

Particle collisions can add a sense of realism to particle systems by creating interactions between particles and other objects in the scene.

To create a particle collision effect in VFX Graph, you can use the Collision node.

Here's how:

↪In the VFX Graph editor, right-click in the graph view and select Create Node > Context > Collision.

↪Connect the Collision node to the Spawn node by dragging a connection from the Spawn node's output port to the Collision node's input port.

↪In the Collision node, adjust the Collision Type and other parameters to your liking.

↪Save the VFX Graph asset and play the scene.

Particle Textures

Using textures in particle systems can create more interesting and detailed effects.

To use textures in VFX Graph, you can use the Texture Sheet Animation node.

Here's how:

↪In the VFX Graph editor, right-click in the graph view and select Create Node > Texture > Texture Sheet Animation.

↪Connect the Texture Sheet Animation node to the Spawn node by dragging a connection from the Spawn node's output port to the Texture Sheet Animation node's input port.

↪In the Texture Sheet Animation node, select a texture sheet and adjust other parameters to your liking.

↪Save the VFX Graph asset and play the scene.

Particle Forces

Using forces in particle systems can create more dynamic and realistic effects.

To apply forces to particles in VFX Graph, you can use the Force Field node.

Here's how:

↪In the VFX Graph editor, right-click in the graph view and select Create Node > Context > Force Field.

↪Connect the Force Field node to the Spawn node by dragging a connection from the Spawn node's output port to the Force Field node's input port.

↪In the Force Field node, adjust the Force Type, Force Strength, and other parameters to your liking.

↪Save the VFX Graph asset and play the scene.

Custom Shaders

To create truly unique and customized particle effects, you can use custom shaders in your VFX Graph.

You can create a custom shader that defines how particles are rendered and then use it in your VFX Graph to create the desired effect.

Here's how:

↪Create a new shader asset by right-clicking in the Project window and selecting Create > Shader.

↪Write a custom shader using ShaderLab syntax that defines how particles are rendered.

↪In the VFX Graph editor, right-click in the graph view and select Create Node > Renderer > Custom.

↪Connect the Custom node to the Spawn node by dragging a connection from the Spawn node's output port to the Custom node's input port.

↪In the Custom node, select the custom shader asset you created earlier.

↪Save the VFX Graph asset and play the scene.

Audio Reactivity

You can use audio reactivity in your particle systems to create effects that respond dynamically to the game's sound effects and music.

To create an audio-reactive particle system in VFX Graph, you can use the Audio Spectrum node.

Here's how:

↪In the VFX Graph editor, right-click in the graph view and select Create Node > Context > Audio Spectrum.

↪Connect the Audio Spectrum node to the Spawn node by dragging a connection from the Spawn node's output port to the Audio Spectrum node's input port.

↪In the Audio Spectrum node, adjust the parameters to your liking.

↪Save the VFX Graph asset and play the scene with audio.

Conclusion

Unity's Visual Effect Graph provides a powerful and flexible framework for creating advanced particle systems that can add depth, detail, and immersion to your games.

By using techniques like particle trails, collisions, textures, and forces, you can create stunning visual effects that enhance the overall quality of your game.

So go ahead and experiment with Unity's VFX Graph to create your amazing particle systems!

Hope you like the Article, If you have any queries you can connect with our Unity Developers!