Custom EditText into Android

Question

I'd like to put attach file icon into EditText for example how it was made into WhatsApp. How can I do it?

score 7 · Answer 1 · edited Jun 20 '20 at 09:12

That is not a custom EditBox. Here `EditText` is wrapped with parent view with other `ImageViews`.

In whatsapp example there is a Imogi ImageView, An EditText, An Attach ImageView, and a camera ImageView inside a LinearLayout. And parent LinearLayout is having round corner background.

You can also use Drawable left and Drawable right, but I will not suggest that because that does not have much control.

Just a suggestion:

I always want to save time. Here is an whatsapp clone, you can just pull it and use its views.

https://github.com/Shahar2k5/whatsappClone

This guy has done good work in this library.

score 2 · Accepted Answer · answered Aug 16 '18 at 05:39

2

Use drawableRight attribute in EditText

<EditText
android:id="@+id/account_et"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:drawableRight="@drawable/icon_backall" //your drawable which you want to use
android:ems="10"
android:hint="@string/str_md_email"
android:padding="10dp" >
</EditText>

answered Aug 16 '18 at 05:39

Mayank Bhatnagar

1,316
2
13
21

Okay, but how he's bind listener by icon click? – Adil Aug 16 '18 at 05:41
for drawable left or right click,have look [this](https://stackoverflow.com/a/26269435/5110595) – Hemant Parmar Aug 16 '18 at 05:44

score 2 · Answer 3 · answered Aug 16 '18 at 05:42

You have to manage like below image :

For above UI design code is below :

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="@dimen/_10sdp"
            android:background="@drawable/stockbg"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/edt_sendMeassage"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/_10sdp"
                android:layout_marginRight="@dimen/_10sdp"
                android:layout_weight="1"
                android:maxLines="4"
                android:backgroundTint="@android:color/transparent"
                android:paddingLeft="@dimen/_10sdp"
                android:paddingRight="@dimen/_10sdp"
                android:textSize="@dimen/normal_input_text_size" />

            <LinearLayout
                android:id="@+id/ll_send"
                android:layout_weight="6"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:layout_width="@dimen/_40sdp"
                    android:layout_height="@dimen/_20sdp"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center"
                    android:src="@drawable/ic_next_arrow"
                    android:tint="@color/color_gray" />
            </LinearLayout>
        </LinearLayout>

AskNilesh · Answer 4 · 2018-08-16T05:50:23.337

I'd like to put attach file icon into EditText for example how it was made into WhatsApp.

if you want to add icon in EditText you can use

android:drawableStart=""
android:drawableEnd=""
android:drawableTop=""
android:drawableLeft=""
android:drawableRight=""

how it was made into WhatsApp. How can I do it?

That is not Custom Edittext

You need to wrap your ImageView and EditText in side a ViewGroup like LinearLayout or RelativeLayout

SAMPLE CODE

<LinearLayout
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:padding="10dp"
    android:background="@drawable/test"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_menu_camera" />

    <EditText
        android:layout_width="0dp"
        android:background="@android:color/transparent"
        android:layout_weight="1"
        android:layout_height="wrap_content" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:src="@drawable/ic_menu_camera" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:src="@drawable/ic_menu_camera" />

</LinearLayout>

   android:background="@drawable/test"

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

    <stroke
        android:width="2dp"
        android:color="@color/colorPrimary" />
    <corners android:radius="25dp" />
</shape>

OUTPUT

Bunny · Answer 5 · 2018-08-16T05:51:15.020

You need to put edittext and attach icon in layout (according to your need) and set rounded background to parent layout

like this

 <RelativeLayout
        android:id="@+id/sendLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/roundedbg"
        android:orientation="horizontal">



        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/attachFile"
         android:background="@null"
            android:padding="@dimen/five_dp" />

        <ImageView
            android:id="@+id/attachFile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon"
       />


    </RelativeLayout>

roundedbg.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>

score 0 · Answer 6 · answered Aug 16 '18 at 05:56

better you use wrap edittext and imageview in relative layout like below

     <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="50dp">

                <EditText
                    android:id="@+id/etPassword"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="@drawable/custom_edittext"
                    android:hint="Password"
                    android:minLines="10"
                    app:passwordToggleEnabled="true"
                    android:singleLine="true"
                    android:inputType="textPassword"
                    android:textSize="14sp"
                    android:paddingLeft="20dp"
                    android:layout_weight="1"
                    android:paddingRight="20dp"
                    tools:ignore="MissingPrefix" />

                <ImageView
                    android:id="@+id/ivPasswordToggle"
                    android:layout_width="24dp"
                    android:elevation="10dp"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="15dp"
                    android:layout_height="24dp"
                    android:background="@drawable/ic_remove_red_eye_black_24dp"/>
            </RelativeLayout>

output :

in java code use click on imageview

Custom EditText into Android

6 Answers6

That is not a custom EditBox. Here EditText is wrapped with parent view with other ImageViews.

Just a suggestion:

That is not a custom EditBox. Here `EditText` is wrapped with parent view with other `ImageViews`.