How to set a shape's background in xml?

Question

I just created a red circle using android shapes:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="4"
    android:shape="ring"
    android:thicknessRatio="9"
    android:useLevel="false" >

     <solid android:color="#FF0000" />

    <size
        android:height="48dip"
        android:width="48dip" />

</shape>

This is really cool, but I cannot set the background color of the circle to my color. I tried android:background="#FFFFFF" but it always appear to be black in my layout. How can I set the background of the above shape?

Pirouette

Answer 1

I think a layer-list might help you:

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

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item>
        <shape
            android:innerRadiusRatio="4"
            android:shape="ring"
            android:thicknessRatio="9"
            android:useLevel="false" >
            <solid android:color="#FF0000" />
            <size
                android:height="48dip"
                android:width="48dip" />
        </shape>
    </item>

</layer-list>

Miff

Answer 2

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

    <corners android:radius="12dp" />
    <solid android:color="#ffffff" />
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />

</shape>

Nagano

Answer 3

I am just adding helpful research as an answer. Let us suppose you have a shape as the answer described by @GeneBo and you are looking forward to re-using that shape but with a different solid color. So all you need to do in your widget is:

android:background="@drawable/your_shape_to_reuse"
android:backgroundTint="@color/new_background_color_you_need"

Sheepshead

You might also want to add android:backgroundTintMode="screen" or some other mode. – Vip

Answer 4

Ok, how about this?

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    >

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:background="#FFFFFF">
<TextView android:text="Foo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:gravity="center"
    android:background="@drawable/red_circle"/>
    </LinearLayout>


</LinearLayout>

Savior

I use a TextView, unfortunately, I need to put text inside – Pirouette

I just posted an update that sort of works, but the circle gets cut off top and bottom unfortunately. I would have to play for a bit more to get it to expand completely. – Savior