如何在布局上放置圆形图像视图？

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 ? 如何获得imageview的圆形边缘？ Note that layout containing text have overlapped imageview as well. 请注意，包含文本的布局也具有重叠的imageview。

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. 我只是添加一些文本来避免大部分来自stackoverflow的代码错误。

Answer 1

Try this Remove android:background="@color/accent_white" from your CircleImageView 试试这个从您的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 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 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: 要制作圆形ImageView，请在布局XML中添加CircularImageView，然后在项目中添加CircularImageView库，也可以通过Gradle进行抓取：

implementation 'com.mikhaellopez:circularimageview:3.2.0'

and then use this in xml where you want that circular image 然后在需要圆形图像的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"/>

如何在布局上放置圆形图像视图？

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-09-28 06:11:12

解决方案2
0

如何在布局上放置圆形图像视图？

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-09-28 06:11:12

解决方案2 0

解决方案1
1 已采纳 2018-09-28 06:11:12

解决方案2
0