Rounded Inner corners with transparent inside fram

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.

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.

Answer 1

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" />

Answer 2

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

Answer 3

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

1. First: frame.xml
2. Second: frame_build.xml
3. 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:

Hope this help .