ImageView in circular through XML

Asked 28/2, 2014 at 21:5 Answered 15/7, 2022 at 11:10

Solved android xml imageview

299

I'd Like to make any image from my ImageView to be circular with a border.

I searched but couldn't find any useful information (anything that I tried didn't work).

How can I achieve this through XML: Create an ImageView with certain src and make it circular with a border?

Figment answered 28/2, 2014 at 21:5 Comment(3)

How to change the src of ImageView in java code? – Bequest 22/10, 2014 at 14:12

Good simple solution here https://mcmap.net/q/50221/-how-to-crop-circular-area-from-bitmap-in-android - all in Java, so you can apply this formatting dynamically to images at runtime – Giacopo 22/12, 2016 at 0:40

You have to put your ImageView inside the CardView because CardView only has a feature of accessing the corner radius attribute. – Amour 18/3, 2020 at 8:30

253

You can make a simple circle with white border and transparent content with shape.

// res/drawable/circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="10dp"
        android:color="@android:color/white" />
</shape>

Then make a layerlist drawable and put it as background to your imageview.

// res/drawable/img.xml

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

    <item android:drawable="@drawable/circle"/>    
    <item android:drawable="@drawable/ic_launcher"/>

</layer-list>

and put it as background to your imageview.

   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/img"/>

You'll have something like that.

enter image description here

Conveyor answered 28/2, 2014 at 21:7 Comment(15)

