Android - Make whole search bar clickable

Question

I am using a search-view element in my fragment to implement search feature.

<SearchView
    android:id="@+id/search_bar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="7dp"
    android:layout_marginLeft="7dp"
    android:layout_marginRight="7dp"
    android:layout_marginBottom="7dp"
    android:background="@color/white" />

enter image description here

The problem is only the search icon is clickable other area in the search bar is not clickable, when i click the icon only i can able to search.

enter image description here

Can you please help me to make the whole search area clickable.

enter image description here

If you are going to make it clickable to search then how come you are going to edit the text written inside it and its not focused ? — pratz9999, May 26 '15 at 10:23
@Lamorak : Its not working on adding android:clickable="true" to my code. Now also the other area is not clickable to begin search. — Saran, May 26 '15 at 11:19
@pratz9999: s you are correct but my requirement is make the whole searchbar are into clickable and by clicking will make the search focus and keyboard open... — Saran, May 26 '15 at 13:14
@Saran add this to your xml searchview android:iconifiedByDefault="false" .. also if i ask you to add one image button similar to search icon. is that ok .. — pratz9999, May 27 '15 at 05:36
@pratz9999 ya tats fine, super answer, but one problem is tat after typing and selecting a result and navigated to it, the cursor is still blinking in the searchbar... — Saran, May 27 '15 at 06:27
@Saran you just clearfocus when you are done. Programmatic way to clearing it.. Add clearfocus after your searchview object. — pratz9999, May 27 '15 at 06:45

score 92 · Answer 1 · edited Oct 15 '20 at 06:55

92

This can be simply done by setting Iconified to false on OnClick of SearchView.

searchBar.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        searchBar.setIconified(false);
    }
});

Reference: Eric Lui's answer

Hopefully it will help.

UPDATE:

You can also use it directly in your XML

app:iconifiedByDefault="false"

edited Oct 15 '20 at 06:55

PedroAGSantos

2,336
2
17
34

answered Jun 11 '16 at 07:52

Zeeshan Ghazanfar

1,351
11
11

Is there any possibility to when i click on the area mentioned (outside of the icon) to go in the onClick method? I want to expand my listview in that case. – f.trajkovski Mar 27 '18 at 09:50
Worked like a charm! – Ivan May 22 '18 at 21:15
Note: searchBar.onActionViewExpanded() does not work properly because it does not present the user with the X to exit search – hyena Feb 03 '20 at 00:23
app:iconifiedByDefault="false" - doesn't work for me. Only setOnClickListener approach is doing the job. Maybe it's related to difference between and . I have tested it only on – mr.kostua Aug 18 '23 at 12:37

score 18 · Answer 2 · edited Dec 06 '17 at 09:43

18

search_bar.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        search_bar.onActionViewExpanded();
    }
});

edited Dec 06 '17 at 09:43

Rick

1,177
1
19
27

answered Jul 13 '15 at 10:41

Lokesh Gupta

191
8

Simplest solution ever for android.support.v7.widget.SearchView – Kishan Solanki Apr 11 '18 at 07:25

PGMacDesign · Answer 3 · 2017-04-11T21:12:46.560

The trick isn't so much to make the entire area clickable as much as it is to expand it and then hide the keyboard.

First, your layout in the XML is fine, leave it as is, in your Java, you want to have the following:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_activity);

    //Define your Searchview
    SearchView searchView = (SearchView) findViewById(R.id.search_bar);

    //Turn iconified to false:
    searchView.setIconified(false);
    //The above line will expand it to fit the area as well as throw up the keyboard

    //To remove the keyboard, but make sure you keep the expanded version:
    searchView.clearFocus();
}

What this accomplishes is it expands the keyboard to the entire length of the area, it focuses on it, which allows the entire area to be clickable, and then it removes the keyboard so that it looks to the user like they are able to click that field and bring up a keyboard.

Should accomplish what you are looking for.

-Sil

