How to add Icon in hint of EditText

Question

I want to add a search icon in the EditText hint. Actually, I am using EditText same as SearchView for that I want to set a search icon in between the EditText which disappear when user write something into the EditText same as hint text disappear

Please check the below screenshot:

Answer 1

In xml add to your EditText: android:drwableLeft="@drawable/imageSearch"

That puts an image in your EditText, but its still there after you type text in. To make image disappears, just override in your activity:

@Override
public void afterTextChanged(Editable editable) {
    if(editable.toString().length() > 0) {
        searchEditText.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
    } else {            
        searchEditText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.image, 0, 0, 0);
    }
}

That should do the trick

Answer 2

Create Menu :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_search_album"
        android:icon="@drawable/ic_search"
        android:title="@string/str_search_album"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="collapseActionView|always" />

</menu>

To add hint Just use hint attribute in to your menu

<searchable xmlns:android="http://schemas.android.com/apk/res/android"
android:label="@string/app_label"
android:hint="@string/search_hint" >

for more read this bolg

in Menifest.xml

<meta-data
            android:name="android.app.searchable"
            android:resource="@xml/searchable" />

For more information how to Creating a Search Interface

in jave

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_photos_activity, menu);

        final MenuItem item = menu.findItem(R.id.menu_search_photos);
        final SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
        searchView.setOnQueryTextListener(this);

        return true;

    }

@Override
    public boolean onQueryTextSubmit(String query) {
        return false;
    }

    @Override
    public boolean onQueryTextChange(String newText) {
        List<MyAlbumItemPojo.DataFields> filteredModelList = filter(arrDataFields, newText);
        if (filteredModelList.size() > 0) {
            tvDataNotFoundAlbumItem.setVisibility(View.GONE);
            return true;
        } else {
            tvDataNotFoundAlbumItem.setVisibility(View.VISIBLE);
            tvDataNotFoundAlbumItem.setText(R.string.str_photo_not_fund);
            return false;
        }
    }

    private List<MyAlbumItemPojo.DataFields> filter(List<MyAlbumItemPojo.DataFields> models, String query) {
        query = query.toLowerCase();

        final List<MyAlbumItemPojo.DataFields> filteredModelList = new ArrayList<>();

        for (MyAlbumItemPojo.DataFields model : models) {
            final String text = model.getImagename().toLowerCase().toString();
            if (text.contains(query)) {
                filteredModelList.add(model);

            }
        }

        if (!query.toString().toString().trim().equals("")){
            adapter = new MyAlbumAdapter(MyAlbumsActivity.this, (ArrayList<MyAlbumItemPojo.DataFields>) filteredModelList,VisitUserID,VisitUser);
            recyclerViewMyAlbums.setAdapter(adapter);
            adapter.notifyDataSetChanged();
        }else {
            adapter = new MyAlbumAdapter(MyAlbumsActivity.this, arrDataFields,VisitUserID,VisitUser);
            recyclerViewMyAlbums.setAdapter(adapter);
            adapter.notifyDataSetChanged();
        }

        return filteredModelList;
    }

Answer 3

Set drawableLeft to your edittext like

android:drawableLeft="@drawable/fi_search"

and hide it when some text typed in your editText and visible it when nothing is entered in it

like

csSearchTxt.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

                if(s.length() == 0) {
                    csSearchTxt.setCompoundDrawablesWithIntrinsicBounds(R.drawable.fi_search, 0, 0, 0);
                }
                else
                {
                    csSearchTxt.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
                }


            }

            @Override
            public void afterTextChanged(Editable s) {


            }
        });

Answer 4

Please use Spannable string and ImageSpan to add icon as hint in edittext

 ImageSpan imageHint = new ImageSpan(this, R.drawable.ic_search_accent_24dp);
            String blankString = "     ";
            SpannableString spannableString = new SpannableString(blankString);
            spannableString.setSpan(imageHint, 0, blankString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
            searchEdit.setHint(spannableString);