Android SearchView customisation
Add this code on your RelativeLayout
-
<android.support.v7.widget.SearchView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorAsh"
android:backgroundTint="@color/colorAsh"
android:searchIcon="@drawable/ic_search"
android:commitIcon="@drawable/ic_commit"
android:searchHintIcon="@drawable/ic_search"
android:closeIcon="@drawable/ic_close"
android:goIcon="@drawable/ic_go">
</android.support.v7.widget.SearchView>
Dont forget to change these icons.
And follow this SearchView to know each option of SearchView
.
just do your own search view, it is very simple.
custom_searchview.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:gravity="center_vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:adjustViewBounds="true"
android:src="@drawable/ic_search_white"/>
<EditText
android:id="@+id/edt_search_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="text"
android:imeOptions="actionSearch"
android:hint="@string/by_name"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:lines="1"
android:textColorHint="@color/colorTextGrey"
android:textColor="@color/white"
android:textSize="14sp"
android:background="@android:color/transparent"/>
<ImageView
android:id="@+id/iv_clear_text"
android:layout_width="25dp"
android:layout_height="25dp"
android:adjustViewBounds="true"
android:visibility="gone"
android:src="@drawable/ic_clear"/>
</LinearLayout>
you then can include this layout in your activity layout file. This is a simple layout which includes a "search icon" followed by EditText, followed by "clear icon". The clear icon is shown after user types some text.
then in your activity you need to listen when the user clicks the search on keyboard and also listen when the user enters text to show "clear icon"
/*search btn clicked*/
edtSearchText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
if (actionId == EditorInfo.IME_ACTION_SEARCH) {
performSearch();
return true;
}
return false;
}
});
/*hide/show clear button in search view*/
edtSearchText.addTextChangedListener(searchViewTextWatcher);
TextWatcher searchViewTextWatcher = new TextWatcher() {
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if(s.toString().trim().length()==0){
ivClearText.setVisibility(View.GONE);
} else {
ivClearText.setVisibility(View.VISIBLE);
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
// TODO Auto-generated method stub
}
@Override
public void afterTextChanged(Editable s) {
// TODO Auto-generated method stub
}
};
I suggest you to look at my answer I gave here to style your own SearchBar.
I can't get the reason but I couldn't style Google's default SearchBar so I had to create my own Search bar.
Here's how I did:
Styling Search View on Android (min21)
If you want to implement an InstantSearch algorithm follow this great author and his project (look at the accepted answer):
How to filter a RecyclerView with a SearchView
If you need further help just leave a comment. If the answer helped also upvote my answer :P
UPDATE: Here's Google's implementation of the Search View, just to give you more information: https://developer.android.com/guide/topics/search/search-dialog.html
Have a nice day :)