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

问题:

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

回答1:

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);
        }


    }
});

回答2:

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 :

回答3:

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.

回答4:

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);

回答5:

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"
   />

回答6:

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.