Rounded Inner corners with transparent inside frame

Question

I am trying to make a frame from code so that I can apply it to make rounded inner corners with a solid fill outside and transparent inside. Just like a solid rectangle with transparent oval inside. picture attached. I have tried few shape combinations all that available online displays the corners outside.

enter image description here

The inside should be transparent not white. The image is taken from this post but the solution presented here is not what I am looking for I dont want to use a 9 patch drawable but would like to be created in code.

Please valid answers only.

Nima K · Answer 1 · 2014-05-28T10:24:48.443

60

create the following rounded_corner.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="-10dp"
        android:left="-10dp"
        android:right="-10dp"
        android:top="-10dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="10dp"
                android:color="#ffffff" />
            <corners android:radius="20dp" />
        </shape>
    </item>
</layer-list>

add this below your imageView, which you want to apply the frame on it:

<View
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignBottom="@+id/my_image_view"
    android:layout_alignLeft="@id/my_image_view"
    android:layout_alignRight="@+id/my_image_view"
    android:layout_alignTop="@id/my_image_view"
    android:background="@drawable/rounded_corner" />

edited May 28 '14 at 10:24

answered May 28 '14 at 10:13

Nima K

995
1
8
15

2

this is the best answer. Thanks! – joseph Mar 16 '16 at 06:56
It's working great, but I don't understand why, can you explain please? – Chol May 13 '16 at 10:33
It is drawing a bigger 'oval stroke' on the rectangle that covers the rectangle's corners. – Nima K May 13 '16 at 15:31
Exactly what I have been looking for! – EZDsIt Jul 06 '16 at 21:59

score 24 · Accepted Answer · edited Feb 02 '17 at 01:54

First of all, create 3 xml layout in drawable folder:

First: frame.xml
Second: frame_build.xml
Third: red.xml

(You can change this name as you wish),

frame.xml:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="20dp" android:drawable="@drawable/red" android:top="-25dp" />
    <item android:bottom="15dp" android:drawable="@drawable/frame_build" android:top="5dp" android:left="-5dp" android:right="-5dp" />
</layer-list>

frame_build.xml :

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <corners android:radius="40dp" />
</shape>

red.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="40dp" android:height="40dp" android:color="#B22222" />
    <padding android:left="8dp" android:top="-1dp" android:right="8dp" android:bottom="9dp" />
    <corners android:radius="-10dp" />
</shape>

Finally refer your view or layout to Frame XML as follow :

  android:background="@drawable/frame"

This tested and output as below image:

Output image

Hope this help .

Seems like what I just need, let me try then I'll mark it as answer — user606669, Jun 27 '12 at 13:36
I've tried but its a black background not a transparent am I doing something wrong. I am using it in a framelayout and it should show the frames below it. — user606669, Jun 27 '12 at 16:32
@user606669 add the same color for both framelayout and frame_build.XML , this will gave you the transparancy — Android Stack, Jun 27 '12 at 22:48
@AndroidStack can you please explain the relation between the numbers, or use constants instead? — android developer, May 20 '13 at 08:44

Zain · Answer 3 · 2019-08-29T16:24:57.670

tweaking @Nima K solution, to avoid using an extra View

create frame.xml @ drawable

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

    <item
        android:bottom="-10dp"
        android:left="-10dp"
        android:right="-10dp"
        android:top="-10dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="20dp"
                android:color="@color/frame_color" />
            <corners android:radius="30dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />

            <stroke
                android:width="20dp"
                android:color="@color/frame_color" />

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

    </item>

</layer-list>

Then use it with 'android:background' attribute of your view

<TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/frame" />

And this is the result

score 0 · Answer 4 · answered Feb 24 '21 at 13:50

Maybe more simply;

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:inset="-6dp">

    <shape android:shape="rectangle">
        <solid android:color="#FFFFFF" />

        <stroke android:width="12dp"
            android:color="#000000" />
    
        <corners android:radius="16dp" />
    </shape>
</inset>

Rounded Inner corners with transparent inside frame

4 Answers4

Linked