Display icon next to text field

Question

I need to display an icon next to an text field like e.g. the person and phone icon in this screenshot (source)

Is there any component on Android for doing this or do I have to align both, icon and text field, manually in e.g. a constraint layout? Note that I need the icon next to the text field (like shown on the sreenshot), not inside of it.

Based on assumptions from looking at the image, Im assuming you want a LinearLayout with horizontal orientation, with an imageview and an edittext as children views. — string.Empty, Feb 10 '20 at 07:19
According your Image, yes you have to do it manually and constraintLayout is the best option for you — Ashwini Saini, Feb 10 '20 at 07:20
NO there isn't any component on Android which adds icon next to TextInputLayout. You need to align an ImageView next to your InputLayout. — nitinkumarp, Feb 10 '20 at 07:26

score 2 · Answer 1 · answered Feb 10 '20 at 07:42

I hope this will work for you.

You can create the above layout using a Relative Layout or Linear Layout.

You need to take ImageView and Editext to create layout.

<?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:layout_height="wrap_content">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="25dp"
        android:contentDescription="Person Name"
        android:layout_alignParentStart="true"
        android:src="@drawable/ic_action_name" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="20dp"
        android:layout_toEndOf="@id/imageView"
        android:background="@drawable/border"
        android:ems="10"
        android:hint="Name"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginBottom="10dp"/>
</RelativeLayout>

Drawable Border:

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

    <solid
        android:color="#ffffff"/>
    <stroke
        android:width="1dp"
        android:color="#222222"></stroke>

    <corners
        android:radius="10dp"></corners>

</shape>

score 1 · Answer 2 · answered Feb 10 '20 at 07:16

1

this is not in the edit text field its in image view you can use imageview to set these icon before the textView and if you want to show the image into the textView you can use drawableSart into xml

answered Feb 10 '20 at 07:16

Amit pandey

1,149
1
4
15

string.Empty · Answer 3 · 2020-02-10T07:33:04.310

No there is no default component besides using the "drawable_left" attribute on an edittext. Which tends to never look as expected.

Currently best practice for this situation is to manually add an ImageView to the layout.

The general xml layout for a single input would look something like this. But there's more work to do to style the edittexts to make it look like the image.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_person"
        android:layout_gravity="center_vertical"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

score 1 · Answer 4 · answered Feb 10 '20 at 07:39

You can achieve this using:

Your Activity:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">

<ImageButton
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:src="@drawable/ic_phone" --> phone drawable
    android:tint="@color/gray"/>

<EditText
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:layout_weight="9"
    android:background="@drawable/et_style" --> this is custom drawable for EditText
    android:padding="20dp" />

et_style.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">


<solid android:color="@color/white" />
<corners android:radius="10dp" />
<stroke
    android:width="1dp"
    android:color="@color/gray" />

score 1 · Answer 5 · answered Feb 10 '20 at 07:41

1

use this for EditText

android:drawableLeft="@drawable/card"

answered Feb 10 '20 at 07:41

Mehrdad

1,477
15
17

score 1 · Answer 6 · answered Feb 10 '20 at 07:49

Copy paste the following code into your xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="10dp">

        <ImageView
            android:id="@+id/imgPerson"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:src="@drawable/ic_person"
            android:layout_margin="5dp"
            android:padding="5dp"></ImageView>
        <EditText
            android:id="@+id/namePerson"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:hint="Name"
            android:layout_margin="5dp"
            android:background="@drawable/box_style"
            android:padding="8dp"></EditText>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_margin="10dp">

        <ImageView
            android:id="@+id/imgPhone"
            android:layout_width="0dp"
            android:layout_weight="0.5"
            android:layout_height="45dp"
            android:src="@drawable/ic_phone"
            android:layout_margin="5dp"
            android:padding="5dp"></ImageView>
        <EditText
            android:id="@+id/phoneNumber"
            android:layout_width="0dp"
            android:layout_weight="1.75"
            android:layout_height="45dp"
            android:hint="Phone"
            android:layout_margin="5dp"
            android:background="@drawable/box_style"
            android:padding="8dp"></EditText>
        <Spinner
            android:id="@+id/areaCode"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:layout_weight="0.75"
            android:layout_margin="5dp"
            android:background="@drawable/box_style"
            android:padding="8dp"></Spinner>
    </LinearLayout>

</LinearLayout>

For box style, copy paste the following code into a drawable xml file:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="1.5dp"
        android:color="@android:color/darker_gray" />

    <corners
        android:radius="4dp" />

</shape>

Cheers. Happy coding

score 1 · Answer 7 · answered Feb 10 '20 at 08:11

Unfortunately there is no component with your desired specifics, the only way to achieve this is to manually align ImageView with the TextInputLayout. In my opinion, the best way to do it is using ConstraintLayout. You can read about ConstraintLayout here

score 0 · Answer 8 · answered Feb 10 '20 at 10:46

There is no default component in Android like you mention in your snapshot but For that, you can try this way constraintLayoutTesting.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:id="@+id/imgPerson"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginStart="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="30dp"
        android:padding="5dp"
        android:src="@drawable/icon_storage"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@+id/imgPhone"
        app:layout_constraintEnd_toStartOf="@+id/edtNamePerson"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/edtNamePerson"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="14dp"
        android:layout_marginRight="14dp"
        android:layout_marginBottom="30dp"
        android:background="@drawable/round_corner_border"
        android:hint="Name"
        android:padding="8dp"
        app:layout_constraintBottom_toTopOf="@+id/spAreaCode"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imgPerson"
        app:layout_constraintTop_toTopOf="parent" />


    <ImageView
        android:id="@+id/imgPhone"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginStart="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="596dp"
        android:padding="5dp"
        android:src="@drawable/icon_authentication"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/edtPhoneNumber"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imgPerson" />

    <EditText
        android:id="@+id/edtPhoneNumber"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/round_corner_border"
        android:hint="Phone"
        android:padding="8dp"
        app:layout_constraintBottom_toBottomOf="@+id/imgPhone"
        app:layout_constraintEnd_toStartOf="@+id/spAreaCode"
        app:layout_constraintStart_toEndOf="@+id/imgPhone"
        app:layout_constraintTop_toTopOf="@+id/imgPhone" />

    <Spinner
        android:id="@+id/spAreaCode"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="14dp"
        android:layout_marginRight="14dp"
        android:layout_marginBottom="596dp"
        android:background="@drawable/round_corner_border"
        android:padding="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/edtPhoneNumber"
        app:layout_constraintTop_toBottomOf="@+id/edtNamePerson" />


</androidx.constraintlayout.widget.ConstraintLayout>

round_corner_border.xml

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

    <stroke
        android:width="1dp"
        android:color="@android:color/darker_gray" />

    <corners
        android:radius="5dp" />

</shape>

Also, I have attached a screenshot of my testing code so you can get a better idea.

Display icon next to text field

8 Answers8