And then I set that shape to the background of my imageview? I've tried that but didn't work. My image still rectangular :( – Figment 28/2, 2014 at 21:18

you have a rectangular image and you want clip around it like a circle shape? – Conveyor 28/2, 2014 at 21:20

yes, using XML, because using java code is very expensive to the mobile. With this code it only appears a circle behind my image, not the image itself being a circle. I presume is for the border, I want the image to me rounded in a circle within this one – Figment 28/2, 2014 at 21:25

But still something wrong. Besides the image has the circular border in front, it's not transparent outside the circle. I mean, the circle is there, however, the image corners are visible and transcends the circle area behind it – Figment 28/2, 2014 at 22:13

add another shape in to the layerlist, but this time it should be rectangle with borders, it will cover corners with white – Conveyor 28/2, 2014 at 22:47

in graphical layout it is showing rounded corners but, when i load images from network it is loading as rectangle only – Petrel 4/7, 2014 at 9:52

which image loading lib do you use or how do you load images? – Conveyor 4/7, 2014 at 11:1

How can I define the size of layer list? – Sarre 8/8, 2014 at 5:58

How to change the src of ImageView in java code if I adopt this way? – Bequest 22/10, 2014 at 14:10

What if I want to use RemoteView (of AppWidget) ? Would it still be possible using this? Maybe even as 2 views (on on top of another) ? – Impound 17/5, 2015 at 8:16

Copying these xml's leads to some ugly view with white bars and totally malformed things and no visible image at all. – Bloodstream 22/8, 2016 at 7:46

If I understand this solution correctly, it covers the unwanted portions of the image with a solid color. It does not removes the unwanted portions like a stencil would do. Is this correct? – Newfeld 20/3, 2017 at 11:19

why am I getting a line from the border to the center. (radius)?.. how can I delete it.. tried different settings but still there – Sexy 20/6, 2018 at 15:9

@Sexy that is a bug in the preview. It is not visible on the device – Eaves 27/6, 2018 at 7:41

Unfortunately it didn't work with Picasso images caught from an URL. – Maidstone 13/4, 2019 at 22:31

370

This is the simplest way that I designed. Try this.

dependencies

implementation 'androidx.appcompat:appcompat:1.3.0-beta01'

implementation 'androidx.cardview:cardview:1.0.0'

 <android.support.v7.widget.CardView
     android:layout_width="80dp"
     android:layout_height="80dp"
     android:elevation="12dp"
     android:id="@+id/view2"
    app:cardCornerRadius="40dp"
     android:layout_centerHorizontal="true"
     android:innerRadius="0dp"
     android:shape="ring"
     android:thicknessRatio="1.9">
     <ImageView
         android:layout_height="80dp"
         android:layout_width="match_parent"
         android:id="@+id/imageView1"
         android:src="@drawable/YOUR_IMAGE"
         android:layout_alignParentTop="true"
         android:layout_centerHorizontal="true">
     </ImageView>
  </android.support.v7.widget.CardView>

If you are working on android versions above lollipop

 <android.support.v7.widget.CardView
 android:layout_width="80dp"
 android:layout_height="80dp"
 android:elevation="12dp"
 android:id="@+id/view2"
 app:cardCornerRadius="40dp"
 android:layout_centerHorizontal="true">
 <ImageView
     android:layout_height="80dp"
     android:layout_width="match_parent"
     android:id="@+id/imageView1"
     android:src="@drawable/YOUR_IMAGE"
     android:scaleType="centerCrop"/>
   </android.support.v7.widget.CardView>

Adding Border to round ImageView - LATEST VERSION

Wrap it with another CardView slightly bigger than the inner one and set its background color to add a border to your round image. You can increase the size of the outer CardView to increase the thickness of the border.

<androidx.cardview.widget.CardView
  android:layout_width="155dp"
  android:layout_height="155dp"
  app:cardCornerRadius="250dp"
  app:cardBackgroundColor="@color/white">

    <androidx.cardview.widget.CardView
      android:layout_width="150dp"
      android:layout_height="150dp"
      app:cardCornerRadius="250dp"
      android:layout_gravity="center">

        <ImageView
          android:layout_width="150dp"
          android:layout_height="150dp"
          android:src="@drawable/default_user"
          android:scaleType="centerCrop"/>

   </androidx.cardview.widget.CardView>

 </androidx.cardview.widget.CardView>

Torbart answered 9/2, 2016 at 8:31 Comment(17)

Thanks for this. Simple, and easy on memory usage. The libraries I have tried so far all give OOMExceptions when using the Custom views in RecyclerView items. – Amanda 28/7, 2016 at 15:28

Best solution among others, only don't preview it during design. – Yama 5/8, 2016 at 21:36

Tried using this , looks like it does not work with Android below 5.0. Even though the image view is circular, the images are smaller with square shape, looks terrible. Any suggestion? 5.0 and above works good. – Triangulate 16/10, 2016 at 10:56

my image doesn't fit the CardView with this method – Pender 19/10, 2016 at 15:11

This makes the cardview rounded but the image is still square beneath – Pitchman 31/10, 2016 at 23:14

What's up with android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="1.9"? Those are not CardView attributes, are they? – Stinson 21/3, 2017 at 13:30

hi, Can we make this clickable and change the drawable image programmatically?? – Zonked 1/8, 2017 at 6:50

how do it without rounding the card? – Shedevil 17/6, 2018 at 13:43

I think it makes sense to set the scale type of the image view: android:scaleType="centerCrop" – Missile 23/6, 2018 at 12:36

mine doesn't have shape property. – Kenyakenyatta 9/12, 2018 at 12:46

This does not work. Different devices (screens) will have a deformed shape. – Thoria 21/2, 2019 at 15:45

I've tried, but no luck. I'm not sure, but I think tiny images doesn't go well with this approach. – Maidstone 13/4, 2019 at 22:37

Thanks, Key here is Card radius must be half of the width and height to make a proper circle. – Underexpose 23/4, 2019 at 7:1

This is not working. Image is overlapping card and becomes a square. – Indoxyl 30/7, 2019 at 12:0

I used your first solution (one card view and an image view in it). But because my views sizes are calculated dynamically I had to set radius dynamically too. As @Underexpose said my calculation is "parent / 2". Thanks to both of you! – Vivl 6/12, 2019 at 11:1

Buggy answer. The image is overlapping CardView. – Noakes 26/2, 2020 at 16:38

idk what's up with this approach using cardviews, but they look good on pixel phone and weird on samsung. be aware! – Mita 14/12, 2020 at 8:32

253

You can make a simple circle with white border and transparent content with shape.

// res/drawable/circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="10dp"
        android:color="@android:color/white" />
</shape>

Then make a layerlist drawable and put it as background to your imageview.

// res/drawable/img.xml

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

    <item android:drawable="@drawable/circle"/>    
    <item android:drawable="@drawable/ic_launcher"/>

</layer-list>

and put it as background to your imageview.

   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/img"/>