https://kotlinlang.org logo
#compose
Title
# compose
m

Mohamed Elfiky

09/24/2020, 1:27 AM
what is the difference between
Copy code
modifier.clip(RoundedCornerShape(20.dp).background(Color.White)
and
Copy code
modifier.background(color = Color.White, shape = RoundedCornerShape(20.dp))
n

Nader Jawad

09/24/2020, 1:42 AM
Drawing a shape will always be cheaper than clipping a shape
m

Mohamed Elfiky

09/24/2020, 1:44 AM
but is this the same effect?
n

Nader Jawad

09/24/2020, 1:44 AM
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
m

Mohamed Elfiky

09/24/2020, 1:47 AM
then if i add padding after background with shape i think then that is better than clipping, am i right
n

Nader Jawad

09/24/2020, 1:50 AM
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
m

Mohamed Elfiky

09/24/2020, 1:50 AM
but if i want to make the children take the shape of its parent then clipping is what i should use
n

Nader Jawad

09/24/2020, 1:51 AM
Strictly speaking clipRect is much cheaper than clipPath but if you can avoid clipping that would be best
Yes if you want the children to match the shape of the parent then yes you would need to clip
m

Mohamed Elfiky

09/24/2020, 1:52 AM
thanks very much that was helpful
👍 3
c

Colton Idle

09/24/2020, 3:13 AM
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?
n

Nader Jawad

09/24/2020, 3:15 AM
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.
👍 2
m

Mohamed Elfiky

09/24/2020, 3:30 AM
could i ask how to clip using clipRect, from what i see clip takes only shape
n

Nader Jawad

09/24/2020, 3:37 AM
That will happen if either you use
Modifier.clipToBounds
or
Modifier.clip(RectangleShape)
👍 1
This ends up calling into the clipToBounds API on View/RenderNode in the framework
m

Mohamed Elfiky

09/24/2020, 3:50 AM
using
Modifier.clipToBounds
will not work with the shape in the
modifier.background
write? and does
RoundedCornerShape
have the same effect as
RectangleShape
n

Nader Jawad

09/24/2020, 3:51 AM
Yes
Modifier.clipToBounds
will not achieve the effect you are looking for as you are using rounded corners.
RoundedCornerShape
will have rounded corners with the specified radii but
RectangleShape
will have squared off corners (not rounded)
m

Mohamed Elfiky

09/24/2020, 3:55 AM
thanks a lot.
👍 1