Constraints and modifier order. Learn to use a psychological mannequin to… | by Jolanda Verhoef | Android Builders | Feb, 2023

By watching the video you must have an excellent understanding of how constraints have an effect on the scale of composables, and the way modifiers have an effect on these constraints. On this part we’ll take a better have a look at some particular modifiers and the way they impression constraints.

measurement modifier

Let’s have a look at the next UI tree, that must be rendered in a container of 300dp by 200dp. The constraints are bounded, permitting widths between 100dp and 300dp, and heights between 100dp and 200dp.

The measurement modifier adapts the incoming constraints to match the worth handed to it, for instance150dp:

However what if the requested measurement is just too small or too huge? That’s, what if the width and top are smaller than the smallest constraint sure, or bigger than the biggest constraint sure?

On this case, the modifier will attempt to match the handed constraints as intently as it could possibly, whereas nonetheless adhering to the constraints handed in:

This additionally explains why chaining a number of measurement modifiers doesn’t work. The primary measurement modifier will set each the minimal and most constraints to a hard and fast worth, and although the second measurement modifier requests a smaller or bigger measurement, it nonetheless wants to stick to the precise bounds handed in, so it won’t override these values:

requiredSize modifier

For those who do want your node to override the incoming constraints, you’ll be able to exchange the measurement modifier with one other modifier known as requiredSize. It should exchange the incoming constraints and go the scale you specify as an alternative, as precise bounds. Then, when the scale is handed again up the tree, the kid node can be centered within the accessible house:

width and top modifiers

In earlier examples we used a measurement modifier, that adapts each width and top of the constraints. Nevertheless, we are able to additionally exchange these with the width modifier, that units a fastened width however leaves the peak undecided. Or we are able to use the top modifier, that units a fastened top however leaves the width undecided:

sizeIn modifier

For those who want fine-grained management over the constraints, and wish to adapt them to your precise wants, you should utilize the sizeIn modifier:

Now that we realized about constraints and the way they affect measurements, let’s return to our authentic use instances and discover the precise options.

Downside 1

/* Copyright 2023 Google LLC. 
SPDX-License-Identifier: Apache-2.0 */
Picture(
painterResource(R.drawable.frag), 
contentDescription = null,
Modifier
.fillMaxSize()
.measurement(50.dp)
)

Right here’s the answer:

• The fillMaxSize modifier adjustments the constraints to set each the minimal width and top to the utmost worth — 300dp in width, and 200dp in top.
• So although the measurement modifier desires to make use of a measurement of 50dp, it nonetheless wants to stick to the incoming minimal constraints. And thus the scale modifier can even output the precise constraint bounds of 300 by 200, successfully ignoring the worth offered within the measurement modifier.
• The Picture follows these bounds and reviews a measurement of 300 by 200, which is handed all the best way up.

Downside 2

/* Copyright 2023 Google LLC. 
SPDX-License-Identifier: Apache-2.0 */
Picture(
painterResource(R.drawable.frag), 
contentDescription = null,
Modifier
.fillMaxSize()
.wrapContentSize()
.measurement(50.dp)
)

Right here’s the answer:

• The fillMaxSize modifier will nonetheless behave the identical, and adapt the constraints to set each the minimal width and top to the utmost worth — 300dp in width, and 200dp in top.
• The wrapContentSize modifier resets the minimal constraints. So whereas fillMaxSize resulted in fastened constraints, wrapContentSize resets it again to bounded constraints. The next node can now take up the entire house once more, or be smaller than all the house.
• The measurement modifier units the constraints to minimal and most bounds of 50.
• The Picture resolves to a measurement of 50 by 50, and the measurement modifier forwards that.
• The wrapContentSize modifier has a particular property. It takes its little one, and places it within the middle of the accessible minimal bounds that have been handed to it. The scale it communicates to its dad and mom is thus equal to the minimal bounds that have been handed into it.

By combining simply three modifiers, we have been in a position to outline a measurement for our composable and middle it in its mother or father!

Downside 3

/* Copyright 2023 Google LLC. 
SPDX-License-Identifier: Apache-2.0 */
Picture(
painterResource(R.drawable.frag), 
contentDescription = null,
Modifier
.clip(CircleShape)
.padding(10.dp)
.measurement(100.dp)
)

Right here’s the answer:

• The clip modifier doesn’t change the constraints.
• The padding modifier lowers the utmost constraints.
• The measurement modifier units all constraints to 100dp.
• The Picture adheres to these constraints and reviews a measurement of 100 by 100dp.
• The padding modifier provides 10dp on all sizes, so it will increase the reported width and top by 20dp.
• Now within the drawing section, the clip modifier acts on a canvas of 120 by 120dp. Thus it creates a circle masks of that measurement.
• The padding modifier then insets its content material by 10dp on all sizes, so it lowers the canvas measurement to 100 by 100dp.
• The Picture is then drawn in that canvas. You possibly can see that the picture is clipped primarily based on the unique circle of 120dp, and thus we see a non-round outcome.

Wow, that was so much! You realized about constraints, and used them to purpose about modifiers, learn how to organize them, and measurements.

Within the subsequent publish we’ll present you the way you should utilize this info to start out implementing your individual customized structure.

Bought any questions? Depart a remark beneath or use the #MADCompose hashtag on Twitter and we’ll tackle your questions in our upcoming reside Q&A for the collection on March ninth. Keep tuned!