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?

score 95 · Accepted Answer · answered Feb 13 '12 at 17:16

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>

score 18 · Answer 2 · answered Feb 06 '19 at 21:57

<?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>

score 5 · Answer 3 · answered Jul 14 '20 at 06:18

5

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"

answered Jul 14 '20 at 06:18

Harpreet

2,990
3
38
52

2

You might also want to add `android:backgroundTintMode="screen"` or some other mode. – Mike Hanafey May 14 '21 at 15:12

Kaediil · Answer 4 · 2012-02-13T17:07:15.320

-1

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>

edited Feb 13 '12 at 17:07

answered Feb 13 '12 at 16:58

Kaediil

5,465
2
21
20

I use a TextView, unfortunately, I need to put text inside – Waza_Be Feb 13 '12 at 17:02
1

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. – Kaediil Feb 13 '12 at 17:08

How to set a shape's background in xml?

4 Answers4

Linked