Android SearchView customisation

问题

im new to android and i got stucked on something that i think it's simple but i got confused.. I need to make a custom searchView not in the actionbar/toolbar but in my Relativelayout. The problem is that i don't know hot to customise the background , textinput color , the search icon color in XML , or just the attributes of them . At the moment im on my phone and can't show my code . Does anyone tell me how i can customise it ? Maybe showing me any tutorial i can follow ? Thanks in advance !!!!

回答1:

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

回答2:

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 .

回答3:

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

    }
};

来源：https://stackoverflow.com/questions/42515902/android-searchview-customisation