how to place circular image-view on layout?

Question

Here is what I'm trying to achieve :

But i ended up creating something like this :

How do i get circular edge to the imageview ? Note that layout containing text have overlapped imageview as well.

Here is my layout file :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@drawable/background"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/background"
        android:orientation="horizontal">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="120dp"
            android:layout_height="125dp"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:background="@color/accent_white"
            android:id="@+id/vendoravatar_imageview"
            android:src="@drawable/avatarnotfound" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center"
            android:id="@+id/data_layout"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="10dp"
            android:orientation="horizontal">

            <View
                android:layout_width="100dp"
                android:layout_height="match_parent">

            </View>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/accent_white"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="16sp"
                    android:typeface="serif"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"
                    android:text="@string/random_vendoruser1"
                    android:id="@+id/vendorusername_textview"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginLeft="10dp"
                    android:typeface="serif"
                    android:text="@string/random_vendoruser1"
                    android:id="@+id/vendoruserdesc_textview"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="25dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginBottom="5dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_gravity="center"
                        android:id="@+id/editvuser_imageview"
                        app:srcCompat="@drawable/ic_pencil"/>

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:layout_marginLeft="20dp"
                        android:background="@color/client_grey"
                        ></View>

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_gravity="center"
                        android:id="@+id/deletevuser_imageciew"
                        app:srcCompat="@drawable/ic_dustbin_color"/>

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:background="@color/client_grey"
                        ></View>
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_gravity="center"
                        android:id="@+id/lockvuser_imageview"
                        app:srcCompat="@drawable/ic_lock_open_24dp"/>

                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

    </FrameLayout>
</RelativeLayout>

Please help, thanks in advance. I'm just addings some text to avoid mostly code error from stackoverflow.

Answer 1

Try this Remove android:background="@color/accent_white" from your CircleImageView

   <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@color/colorAccent"
    android:layout_height="wrap_content">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="120dp"
            android:layout_height="125dp"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"
            android:id="@+id/vendoravatar_imageview"
            android:src="@drawable/nilesh" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center"
            android:id="@+id/data_layout"
            android:layout_marginTop="30dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="10dp"
            android:orientation="horizontal">

            <View
                android:layout_width="100dp"
                android:layout_height="match_parent">

            </View>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="accent_white"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="16sp"
                    android:typeface="serif"
                    android:layout_marginTop="10dp"
                    android:layout_marginLeft="10dp"
                    android:text="random_vendoruser1"
                    android:id="@+id/vendorusername_textview"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:layout_marginLeft="10dp"
                    android:typeface="serif"
                    android:text="random_vendoruser1"
                    android:id="@+id/vendoruserdesc_textview"/>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="25dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginBottom="5dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_gravity="center"
                        android:id="@+id/editvuser_imageview"
                        app:srcCompat="@drawable/ic_delete"/>

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:layout_marginLeft="20dp"
                        android:background="@color/colorAccent"
                        />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_gravity="center"
                        android:id="@+id/deletevuser_imageciew"
                        app:srcCompat="@drawable/ic_close"/>

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:background="@color/colorAccent"
                        />
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_gravity="center"
                        android:id="@+id/lockvuser_imageview"
                        app:srcCompat="@drawable/ic_add_black_24dp"/>

                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

    </FrameLayout>
</RelativeLayout>

OUTPUT

EDIT

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerInParent="true"
        android:layout_marginLeft="-20dp"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:background="@color/colorAccent"
        android:layout_toEndOf="@id/vendoravatar_imageview"
        android:orientation="horizontal">


        <LinearLayout
            android:id="@+id/data_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="20dp"
            android:gravity="center"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="accent_white"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/vendorusername_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="10dp"
                    android:text="random_vendoruser1"
                    android:textSize="16sp"
                    android:typeface="serif" />

                <TextView
                    android:id="@+id/vendoruserdesc_textview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="random_vendoruser1"
                    android:textSize="14sp"
                    android:typeface="serif" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="25dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="5dp"
                    android:layout_marginBottom="5dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:id="@+id/editvuser_imageview"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginLeft="10dp"
                        app:srcCompat="@drawable/ic_delete" />

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:background="@color/colorAccent" />

                    <ImageView
                        android:id="@+id/deletevuser_imageciew"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginLeft="20dp"
                        app:srcCompat="@drawable/ic_close" />

                    <View
                        android:layout_width="2dp"
                        android:layout_height="match_parent"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="3dp"
                        android:layout_marginBottom="3dp"
                        android:background="@color/colorAccent" />

                    <ImageView
                        android:id="@+id/lockvuser_imageview"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginLeft="20dp"
                        app:srcCompat="@drawable/ic_add_black_24dp" />

                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/vendoravatar_imageview"
        android:layout_width="120dp"
        android:layout_height="125dp"
        android:layout_alignParentStart="true"
        android:layout_centerInParent="true"
        android:layout_marginTop="20dp"
        android:src="@drawable/nilesh" />

</RelativeLayout>

OUTPUT

Answer 2

To make a circular ImageView add CircularImageView in your layout XML and add CircularImageView library in your project or you can also grab it via Gradle:

implementation 'com.mikhaellopez:circularimageview:3.2.0'

and then use this in xml where you want that circular image

<com.mikhaellopez.circularimageview.CircularImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@drawable/image"
        app:civ_border_color="#EEEEEE"
        app:civ_border_width="4dp"
        app:civ_shadow="true"
        app:civ_shadow_radius="10"
        app:civ_shadow_color="#8BC34A"/>