如何在布局上放置圓形圖像視圖？

Question

這是我想要達到的目標：

但是我最終創建了這樣的東西：

如何獲得imageview的圓形邊緣？ 請注意，包含文本的布局也具有重疊的imageview。

這是我的布局文件：

<?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>

請幫助，在此先感謝。 我只是添加一些文本來避免大部分來自stackoverflow的代碼錯誤。

Answer 1

試試這個從您的CircleImageView刪除android:background="@color/accent_white"

   <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

編輯

<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

要制作圓形ImageView，請在布局XML中添加CircularImageView，然后在項目中添加CircularImageView庫，也可以通過Gradle進行抓取：

implementation 'com.mikhaellopez:circularimageview:3.2.0'

然后在需要圓形圖像的xml中使用它

<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"/>