How to remove white underline in a SearchView widget in Toolbar Android

Question

I am using the Toolbar search widget in my project. Everything works fine but expect the thing which I am completely stuck up with removing the underline below the search field in my toolbar. I have tried many solutions and nothing works out. Below are some of the solutions that I tried.

Requirement is to remove white underline in the image

enter image description here

Ist Solution:

//Removing underline

    int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
    View searchPlate = searchView.findViewById(searchPlateId);
    if (searchPlate!=null) {
        searchPlate.setBackgroundColor (Color.TRANSPARENT);
        int searchTextId = searchPlate.getContext ().getResources ().getIdentifier ("android:id/search_src_text", null, null);

    }

IInd Solution:

 EditText searchEdit = ((EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text));
 searchEdit.setBackgroundColor(Color.TRANSPARENT);

The above code works to change the background of EditText but still underline is displaying below the close icon in SearchBar.

Complete code that I am using for SearchBar widget as follows:

    @Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater infl) {
        super.onCreateOptionsMenu(menu, infl);
        MenuInflater inflater = getActivity().getMenuInflater();
        inflater.inflate(R.menu.action_search, menu);
        final SearchView searchView = (SearchView) MenuItemCompat
                .getActionView(menu.findItem(R.id.search));

        SearchManager searchManager = (SearchManager) getActivity ().getSystemService (getActivity ().SEARCH_SERVICE);
        searchView.setSearchableInfo (searchManager.getSearchableInfo (getActivity ().getComponentName ()));

        //changing edittext color
        EditText searchEdit = ((EditText)searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text));
        searchEdit.setTextColor(Color.WHITE);
}

action_search.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:compat="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/search"
        android:title="Search"
        android:icon="@drawable/abc_ic_search_api_mtrl_alpha"
        compat:showAsAction="ifRoom|collapseActionView"
        compat:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

possible duplicate of this

try to set this two properties in xml file android:submitBackground="@android:color/transparent" android:queryBackground="@android:color/transparent" — Abhishek, May 17 '16 at 03:06
Does the thin line render automatically for you ? I am struggling to add a line ! — user1841702, Aug 01 '16 at 15:51

Kshitij Jain · Answer 1 · 2017-04-13T08:52:07.240

168

If you are using SearchView then use for API below 21

android:queryBackground="@android:color/transparent"

you can use below code if you are using API 21 or more

app:queryBackground="@android:color/transparent"

edited Apr 13 '17 at 08:52

answered Jul 29 '16 at 16:17

Kshitij Jain

2,103
2
13
18

1

FYI, this property is available from Api Level 21 onwards. – Chintan Soni Oct 21 '16 at 06:12
4

try app:queryBackground="@android:color/transparent" =) – Vlad Zbuker Mar 15 '17 at 10:17
1

app:queryBackground="@android:color/transparent" works properly on Api Level 21 instead of android:queryBackground="@android:color/transparent" – Nikhil Apr 13 '17 at 07:44
2

It doesn't work for me on API 29 :( I still see the underline. – Hesam Jul 29 '20 at 21:34
2

TBH, it is **NOT API LEVEL** that makes decision, it is **the VIEW type you use**. For example, I use `SearchView` (not `androidx.appcompat.widget.SearchView` ) in API 28, then I should use `android:` prefix instead. – Samuel T. Chou May 18 '21 at 04:39

score 57 · Accepted Answer · answered Jun 15 '15 at 10:45

57

Once try as follows

View v = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
v.setBackgroundColor(Color.parseColor("here give actionbar color code"));

Hope this will helps you.

answered Jun 15 '15 at 10:45

Nagaraju V

2,739
1
14
19

Thanks! exactly what i was looking for. – Chandru Jun 15 '15 at 11:10
what do you do when the searchView has an Voice button ? i've tried to use the same trick with the `search_voice_btn` id but it's not works – herau Jan 09 '17 at 12:25
2

Thanks a lot. In my case I set the Background drawable to null i.e. _searchView.findViewById(android.support.v7.appcompat.R.id.search_plate)setBackground(null)_ – Vinay Vissh Mar 08 '17 at 13:05
2

Not help me.Underline is stay any way – Alex Oct 16 '17 at 16:31
The following answer should be the accepted answer instead of this. – beyondtheteal Jul 08 '19 at 15:38
For AndroidX use: androidx.appcompat.R.id.search_plate – Bruno Bieri Apr 06 '20 at 14:45

score 57 · Answer 3 · edited Jan 28 '20 at 15:24

57

Just add this line if you are using a v7 or androidx widget

app:queryBackground="@android:color/transparent"

edited Jan 28 '20 at 15:24

AyTee

489
1
8
19

answered May 25 '18 at 10:47

