android searchview grey border around input field API >= 26

Question

I am getting a weird grey border around the input text field of a search view with emulators which have API >= 26. Only SearchViews inside of a fragment encounter this issue.

Can you please advise on how this can be resolved?

SearchView Picture

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/view_layout"
            android:paddingLeft="0dp"
            android:paddingRight="0dp"
            android:paddingTop="0dp"
            android:paddingBottom="0dp"
            android:background="@color/grey_background"
            android:clickable="true"
            android:focusableInTouchMode="true">
<RelativeLayout
    android:id="@+id/search_view_layout"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@color/grey_background">
    <SearchView
        android:id="@+id/search_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:iconifiedByDefault="false"
        android:padding="2dp"
        android:layout_margin="5dp"
        android:layout_marginLeft="0dp"
        android:queryHint="Search...."
        android:elevation="0dp"
        android:background="@drawable/search_view_border"
        android:focusable="false"/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/recycler_view"
    android:paddingTop="5dp"
    android:background="@color/grey_background"
    android:layout_below="@+id/search_view_layout"
    android:clickable="true"
    android:focusableInTouchMode="true"
    android:focusable="true" />
</RelativeLayout>

The code for search_view_border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >    
    <item>
        <shape>
            <!-- set the shadow color here -->
            <stroke
                android:width="10dp"
                android:color="#A1A9B4" />    
            <!-- setting the thickness of shadow (positive value will give shadow on that side) -->
            <padding
                android:bottom="1dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <corners android:radius="0dp"/>
        </shape>
    </item>
    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#ffffff" />
            <corners android:radius="0dp" />
        </shape>
    </item>
</layer-list>

@Quicklearner I have not tried this on a real device with api >= 26 — hby01, Sep 13 '18 at 12:12

score 0 · Answer 1 · answered Sep 13 '18 at 11:32

try this idea

 <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:background="@drawable/border_shape_grey">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:layout_gravity="center"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_gravity="center"
                android:src="@drawable/ic_search"/>
            <EditText
                style="@style/TextAppearance.AppCompat"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:hint="@string/action_search"
                android:focusableInTouchMode="true"
                android:focusable="true"
                android:descendantFocusability="blocksDescendants"
                android:inputType="text"
                android:singleLine="true"
                android:background="#00000000"
                android:padding="8dp"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </FrameLayout>

border_shap_grey.xml

<?xml version="1.0" encoding="utf-8"?>

<stroke android:width="2dp"
    android:color="#f5f6f6"
    />
<solid android:color="#f5f6f6"/>

<padding android:left="1dp"
    android:top="1dp"
    android:right="1dp"
    android:bottom="1dp"
    />

<corners
    android:radius="5dip"/>

thanks for the suggestion; I'll give it a try if there is no fix to using the SearchView — hby01, Sep 13 '18 at 11:51

score 0 · Answer 2 · answered Sep 13 '18 at 12:11

A solution to this issue that I have found:

Change the searchview widget to android.support.v7.widget.SearchView
Retrieve the search_plate layout and set its elevation to 0.

LinearLayout searchPlate = (LinearLayout) searchView.findViewById(android.support.v7.appcompat.R.id.search_plate); searchPlate.setElevation(0f);

Reference: Accepted answer in Changing the background drawable of the searchview widget

android searchview grey border around input field API >= 26

2 Answers2