androidxmlimageview

ImageView in circular through XML


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?


Solution

  • 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