How can I change the Search Widget Icon to be white for androidx

Question

I have read through everything question I can find, and tried so many things but nothing is working. A lot of answers seem to relate to the v7 support library. I am using AndroidX and Kotlin. I would like to change the color of searchIcon and closeIcon to white. I would also like to remove the searchHintIcon.

AndroidManifest.xml

    <activity
        android:name=".MainActivity"
        android:theme="@style/AppTheme"
        android:label="@string/app_name">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

Menu

    <item
    android:id="@+id/action_search"
    android:orderInCategory="1"
    app:showAsAction="ifRoom"
    android:title=""
    app:actionViewClass="androidx.appcompat.widget.SearchView" />

styles.xml (values-v21)

<resources>

<style
    name="AppTheme"
    parent="@style/Theme.AppCompat.Light.DarkActionBar">

    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    
    <!--changes the search text to white -->
    <item name="android:editTextColor">@color/white</item>

    <item name="searchViewStyle">@style/AppTheme.SearchView</item>
</style>

<style name="AppTheme.SearchView" parent="Widget.AppCompat.SearchView">
    <item name="searchIcon">@drawable/ic_action_search_white</item>
    <item name="android:searchIcon">@drawable/ic_action_search_white</item>
    <item name="android:closeIcon">@drawable/ic_action_clear_white</item>
    <item name="closeIcon">@drawable/ic_action_clear_white</item>
    <item name="searchHintIcon">@null</item>
</style>

</resources>

I am not using a toolbar, just the action bar. I would like to change the icon color using xml if possible. Happy to add a toolbar if that helps.

Answer 1

I am have finally figured it out, so I will answer my own question. I have changed my menu to this:

<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/action_search"
    android:title="Search"
    android:icon="@drawable/ic_action_search_white"
    app:showAsAction="ifRoom|collapseActionView"
    app:actionViewClass="androidx.appcompat.widget.SearchView"/>

The collapseActionView fixes the issue and allows the icon to be picked up. I resisted using it as I was getting weird behaviour.

Once I updated the OnCreateOptionsMenu everything works as expected and the icons are white

override fun onCreateOptionsMenu(menu: Menu): Boolean {

    menuInflater.inflate(R.menu.menu_main, menu)
    menuInflater.inflate(R.menu.menu_search, menu)

    sv = menu.findItem(R.id.action_search).actionView as SearchView
    sv.isSubmitButtonEnabled = false
    sv.setOnQueryTextListener(this)

    return true
}

For completeness here is the rest of the code:

override fun onQueryTextSubmit(query: String?): Boolean {
    getData(query.toString())
    return true
}

override fun onQueryTextChange(newText: String?): Boolean {
    getData(newText.toString())
    return true
}

private fun getData(newText: String) {
    searchTerm = "%".plus(newText).plus("%")
    //todo ... get the data from the db
}