Add a background image to shape in XML Android

Question

How do you add a background image to a shape? The code I tried below but no success:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
//here is where i need to set the image
<solid android:color="@drawable/button_image"/>
    <corners
     android:bottomRightRadius="5dp"
     android:bottomLeftRadius="5dp"
     android:topLeftRadius="5dp"
     android:topRightRadius="5dp"/>
 </shape>

You need to extend and create a custom shaped class. Look into RoundedImageView for example. It creates a round imageview so whatever iamge you set as background to it, it will appear as rounded — Rahul Gupta, Jan 08 '14 at 17:18

score 270 · Accepted Answer · edited Jan 14 '19 at 13:48

270

Use following layerlist:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" android:padding="10dp">
            <corners
                 android:bottomRightRadius="5dp"
                 android:bottomLeftRadius="5dp"
                 android:topLeftRadius="5dp"
                 android:topRightRadius="5dp"/>
         </shape>
   </item>
   <item android:drawable="@drawable/image_name_here" />
</layer-list>

edited Jan 14 '19 at 13:48

Quentin Doutriaux

165
3
5

answered Jan 08 '14 at 17:19

vipul mittal

17,343
3
41
44

9

Thanks,this did work however the edges are no longer rounded? – DevC Jan 08 '14 at 19:24
do you want Image with round edges?? because it seems your shape does not have any color – vipul mittal Jan 08 '14 at 19:27
1

My shape did have a white color and rounded edges. I thought the rounded edges would remain if I removed the color and used an image instead. If this is not possible that is ok – DevC Jan 08 '14 at 21:43
1

so image with rounded corners , not possible? – bvsss Oct 30 '14 at 08:08
It is possible but you need to programmatically round the corners of the image. see this http://stackoverflow.com/questions/2459916/how-to-make-an-imageview-with-rounded-corners – vipul mittal Oct 30 '14 at 08:18
how can I make the background the same size as the layout? Because with the above the background stretches the full screen and not within the layout width/height. – Si8 Dec 05 '16 at 11:33
Is this possible to have the image item set dynamically? I don't have my image in a drawable folder – Gil Sand Sep 16 '19 at 11:42
I does not work when the image is a vector asset (xml) though – Anubhav Malik Aug 20 '20 at 07:54
The corners are not rounded – DIRTY DAVE May 23 '21 at 17:00
This worked like a charm for a simple flavour thing i wanted to achieve for a drawable background. – sud007 Mar 27 '23 at 17:57

score 229 · Answer 2 · edited Dec 24 '22 at 20:31

229

I used the following for a drawable image with a circular background.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
    <item
        android:drawable="@drawable/ic_select"
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp"/>
</layer-list>

Here is what it looks like

edited Dec 24 '22 at 20:31

starball

20,030
7
43
238

answered Jul 24 '15 at 19:44

Ray Hunter

15,137
5
53
51

