child view not fix parent shape

Question

I have a round corners layout, now I want to add a child view (an Imageview) which matches the parent layout's height and width.

My problem is that the child view hides the round corners of the parent.

How can I constrain it inside the borders of the parent layout without using the margin property, so that the parent's round corners stay visible?

PS: I created round corners of parent layout by overriding the onDraw() method.

My code:

protected void onDraw(Canvas canvas) {
    canvas.drawRect(0, 0, width, height, mpaint);
    super.onDraw(canvas);
}

Post the ondraw code, the problem you're having could possibly be fixed by changing some stuff there. Does the image fill the complete imageview? — Rolf ツ, Nov 02 '14 at 16:19
You could add some padding to your parent layout equal to the size of the corners. — Rolf ツ, Nov 02 '14 at 16:19

score 4 · Answer 1 · answered Apr 06 '17 at 06:45

4

In my opinion, you can put your child views into a CardView(in support v7), which is actually a FrameLayout, but it handle the corners by just set one line of code:

app:cardCornerRadius="3dp"

It can clip the corner with the radius you set no matter what the child views are.

answered Apr 06 '17 at 06:45

DysaniazzZ

825
15
29

Good one! Worked! In case, if you don't want shadow, set app:cardElevation="0dp" – Virat18 Apr 13 '18 at 08:41

score 0 · Answer 2 · answered Nov 02 '14 at 17:44

0

I suggest you add padding to the "rounded corner" view. This could be padding on all sides, bottom and top or left and right. Depending on what suits you the best.

I can't think of a more simple method than this. Your onDraw method looks fine, first the background than the child views.

answered Nov 02 '14 at 17:44

Rolf ツ

8,611
6
47
72

I have to add padding in ondraw method of layout or childview, my UI is created in code – Newbie Nov 03 '14 at 14:51
Switch to xml layouts if you can, it's better maintainable. – Rolf ツ Nov 03 '14 at 15:01
cause I not only create layout in rounded corners , but also in many shapes – Newbie Nov 03 '14 at 16:06
Why dont u use setPadding() in the constructor of your custom view? – Rolf ツ Nov 03 '14 at 16:08
Oh, why didnt I think about it earlier?, I'll try it, thank you so much :D – Newbie Nov 03 '14 at 16:19

score 0 · Answer 3 · edited May 23 '17 at 11:46

When you add a child to your ViewGroup, that child is being drawn on top of your ViewGroup, thus your rounded corner doesn't take effect.

In order to achieve your goal you have to perform clipping on a certain path in your layout. That sounds a bit complicated, but in fact it is not.

Essentially, you can understand clipping as "cutting off" some part from your layout.

RectF rect = new RectF(0, 0, width, height);
path = new Path();
path.addRoundRect(rect, cornerRadius, cornerRadius, Direction.CW);

canvas.clipPath(path); // clipping here
// now anything that is outside this path will be "clipped", i.e. not drawn

You can refer to this for a complete source code.

child view not fix parent shape

My code:

3 Answers3