Square shaped layout border with round inside edges

Question

I’m attempting to create a layout border with corners that are square on the outside and round on the inside. I’ve gathered that I need to create an .xml drawable definition composed of two shapes: one with a stroke width and corner radius and another with a stroke width only:

The drawables

round_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="4dp" android:color="#FF000000" />
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />
    <corners android:radius="4dp" />
    <solid android:color="#FFC0C0C0" />
</shape> 

square_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="2dp" android:color="#FF000000" />
    <solid android:color="#FFC0C0C0" />
</shape> 

Each of these works independantly as a border when appliedby itself like so:

android:background="@drawable/round_border" 

but when they either or both are added to an item-list drawable like so:

composite_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <layer-list>
        <item android:drawable="@drawable/round_border"/>
        <!-- <item android:drawable="@drawable/square_border"/> -->
    </layer-list>
</shape> 

and:

android:background="@drawable/composite_border"

The layout's background is completely black instead of just a black border.

Does anyone know how to make the layer list work for this task?

Answer 1

From Shape Drawable Doc you can see that shape can't have layer-list inside so you should define your composite_border.xml like this

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/square_border"/>
    <item android:drawable="@drawable/round_border"/>
</layer-list>

note that I changed the order of your items inside the layer-list as stated in the documentation of layer-list
Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top
and you want it to be squared from outside

Answer 2

Create a xml file like round_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
   <solid 
       android:color="#CCCC33"/>
   <size 
       android:width="35dp"
        android:height="35dp"/>
</shape>

In the layout set as background

<LinearLayout
    android:id="@+id/layout_wellbeing"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:background="@drawable/rounded_corner_leuvan"
    android:orientation="horizontal" >
</LinearLayout>

Answer 3

square_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="2dp" 
            android:color="#FF000000"
    />
    <solid android:color="#FFC0C0C0" />
</shape>

composite_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <layer-list>
        <item android:drawable="@drawable/round_border"/>
        <!-- <item android:drawable="@drawable/square_border"/> -->
    </layer-list>
</shape>

watch out the comments and the quotation marks! =]

Answer 4

Try this will work fine enough:

solid is background color

stroke is border

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
   <solid 
       android:color="@color/white"/>
   <stroke android:width="1dp" android:color="#ffaaaaaa" />
   <size 
       android:width="15dp"
        android:height="15dp"/>
</shape>