Search code examples
androiddrawableandroid-icons

Android default SearchView icon has a weird border


I have this menu for my top bar:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.bma.wol.MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_menu_edit" />

    <include layout="@layout/content_main" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:weightSum="1"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:contentDescription="@string/app_name"
                app:srcCompat="@drawable/dw_logo" />

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

and I display it like this

final SearchView searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.action_search));
SearchManager searchManager = (SearchManager) getSystemService(SEARCH_SERVICE);
        searchView.setSearchableInfo(searchManager.getSearchableInfo(getComponentName()));

but it shows up like this:
Top Bar

In fact, all the default icons (@android:drawable) used in my app are displayd like this and I don't understand why other applications don't show the weird shadow / border but mine does


Solution

  • Here is the solution.I was struggling for a few hours then I found what's the problem.

    Open your menu xml file and find the row which specifies the icon

    (Example from my own project)

    <item
        android:id="@+id/item_search"
        android:icon="@android:drawable/ic_search"
        android:title="@string/search"
        app:showAsAction="always" />
    

    The problem is caused by the icon value. Change "@android:drawable/ic_search" to "@drawable/ic_search"

    So it should look like this

    <item
        android:id="@+id/item_search"
        android:icon="@drawable/ic_search"
        android:title="@string/search"
        app:showAsAction="always" />
    

    Now it should work like you've specified.