what is the difference between ```modifier.clip(RoundedCornerShape(20.dp).background(Color.White)```...

# compose

[Mohamed Elfiky]

what is the difference between

modifier.clip(RoundedCornerShape(20.dp).background(Color.White)

and

modifier.background(color = Color.White, shape = RoundedCornerShape(20.dp))

[Nader Jawad]

Drawing a shape will always be cheaper than clipping a shape

[Mohamed Elfiky]

but is this the same effect?

[Nader Jawad]

Clipping is more expensive and can produce some aliasing artifacts on older API levels. If you just want to draw a shape it would be better to draw it outright

[Mohamed Elfiky]

then if i add padding after background with shape i think then that is better than clipping, am i right

[Nader Jawad]

Yes padding just changes the drawing bounds and does not clip. Compose does not clip UI components by default as opposed to the Android View system which always clips to bounds

[Mohamed Elfiky]

but if i want to make the children take the shape of its parent then clipping is what i should use

[Nader Jawad]

Strictly speaking clipRect is much cheaper than clipPath but if you can avoid clipping that would be best

[Nader Jawad]

Yes if you want the children to match the shape of the parent then yes you would need to clip

[Mohamed Elfiky]

thanks very much that was helpful

[Colton Idle]

Interesting convo and just following along. I don't know how much more expensive one technique is over the other, but I could see myself doing this in the future. Is a lint check or something like that possible here?

[Nader Jawad]

Not sure if this is possible with a lint check because it is valid to use a clip with a shape and for various use cases it is the only solution. Prefer drawing a shape if you can and if you need to clip, clipping to a rectangle via clipRect is fairly cheap however clipPath is more expensive and can have visual artifacts on older API levels.

[Mohamed Elfiky]

could i ask how to clip using clipRect, from what i see clip takes only shape

[Nader Jawad]

That will happen if either you use Modifier.clipToBounds or Modifier.clip(RectangleShape)

[Nader Jawad]

This ends up calling into the clipToBounds API on View/RenderNode in the framework

[Mohamed Elfiky]

using Modifier.clipToBounds will not work with the shape in the modifier.background write? and does RoundedCornerShape have the same effect as RectangleShape

[Nader Jawad]

Yes Modifier.clipToBounds will not achieve the effect you are looking for as you are using rounded corners.

[Nader Jawad]

RoundedCornerShape will have rounded corners with the specified radii but RectangleShape will have squared off corners (not rounded)

[Mohamed Elfiky]

thanks a lot.