how to set text and image as a hint in edittext in center?

Question

i want to set image and text as hint in Edit text in center like this

my XML code is

<EditText  android:layout_width="300dp" android:layout_height="40dp" 
android:id="@+id/ed_username" android:layout_marginBottom="152dp" 
android:hint="@string/username"
android:drawableLeft="@drawable/username_image" 
android:textColorHint="@color/skyblue" 
 android:background="@drawable/edittext_shape" 
android:layout_alignParentBottom="true" 
android:layout_centerHorizontal="true" 
android:ellipsize="start" android:gravity="center|center_horizontal"/>

please help me thanks in advance a

Have a look at this: http://stackoverflow.com/questions/20250638/how-to-create-edittext-hint-as-text-with-image-in-android — T D Nguyen, Mar 26 '16 at 10:21

score 3 · Answer 1 · answered Mar 26 '16 at 10:23

You can do via Two Way

1.Create EditText like this.

 <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:hint="Search text"
        android:id="@+id/editText"
        android:background="@drawable/edit_text_bottom_border"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:paddingLeft="15dp" 
        android:drawablePadding="10dp"     
        android:drawableLeft="@android:drawable/ic_search_category_default"/>

and in you layout create this file

edit_text_bottom_border.xml

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:bottom="1dp"
            android:left="-3dp"
            android:right="-3dp"
            android:top="-3dp">
            <shape android:shape="rectangle">
                <stroke
                    android:width="2dp"
                    android:color="#000" />

                <solid android:color="#00ffffff" />

            </shape>
        </item>
    </layer-list>

2. Make RelativeLayout like Below :

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/editText" >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@android:drawable/btn_star_big_on"/>

        <EditText
            android:id="@+id/text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="46dp"
            android:hint="hint"
            android:layout_alignParentRight="true" />

        <View
            android:id="@+id/line"
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:layout_marginTop="-7dp"
            android:layout_below="@+id/text"
            android:background="#000"/>
</RelativeLayout>

The Generated Output is :

you said right but i want to use costume image to set the layout as i uploaded — Farmer, Mar 26 '16 at 10:32

score 2 · Accepted Answer · answered Mar 26 '16 at 10:15

2

You can add an image in edittext as drawableleft and remove it while getting focus.

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Username"
android:drawableLeft="@drawable/yourimage" />

remove it when getting focus

final EditText et=(EditText) findViewById(R.id.editText1);
et.setOnFocusChangeListener(new OnFocusChangeListener() {

    @Override
    public void onFocusChange(View arg0, boolean gotfocus) {
        // TODO Auto-generated method stub
        if(gotfocus){
    et.setCompoundDrawables(null, null, null, null);
}
        else if(!gotfocus){
            if(et.getText().length()==0)
            et.setCompoundDrawablesWithIntrinsicBounds(R.drawable.yourimage, 0, 0, 0);
        }


    }
});

answered Mar 26 '16 at 10:15

Alex Chengalan

8,211
4
42
56

you say right but i want to set layout as i upload image but not getting how ? when i set like this the text will set center but image will set in left side now i want to set both are in center – Farmer Mar 26 '16 at 10:22
you can adjust the padding by using drawablePadding attribute. If you want this in centre then set an empty text in centre and add the drawableLeft into that text and you need to manage that text in code also. – Alex Chengalan Mar 26 '16 at 10:39
yes, thank for help i do like that and i got the solution – Farmer Mar 26 '16 at 10:47

score 0 · Answer 3 · answered Mar 26 '16 at 10:29

You can change the hint color as depicted below inside your java files.

editText.setHintTextColor(getResources().getColor(R.color.Red));

you can set drawlable to the edit text using following property

android:drawableLeft="@drawable/ic_launcher"             
 android:drawableTop=""              
 android:drawableBottom=""    
 android:drawableStart=""     
 android:drawableEnd=""    
 android:drawableRight=""

but unfortunately you can not set drawlable at the center of the editText like this , Alternatively you can use background image which include your hint + image what ever you display and inside editText.addTextChangedListener you can remove that previously applied backgrund.

e-shfiyut · Answer 4 · 2016-03-26T10:36:49.367

You can try to set your hint using spannable, and then you don't have to change your XML or layouts. This is an example with a textView. I never tried that with setHint(), but i think it will work the same way.

TextView tv = (TextView)findViewById(R.id.yourTextView);
SpannableStringBuilder span = new SpannableStringBuilder( "  Username" );
Bitmap icon = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
span.setSpan(new ImageSpan(icon), 0, 1, Spannable.SPAN_INCLUSIVE_INCLUSIVE); 
tv.setText(span, BufferType.SPANNABLE);

score 0 · Answer 5 · answered Jul 28 '17 at 06:59

You can do it like this it is very Simple

 et.addTextChangedListener(new TextWatcher() {

        public void onTextChanged(CharSequence s, int start, int before, int count) {
            //   loadData(et.getText().toString());
            // et.setCompoundDrawablesWithIntrinsicBounds(, 0, 0, 0);
            et.setCompoundDrawables(null, null, null, null);
        }

        public void beforeTextChanged(CharSequence s, int start, int count,
                                      int after) {
            if (et.getText().length() == 0)
                et.setCompoundDrawablesWithIntrinsicBounds(android.R.drawable.ic_search_category_default, 0, 0, 0);
        }

        public void afterTextChanged(Editable s) {
            if (et.getText().length() == 0)
                et.setCompoundDrawablesWithIntrinsicBounds(android.R.drawable.ic_search_category_default, 0, 0, 0);
        }
    });

and in Layout XML

 <EditText
    android:id="@+id/editTextSearch"
    style="@android:style/Widget.Holo.EditText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:selectAllOnFocus="false"
    android:hint="Search"
    android:drawableLeft="@android:drawable/ic_search_category_default"
   />

score 0 · Answer 6 · answered Nov 29 '18 at 18:35

You can use the EditText itself and make hint with image on any side of the EditText. Refer following for sample:

    EditText editText = (EditText) findViewById(R.id.edit_text);

    Spannable spannable = new SpannableString("  Mobile Number");
    Drawable drawable = getResources().getDrawable(R.drawable.one);
    drawable.setBounds(50, 0, 0, 0);
    ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
    spannable.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    editText.setHint(spannable);

Note: you can adjust setBounds() over the image according to your preferred direction over the text.

how to set text and image as a hint in edittext in center?

6 Answers6

Linked