This is simple and clean – user3290180 Oct 03 '16 at 14:21 — user3290180, Oct 03 '16 at 14:21

score 12 · Answer 4 · answered May 27 '15 at 06:46

12

add this to your xml android:iconifiedByDefault="false" it will keep open your searchview.

and to clear it add clearfocus to your searchview object.

answered May 27 '15 at 06:46

pratz9999

539
4
20

1

this worked but with `app` instead of `android`: `app:iconifiedByDefault="false"` – rexxar Jan 20 '19 at 22:36

Sethbrin · Accepted Answer · 2015-05-26T14:12:00.297

7

What is the clickable mean? trigger search action or just make the edit area focused? If it is the first, you can just make the icon clickable=false. and make the whole layout clickable and implement a event listener.

<SearchView
android:id="@+id/search_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:click="onClick"
android:layout_marginTop="7dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:layout_marginBottom="7dp"
android:background="@color/white" />

The onClick method should be

public void onClick(View v) {
　  InputMethodManager im = ((InputMethodManager) getSystemService(INPUT_METHOD_SERVICE));
    im.showSoftInput(editText, 0);
｝

edited May 26 '15 at 14:12

answered May 26 '15 at 10:27

Sethbrin

300
1
10

4

Clickable means : when i tap anywhere on the search bar when it is not focused it should begin the search process. – Saran May 26 '15 at 10:35
Then when you touch the edit area, what is the action? edit the things you want to search or just search? you can implement the key event listener when press KEY ENTER. – Sethbrin May 26 '15 at 10:41
Ok, but we have only two public methods for search-view **"onQueryTextChange", "onQueryTextSubmit",** then how to implement **onClick** listener to search-view, if so i can to set the iconified to true on that click listener right? – Saran May 26 '15 at 11:23
2

and the answer not answers my question – Saran May 26 '15 at 12:40
I don't understand what do you mean? You need not to implement the onclick listener, but you can implement the onKeyEvent, and in case the keycode == KEY_ENTER, just trigger the onQueryTextSubmit method. Or when click the icon button to trigger the method. You say that you want to trigger the method when you touch the whole touch area? why do that? I don't really understand. – Sethbrin May 26 '15 at 12:49
1

Iam using a searchview in a fragment and when i want to type anything, i acn only click the magnifier icon in the searchbox and then searchbar is focused and the keyboard triggers but my requirement is now "the whole area in the searchview should get focused when touch on it and the keyboard should open"... – Saran May 26 '15 at 13:44
1

Am I Clear with my issue now ? – Saran May 26 '15 at 13:45
Ok, I know. You can just implement the onClick listener of the layout, and in the method make the im show . – Sethbrin May 26 '15 at 14:13

score 5 · Answer 6 · answered Aug 27 '19 at 16:26

5

For latest versions of android - Try:

app:iconifiedByDefault="false"

Example -

<android.support.v7.widget.SearchView
android:id="@+id/source_location_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="15dp"
android:layout_marginRight="20dp"
app:iconifiedByDefault="false"
app:queryHint="Your hint text" />

answered Aug 27 '19 at 16:26

Vaibhav Rai

183
1
8

do you know after which version of android app:iconifiedByDefault="false" is the solution – Gauri Gadkari Feb 16 '22 at 23:55

score 4 · Answer 7 · edited Mar 22 '18 at 07:36

4

searchView.setIconified(false);

edited Mar 22 '18 at 07:36

MinnuKaAnae

1,646
3
23
35

answered Jan 16 '18 at 06:48

Uthaya

363
2
15

score 3 · Answer 8 · answered Apr 06 '22 at 06:28

3

Just write it in xml

android:iconifiedByDefault="false"

Worked for me

answered Apr 06 '22 at 06:28

Vahit Keskin

274
1
9

score 2 · Answer 9 · edited Aug 02 '18 at 15:30

Write the lines of code given below in your Java file:

SearchView searchView = (SearchView) findViewById(R.id.searchView);
searchView.setQueryHint("Enter your address");
searchView.setIconified(false);
searchView.clearFocus();

After that, don't forget to write android:focusable="true" in your XML file inside SearchView tag.

For example:

<SearchView 
android:id="@+id/searchView" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:focusable="true" />

score 2 · Answer 10 · answered Oct 06 '18 at 10:17

Use This

searchView.setOnClickListener(new OnClickListener()
    {
        @Override
        public void onClick(View v)
        {
            searchView.onActionViewExpanded();
            OR
            searchView.setIconified(false);
        }
    });

    searchView.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener()
    {
        @Override
        public void onFocusChange(View view, boolean b)
        {
            if(!b)
            {
                if(searchView.getQuery().toString().length() < 1)
                {
                    searchView.setIconified(true); //close the search editor and make search icon again
                    OR
                    searchView.onActionViewCollapsed();
                }

                searchView.clearFocus();

            }
        }
    });

