2

MaterialCardView clips its children when using rounded corners. If I use cardCornerRadius = true (which rounds all 4 corners of the card), the clipping behaves as expected -> children are not being drawn outside of the rounded area. If I try to round less corners (ie. only top corners, using ShapeAppearanceModel), then the clipping part is lost -> a top positioned child will be drawn over the rounded cornered area).

I realised that clip MaterialCardView calls setClipToOutline(shapeAppearanceModel.isRoundRect(getBoundsAsRectF())); inside of setShapeAppearanceModel, where isRoundRect returns true only if all four corners are rounded, so I tried applying clipToOutline = true on the MaterialCardView after setting the shapeAppearanceModel with top corners rounded, but with no similar result - children were still able to be drawn over the rounded part of the parent card.

What is actually triggering the clipping part and how can I force it on a top rounded shaped MaterialCardView?

LE: trial and error code:

// card is MaterialCardView
card.shapeAppearanceModel =   
    ShapeAppearanceModel()
        .toBuilder()
        .setTopRightCorner(CornerFamily.ROUNDED, cornerPx) // cornerPx = 24dp in pixels
        .setTopLeftCorner(CornerFamily.ROUNDED, cornerPx)
        .build()

card.apply {
    preventCornerOverlap = true
    clipChildren = true
    clipToOutline = true
}
card.invalidateOutline()
DoruAdryan
  • 1,314
  • 3
  • 20
  • 35

1 Answers1

0

Apply the following configurationsif you use shape appearance overlay in order to prevent the childs to overlapping from the corners:

  • Set cardPreventCornerOverlap to true
  • Then leave everything else that has to do with the corner settings as default (just delete the values from the textboxes in the design mode).

Then you should see something like this: enter image description here

Kozmotronik
  • 2,080
  • 3
  • 10
  • 25
  • Unfortunately, that adds an extra padding, as you can see in your pic. I have a top child which should draw it's background full card width, and just be clipped card rounded corners. Also, as per docs, and what I've seen in the code, that should be enabled to work with pre-Lollipop versions, but mine's not the case (I use min Android 5). – DoruAdryan Apr 13 '22 at 10:58
  • There are no extra paddings in the source of that picture. But as far as I understand, you have a child of cardview but don't want it to be padded within the rounded corners. You want that the child to be expanded to the full width and be clipped from the corners. Is this what you want? – Kozmotronik Apr 13 '22 at 11:27
  • You're supposed to give some details; share what you did, share an example image of what you want to achieve etc.. – Kozmotronik Apr 13 '22 at 11:29
  • Updated with what I've tried. The card is adding some inner padding between rounded corners and children views. (in your screenshot, you can see that the rect bounds of the child (containing Not connected label) are not as large as the width of the card. – DoruAdryan Apr 13 '22 at 15:15
  • I have seen your code, by the way is it Kotlin? Does [this post](https://stackoverflow.com/a/31300964/12749998) answer your question? – Kozmotronik Apr 13 '22 at 19:13