Android: ScrollView with rounded corners. Child views bleeding out over corners

Question

I have a scrollView with rounded corners. In the ScrollView is a LinearLayout that has the same drawable with rounded corners. This is all working fine. I have a scrolling container with rounded edges. I am adding children to the LinearLayout(vertical) that have square edges. I am looking for a way to have them stay square while in the middle of the LL, but be cropped when they approach the bottom or the top. Basically, I want them to not bleed out over the rounded corners as they are now.

My initial idea was to canvas.clipPath around the edges of the LL in hopes that the interior children would not be drawn there. That did not work out. Any ideas?

Since you are discussing images here, it would be tremendously helpful if you can include some schematic diagrams of what you expect, what you achieved so far, etc. — Neoh, May 20 '13 at 15:34

score 0 · Answer 1 · answered May 20 '13 at 17:11

0

I would recommend using a Frame Layout. What you can do is have a square ScrollView, but add a rounded frame as a mask. It should be much more memory efficient as well. Just blend the mask into the background, and you should be good to go.

answered May 20 '13 at 17:11

dberm22

3,187
1
31
46

1

Thanks dberm22. Yeah, I've seen solutions similar to this, but my background is changing constantly, so I wouldn't be able to blend it in. I was just trying to find a way to clip off the corners and tell the LL to not draw outside of that. Hmnn. This is a sticky one. – Mick0311 May 20 '13 at 17:16

score -1 · Answer 2 · answered Jan 15 '20 at 08:55

If you need your LinearLayout to be with rounded corners, you may use the answer from this question. It says, that you need to define background xml file in your res/drawable folder like so:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dp" android:color="#B1BCBE" />
    <corners android:radius="10dp"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>

and use it in your linearlayout background:

<LinearLayout
    ...
    android:background="@drawable/layout_bg"/>

Android: ScrollView with rounded corners. Child views bleeding out over corners

2 Answers2