Mask layout with rounded corner xml shape

Question

I have this LinearLayout:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="70dp"
        android:src="@drawable/ic_launcher"
        android:scaleType="centerCrop"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="#FFD800"
        android:textColor="@android:color/black"
        android:gravity="center"
        android:text="Text View"/>
</LinearLayout>

enter image description here

And I want to mask it with rounded corner, like this:

enter image description here

I tried to put it in a FrameLayout with another layout with shape.xml on top of it,

But the most I got was:

enter image description here

or

enter image description here

I'm looking for a way to use shape.xml background,

But with transparent inside the border, and white color outside.

My shape.xml:

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
    android:color="#FFFFFF">
</solid>

<stroke
android:width="2dp"
android:color="#000000" >
</stroke>

<padding
    android:left="5dp"
    android:top="5dp"
    android:right="5dp"
    android:bottom="5dp">
</padding>

<corners
    android:radius="50dp">
</corners>
</shape>

Do you want to mask the whole layout with round corner xml ? Please post your whole xml layout file code. — GrIsHu, Sep 10 '14 at 11:11
@GrlsHu Yes, I want to mask the whole layout with corner xml. (Added my layout) — David, Sep 10 '14 at 12:04

score 6 · Accepted Answer · answered Sep 10 '14 at 11:26

6

Create a nine-patch with white rounded corners outside, transparent in the middle, ("inverse nine-patch") and put it on top on your LinearLayout. This is a common practice.

answered Sep 10 '14 at 11:26

konmik

3,150
19
15

Don't know if it's the best answer, but it's the only one that really works. Thanks. – David Sep 10 '14 at 12:31

semsamot · Answer 2 · 2014-09-10T12:47:58.213

0

Just remove <solid> tag from your shape. Then apply that shape to the background of your LinearLayout.

Because the <solid> tag specifies the fill color of your shape. Without that tag the center of your shape will be fully transparent. So it will look just like a border.

edited Sep 10 '14 at 12:47

answered Sep 10 '14 at 10:47

semsamot

805
9
11

score 0 · Answer 3 · answered Sep 10 '14 at 11:13

Tried out below xml file

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <stroke
        android:width="1dp"
        android:color="#4a6176" />

    <padding
        android:left="10dp"
        android:right="10dp"
         />

    <corners android:radius="6dp" />

</shape>

score -2 · Answer 4 · answered Sep 10 '14 at 10:22

-2

make your layout background like this: android:background="@drawable/shape"

answered Sep 10 '14 at 10:22

Shvet

1,159
1
18
30

Mask layout with rounded corner xml shape

4 Answers4

Linked