ImageView in circular through xml

ImageView in circular through xml

Asked on December 25, 2018 in XML.
Add Comment


  • 3 Answer(s)

    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>
    

         After that make a layerlist drawable and keep it as background to 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/ic_launcher"/>
      <item android:drawable="@drawable/circle"/>
     
    </layer-list>
    

    and put it as background to imageview.

      <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/img"/>
    
    Answered on December 25, 2018.
    Add Comment

    Try the below code:

    dependencies: compile 'com.android.support:appcompat-v7:23.1.1'
                  compile 'com.android.support:design:23.1.1'
                  compile 'com.android.support:cardview-v7:23.1.1'
    <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>
    

         While 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>
    
    Answered on December 25, 2018.
    Add Comment

    To put two image views inside a frame layout one above another:

    <FrameLayout android:id="@+id/frame"
                 android:layout_width="40dp"
                 android:layout_height="40dp">
     
        <ImageView android:id="@+id/pic"
                   android:layout_width="40dp"
                   android:layout_height="40dp"
                   android:src="@drawable/my_picture" />
     
        <ImageView android:id="@+id/circle_crop"
                   android:layout_width="40dp"
                   android:layout_height="40dp"
                   android:src="@drawable/circle_crop" />
     
    </FrameLayout>
    

         Normally put a circular_crop.png in the drawable folder which is in the shape of the image dimensions with a white background and a transparent circle in the center.

    Answered on December 25, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.