CODEWITHSUNDEEP
androidstylesmaterial-designsearchviewstyling
Mike
Mike

Reputation: 79

How to style SearchView on Android 5.0+?

I'm creating app for Android 5.0+, so I'm working with API 21+.

What's the benefits of using android.support.v7.widget.SearchView vs SearchView?

Can I use SearchView or I must use android.support.v7.widget.SearchView?

How to style SearchView in this way. I also need to reuse this style in other Activities.

enter image description here

My current styles:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimaryDark">@color/color_primary</item>
    <item name="colorAccent">@color/color_accent</item>
    <item name="android:textColor">@color/white</item>
</style>

Upvotes: 1

Views: 4180

Answers (1)

Sinan Ceylan
Sinan Ceylan

Reputation: 1073

To change searchview icons, add this to your styles.xml file

    <!--SearchViewStyle -->
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
    <item name="searchIcon">@drawable/ic_search</item>
    <item name="voiceIcon">@drawable/ic_search_voice</item>
    <item name="closeIcon">@drawable/ic_search_close</item>
    <item name="searchHintIcon">@drawable/ic_search</item>
</style>

Then use it by adding as an item to your AppTheme style as below:

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimaryDark">@color/color_primary</item>
        <item name="colorAccent">@color/color_accent</item>
        <item name="android:textColor">@color/white</item>
        <item name="searchViewStyle">@style/SearchViewStyle</item>
    </style>

And to change your searchView text and hint colors add this items to your AppTheme:

    <!--SearchView query text color-->
    <item name="android:textColorPrimary">@color/textColorPrimary</item>

    <!--SearchView query hint text color-->
    <item name="android:textColorHint">@color/textColorHint</item>

So your final styles.xml file will be something like this:

         <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimaryDark">@color/color_primary</item>
            <item name="colorAccent">@color/color_accent</item>
            <item name="android:textColor">@color/white</item>
            <item name="searchViewStyle">@style/SearchViewStyle</item>
            <!--SearchView query text color-->
            <item name="android:textColorPrimary">@color/textColorPrimary</item>
            <!--SearchView query hint text color-->
            <item name="android:textColorHint">@color/textColorHint</item>
        </style>
        <!--SearchViewStyle -->
        <style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
            <item name="searchIcon">@drawable/ic_search</item>
            <item name="voiceIcon">@drawable/ic_search_voice</item>
            <item name="closeIcon">@drawable/ic_search_close</item>
            <item name="searchHintIcon">@drawable/ic_search</item>
        </style>

Upvotes: 6

Related Questions