Is there something to set the gravity of the image. – Sagar Devanga Dec 16 '15 at 08:22
@SagarDevanga for the drawable in the code above or when you include the image in your layout? – Ray Hunter Dec 18 '15 at 14:54
Firstly, I tried to use height and width to set the internal icon to 24dp (its actual size). This resized perfectly on the Preview in AS but had no effect on the tablet. Therefore I used your method. I set the height and width of the shape to 40dp and then top, bottom, left and right of the icon item to 8dp each. (40-24)/2=8. However, the resulting image looks the right size but is blurry, which I suspect is due to some kind of re-sizing of the PNG. Any suggestions? – Luke Allison Mar 03 '16 at 12:33
TLDR; how would you create your image above with a 40dp diameter circle and a 24dp icon without losing image quality? – Luke Allison Mar 03 '16 at 12:39
@LukeAllison how are you adding the icon to you UI and how big is the image that you are placing in the oval? – Ray Hunter Mar 04 '16 at 15:18
I solved my problem by using a better method. http://stackoverflow.com/questions/35773226/icon-image-in-circle-shape-is-blurry/35773744#35773744 – Luke Allison Mar 06 '16 at 11:38
Is would have looked awesome with a shadow – DJphy Jul 08 '16 at 12:48
well done, thanks @SagarDevanga you can set gravity as well android:gravity="center" – Sujeet Kumar Mehta Jul 26 '16 at 05:44
What about this question: http://stackoverflow.com/questions/41100470/android-buttons-with-shape-background-or-image – CodeMonkey Dec 12 '16 at 12:14
This actually just creates a round background with the square icon inside it. This requires the dimensions of the icon to be smaller than the diameter of the circle. If you want the icon to scale to be larger, this won't work. – jungledev Jul 01 '19 at 09:38
@jungledev share what code you have. The image posted is what it generates. Perhaps your drawable is different. – Ray Hunter Jul 02 '19 at 14:19
@RayHunter, I was able to create the shape you posted with your code. What I'm saying is that your code doesn't do what I need to do. I need to round the corners of an icon (in other words, *decrease* the area of the icon). What your code does is that it adds a round shape to the icon, thus enlarging the total area of it. This matters if you need the icon image to be a certain size proportional to its dimensions. – jungledev Jul 04 '19 at 08:40
@jungledev have you posted a question? If so, can you share the link to the question. I have created rounded corners on icons. – Ray Hunter Jul 07 '19 at 01:15

score 21 · Answer 3 · answered Dec 04 '14 at 09:47

21

This is a circle shape with icon inside:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ok_icon"/>
    <item>
        <shape
                android:shape="oval">
            <solid android:color="@color/transparent"/>
            <stroke android:width="2dp" android:color="@color/button_grey"/>
        </shape>
    </item>
</layer-list>

answered Dec 04 '14 at 09:47

anagaf

2,120
1
18
15

more perfect for who want to show caret image and border – Md. Rashidul Hasan Jun 05 '15 at 05:53

mohsen · Answer 4 · 2023-06-21T14:44:32.147

This is a corner image :

1- overlay drawable by stroke

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

    <item
        android:drawable="@drawable/img_main_blue"
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <item>
        <shape
            android:padding="10dp"
            android:shape="rectangle">
            <corners android:radius="10dp" />
            <stroke
                android:width="5dp"
                android:color="@color/white" />
        </shape>

    </item>
</layer-list>

2- hide the image inside a corner background

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:radius="5dp" />
            <solid android:color="#1D1D19" />
        </shape>

    </item>
    <item
        android:drawable="@drawable/movie_card_place_holder"
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</layer-list>

this is just color overlay the drawable item. for who need image with stroke, this is perfect solution — Yohanim, Aug 05 '21 at 12:47

score 5 · Answer 5 · answered Dec 15 '15 at 12:15

I used the following for a drawable image with a border.

First make a .xml file with this code in drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="@color/orange"/>
    </shape>
</item>
<item
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">
    <shape android:shape="oval">
        <solid android:color="@color/white"/>
    </shape>
</item>
<item
    android:drawable="@drawable/messages" //here messages is my image name, please give here your image name.
    android:bottom="15dp"
    android:left="15dp"
    android:right="15dp"
    android:top="15dp"/>

Second make a view .xml file in layout folder and call the above .xml file with this way

<ImageView
   android:id="@+id/imageView2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/merchant_circle" />  // here merchant_circle will be your first .xml file name

score 1 · Answer 6 · edited Oct 31 '17 at 18:44

Here is another most easy way to get a custom shape for your image (Image View). It may be helpful for someone. It's just a single line code.

First you need to add a dependency:

dependencies {
    compile 'com.mafstech.libs:mafs-image-shape:1.0.4'   
}

And then just write a line of code like this:

Shaper.shape(context, 
       R.drawable.your_original_image_which_will_be_displayed, 
       R.drawable.shaped_image_your_original_image_will_get_this_images_shape,
       imageView,
       height, 
       weight);

Add a background image to shape in XML Android

6 Answers6

I used the following for a drawable image with a border.

First make a .xml file with this code in drawable folder:

Second make a view .xml file in layout folder and call the above .xml file with this way

Linked

Related