Sharana Hiremath

581
4
3

6

If 'app:' doesn't work try 'android:'. It worked for me. – SHALIN PATEL Mar 13 '20 at 18:53

score 42 · Answer 4 · answered Jan 14 '16 at 18:15

42

Or you can do this through styles:

<style name="SearchViewMy" parent="Widget.AppCompat.Light.SearchView">
    <item name="submitBackground">@color/primaryColor</item>
    <item name="queryBackground">@color/primaryColor</item>
</style>

queryBackground is attribute for the query background. If you support voice search you may want to remove the line also under that mic button. Thats what submitBackground attribute is for.

Then of course apply the style to your theme.

<style name="Theme.App" parent="Theme.AppCompat.Light.NoActionBar.FullScreen">
    <item name="searchViewStyle">@style/SearchViewMy</item>
</style>

answered Jan 14 '16 at 18:15

Tomask

2,344
3
27
37

6

This is the best answer as it doesn't make assumptions about the view hierarchy implementation of the support library, which may change without notice. – TheIT Oct 05 '16 at 01:02
1

Indeed a best answer! Prefer this first before trying any other solution. – Shruti Jul 07 '17 at 11:48
Nope. Does not work – chitgoks Apr 23 '22 at 03:13

Ebrahim Byagowi · Answer 5 · 2021-10-21T14:06:54.313

12

For AndroidX I used this based on other answers here,

searchView.findViewById(androidx.appcompat.R.id.search_plate)
        .setBackgroundColor(Color.TRANSPARENT)

edited Oct 21 '21 at 14:06

answered Mar 25 '19 at 13:29

Ebrahim Byagowi

10,338
4
70
81

1

Awesome solution Thanks:) – iamkdblue Apr 18 '19 at 12:12

score 7 · Answer 6 · answered Feb 10 '22 at 14:54

if you want to remove the underline from SearchView, then just copy paste the below code to your SearchView. it works

 android:queryBackground="@null"

like this,

      <SearchView
                android:id="@+id/searchView"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:queryBackground="@null"
                />

score 6 · Answer 7 · answered Apr 21 '17 at 11:16

6

You can try using the below code, works like a charm for me.

View v = searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
    v.setBackgroundColor(ContextCompat.getColor(context,android.R.color.transparent));

answered Apr 21 '17 at 11:16

ranasaha

165
3
10

1

Instead of `ContextCompat.getColor...` simply use `Color.TRANSPARENT`. – natronite Jul 06 '18 at 12:54

score 3 · Answer 8 · edited Nov 02 '19 at 15:19

3

The below piece of code works for me.

val searchView = menu?.findItem(R.id.action_search)?.actionView as SearchView
searchView.findViewById<View>(androidx.appcompat.R.id.search_plate).background = null

edited Nov 02 '19 at 15:19

Ganesa Vijayakumar

2,422
5
28
41

answered Nov 02 '19 at 14:27

Saurabh Agrawal

59
2

score 2 · Answer 9 · answered Jul 27 '20 at 15:53

For androidx and kotlin:

        menuInflater.inflate(R.menu.conversation_list_screen_menu, menu)
        val searchItem = menu.findItem(R.id.action_search)
        searchView = searchItem.actionView as SearchView
        searchView?.findViewById<View>(androidx.appcompat.R.id.search_plate)?.setBackgroundColor(Color.TRANSPARENT)

score 0 · Answer 10 · answered Nov 07 '16 at 07:00

The code for changing the background color of SearchView edit text is below

public static void setSearchViewEditTextBackgroundColor(Context context, SearchView searchView, int backgroundColor){
    int searchPlateId = context.getResources().getIdentifier("android:id/search_plate", null, null);
    ViewGroup viewGroup = (ViewGroup) searchView.findViewById(searchPlateId);
    viewGroup.setBackgroundColor(ComponentUtils.getColor(context, backgroundColor));
}

If your action bar background color is white then call the above method as follow.

setSearchViewEditTextBackgroundColor(this, searchView, R.color.white);

Now the underline from SearchView edit text will disappear.

Actually, this is the only answer that worked for me. An expanded explanation on why this works is available [here](https://stackoverflow.com/questions/11085308/changing-the-background-drawable-of-the-searchview-widget/11669808#11669808) — Igor, Jun 05 '18 at 22:47

score 0 · Answer 11 · answered Aug 09 '19 at 19:18

First you should get the bottom line simply like this:

searchPlate = (View) findViewById(R.id.search_plate);

Then you should set background color to transparent like this:

searchPlate.setBackgroundColor(Color.TRANSPARENT);

This works perfectly for androidx.appcompat.widget.SearchView!

How to remove white underline in a SearchView widget in Toolbar Android

11 Answers11

Linked