如何在 EditText 中添加 ImageView？

Question

我有一个圆角矩形editText。如何在 EditText 中添加 imageView ？

 <RelativeLayout
        android:layout_marginTop="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editTextDate"
            android:background="@drawable/rounded_rectangle"
            android:layout_toRightOf="@+id/dateIcon"
            android:text=""
            android:hint="Date"
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <ImageView
            android:layout_marginLeft="10dp"
            android:padding="3dp"
            android:tint="@color/colorPrimaryDark"
            android:id="@+id/dateIcon"
            android:src="@android:drawable/ic_menu_my_calendar"
            android:layout_width="40dp"
            android:layout_height="40dp" />

    </RelativeLayout>

输出

在此之前，我试过

 <EditText
            android:drawableLeft="@android:drawable/ic_menu_my_calendar"
            android:background="@drawable/rounded_rectangle"
            android:padding="5dp"
            android:id="@+id/editTextDate"
            android:layout_width="220dp"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp" />

但我无法使用 android:tint 更改图像颜色。

Answer 1

您可以使用 setCompoundDrawablesWithIntrinsicBounds 方法。

EditText text = (EditText) findViewById(R.id.edtText);
    text.setText("MyText");
    text.setCompoundDrawablesWithIntrinsicBounds(null, null,
                       getResources().getDrawable(R.drawable.myDrawable, null), null);

您也可以使用 android:drawableRight 或 android:drawableLeft

        android:drawableRight="@android:drawable/my_image"

Answer 2

       <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/password"
                    android:inputType="textPassword"
                    android:paddingEnd="60dp"
                    android:paddingStart="4dp"
                    />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center|end"
                    android:layout_marginEnd="25dp"
                    android:padding="8dp"
                    app:srcCompat="@drawable/ic_email"/>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center|end"
                    android:padding="8dp"
                    app:srcCompat="@drawable/ic_password"/>

            </FrameLayout>

它看起来像这样（检查 link 中的图片）：- https://i.stack.imgur.com/NBrjO.png

Answer 3

不要将圆角矩形用于 EditText 背景，而是在 parent RelativeLayout 上使用它。使后续的children bg transparent:

<RelativeLayout
    android:layout_marginTop="15dp"
    android:background="@drawable/rounded_rectangle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/editTextDate"
        android:background="@android:color/transparent"
        android:layout_toRightOf="@+id/dateIcon"
        android:text=""
        android:hint="Date"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <ImageView
        android:layout_marginLeft="10dp"
        android:padding="3dp"
        android:tint="@color/colorPrimaryDark"
        android:id="@+id/dateIcon"
        android:src="@android:drawable/ic_menu_my_calendar"
        android:background="@android:color/transparent"
        android:layout_width="40dp"
        android:layout_height="40dp" />

</RelativeLayout>

Answer 4

试试这个

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:background="@drawable/curve_button">

    <EditText
        android:id="@+id/editTextDate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/dateIcon"
        android:background="@android:color/transparent"
        android:hint="Date"
        android:padding="10dp"
        android:text="" />

    <ImageView
        android:id="@+id/dateIcon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="10dp"
        android:padding="3dp"
        android:backgroundTintMode="src_over"
        android:src="@android:drawable/ic_menu_my_calendar"
        android:tint="@color/red" />

</RelativeLayout>

android:background="@drawable/curve_button

<?xml version="1.0" encoding="utf-8"?><!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />

    <stroke android:width="1dip" android:color="#1a1919" />
    <corners android:radius="20dp"/>
</shape>

输出

Answer 5

android:drawableStart="@drawable/ic_search"

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/editTextSearch"
    android:layout_width="match_parent"
    android:layout_height="46dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="10dp"
    android:background="@drawable/shape_edittext"
    android:hint="Search for services"
    android:paddingStart="10dp"
    android:maxLines="1"
    android:inputType="text"
    android:textSize="16sp"
    android:drawablePadding="10dp"
    android:drawableStart="@drawable/ic_search"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textViewDescription" />

如何在 EditText 中添加 ImageView？

How to add ImageView inside EditText?

android

android-layout

android-imageview

android-edittext