score 0 · Answer 11 · answered Dec 06 '19 at 19:17

in code:

private void initSearchView(View layout) {

    // Locate the EditText in listview_main.xml
    searchInput = (SearchView) layout.findViewById(R.id.search);
    //searchInput.onActionViewExpanded();//force show keyboard at start

    //==>region to enable search after click in input-text(not only at magnifier icon)
    searchInput.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            searchInput.onActionViewExpanded();
        }
    });

    searchInput.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View view, boolean b) {
            if (!b) {
                if (searchInput.getQuery().toString().length() < 1) {
                    searchInput.setIconified(true); 
                }

                searchInput.clearFocus();

            }
        }
    });
    //endregion

}

and in my layout:

 <androidx.appcompat.widget.SearchView
        android:id="@+id/search"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar_main"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="2dp"
        android:background="@drawable/search_border"
        android:inputType="text"
        android:layoutDirection="ltr"
        android:searchSuggestThreshold="2"
        app:queryHint="@string/search"
        app:searchHintIcon="@null" />

score 0 · Answer 12 · answered Aug 07 '20 at 15:38

Use the below code.

<androidx.appcompat.widget.SearchView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/earningSearchView"
        app:queryHint="Search"
        app:iconifiedByDefault="false"
        app:queryBackground="@android:color/transparent"/>

score 0 · Answer 13 · answered Sep 02 '20 at 13:17

So recently I've had to do this and I tried all the answers provided but each had some dodgy behaviour - for example the x close/erase all button would only show up if you'd clicked on the search icon, otherwise you'd be able to edit etc. but you would only see the x as an erase all button.

Looking at the SearchView's code I noticed that clicking the mSearchButton calls onSearchClicked() and not the suggested onActionViewExpanded(), but the former is a package private function so it can't be called directly. So I came up with this:

private val searchButton by lazy { searchView.findViewById<ImageView>(R.id.search_button) }


searchView.setOnClickListener { searchButton.callOnClick() }

This way you get the same behaviour no matter where you click and you don't need to manually set the iconified property in either the xml or programatically.

score 0 · Answer 14 · answered Jun 17 '22 at 15:07

What you ask can be done as follows

For the first click in the bar we use the method onClick of the SearchView to expand it.

public void onClick(View v) {
    SearchView searchView = (SearchView) v;
    searchView.setIconified(false);
}

When it doesn't have the focus then we collapse the SearchView.

Also for the next clicks on the bar, onClick just doesn't work, so we used onFocusChange to expand SearcView too.

final SearchView searchView = findViewById(R.id.searchView);
    searchView.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View view, boolean b) {
            if (b) {
                searchView.setIconified(false);
            }
            if (!b) { // Not have focus
                if (searchView.getQuery().toString().length() < 1) {
                    searchView.setIconified(true);
                }
                searchView.clearFocus();
            }

        }
    });

Android - Make whole search bar clickable

14 Answers14

Linked