how to make a rounded corners for an image in image view using XML layout in android

Question

I have tried many times but i know that i am missing something,could you Guys please explain it.. Following is what, i have tried

    <ImageView
        android:id="@+id/Dicimage"
        android:layout_width="130px"
        android:layout_height="100px"
        android:src="@drawable/slang"
        android:background="@drawable/corner"
        android:padding="1dp"/>

Created Corner XML in resource folder

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

<stroke android:width="0dp"
        android:color="#ff000000"/>

<padding android:left="2dp"
         android:top="2dp"
         android:right="2dp"
         android:bottom="2dp"/> 

<corners android:radius="30px"/> 
   </shape>

What i am getting is, the border is only rounded rectangle but the image is still rectangle in shape

Please check this [link][1] [1]: http://stackoverflow.com/questions/3263611/border-for-an-image-view-in-android — Praveen, Mar 23 '12 at 10:08

score 4 · Answer 1 · answered Jul 15 '14 at 17:48

4

No, that is not possible. You have to do it programmatically.

What you are doing is create rounded corners background and draw the drawable over it.

Here's the great article of how to create rounded corners image from Romain Guy: http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/

answered Jul 15 '14 at 17:48

Pongpat

13,248
9
38
51

1

The link is broken, could you add the essential information please? – Nov 11 '16 at 19:44

score 3 · Answer 2 · answered Feb 15 '19 at 15:40

you can add your ImageView in a CardView with attribute cardElevation=0

<android.support.v7.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/thumbnail_card"
                card_view:cardCornerRadius="15dp"
                card_view:cardElevation="0dp"
                android:layout_margin="10dp">


            <ImageView
                android:id="@+id/thumbnail"
                android:layout_width="110dp"
                android:layout_height="75dp"
                android:scaleType="centerCrop" />

            </android.support.v7.widget.CardView>

score 2 · Answer 3 · answered Apr 26 '18 at 08:29

2

Use that xml file as foreground

I mean, instead of

android:background="@drawable/corner"

Use this

android:foreground="@drawable/corner"

answered Apr 26 '18 at 08:29

Emre AYDIN

724
8
10

have you found a workaround for api below 23? i also occurred this strange looks on the corner see [here](https://stackoverflow.com/a/59830197/3763032) @emre-aydin – mochadwi Jan 20 '20 at 20:14
Attribute android:foreground has no effect on API levels lower than 23 – Aathil Ahamed Dec 30 '20 at 08:41

score 2 · Answer 4 · answered Feb 05 '19 at 10:15

You should add this code as some_foreground.xml to drawable folder.

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <stroke
                    android:width="8dp"
                    android:color="@color/white" />
            </shape>
        </item>
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/padding_margin_8" />
                <stroke
                    android:width="8dp"
                    android:color="@color/white" />
            </shape>
        </item>
    </layer-list>

And then you can use this as foreground for your ImageView. You should add this like:

<ImageView
        android:id="@+id/event_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:foreground="@drawable/some_foreground"
        android:scaleType="centerCrop"
        android:src="@drawable/your_image" />

score 2 · Answer 5 · edited May 23 '17 at 12:16

2

TRy this :

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

    <stroke android:width="3dp"
            android:color="#ff000000"/>

    <padding android:left="1dp"
             android:top="1dp"
             android:right="1dp"
             android:bottom="1dp"/> 

    <corners android:radius="30px"/> 
</shape>

Taken from this Post : Android ImageView with Rounded Corners not working

edited May 23 '17 at 12:16

Community

1
1

answered Mar 23 '12 at 10:06

Nibha Jain

7,742
11
47
71

It seems to be With the help of coding only we can do..Got the result.but trying without coding part – Kalai Selvan.G Mar 23 '12 at 10:49

score 1 · Answer 6 · answered Sep 13 '18 at 08:22

Here's a super late answer but if you're trying to create a circular ImageView:

Create a drawable in drawable folder called circle:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="@android:color/black"/>
    <size
        android:height="60dp"
        android:width="60dp"/>
</shape>

ImageView:

<ImageView
    android:id="@+id/Dicimage"
    android:layout_width="130px"
    android:layout_height="100px"
    android:src="@drawable/slang"
    android:background="@drawable/circle"
    android:padding="1dp"/>

how to make a rounded corners for an image in image view using XML layout in android

6 Answers6

Linked