如何在Android中的ImageView右下角添加图标？

问题描述

我正在尝试创建如下所示的布局：

with the curved at the boundary and a plus icon at the right bottom

这就是我所做的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/custom_layout_five"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:id="@+id/image_layout">

    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:src="@drawable/photo_placeholder"/>


    <ImageView
        android:id="@+id/add_remove_icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="10dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:src="@drawable/add_image" />

</RelativeLayout>

这是我的外部文件，用于提供名为@ drawable / custom_layout_five的圆角：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="@color/offWhite"/>
    <corners android:radius="20dp" />

</shape>

但是我只能实现部分功能，即使用此代码可以将图标放置在右下角，但与我上传的图片不同。谁能建议我如何实现相同的目标？

谢谢

解决方法

您需要使布局背景透明，并在ID为img的图像视图中添加空白以实现此设计

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@android:color/transparent"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:id="@+id/image_layout">

    <ImageView
        android:id="@+id/img"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/photo_placeholder"/>

    <ImageView
        android:id="@+id/add_remove_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:src="@drawable/add_image"  />
</RelativeLayout>

,

我已经编辑了答案，现在尝试吧

在drawable文件夹中将XML文件创建为round_back.xml：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dp" android:color="#B1BCBE" />
    <corners android:radius="10dp"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>

现在创建此布局：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/custom_layout_five"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:id="@+id/image_layout">

     <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/round_back"  //add this
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:src="@drawable/photo_placeholder"/>
     
     <ImageView
        android:id="@+id/add_remove_icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="10dp"
       app:layout_constraintBottom_toBottomOf="@+id/img"
        app:layout_constraintEnd_toEndOf="@+id/img"
        android:src="@drawable/add_image" />

</androidx.constraintlayout.widget.ConstraintLayout>