-
-
Notifications
You must be signed in to change notification settings - Fork 0
Styling the Search Bar
Federico Navarrete edited this page Jul 2, 2019
·
1 revision
Custom Style - styles.xml
Create a custom style and use one of the provided styles as the parent.
Provided Styles are: MaterialSearchBarLight and MaterialSearchBarDark
Example:
<style name="MyCustomTheme" parent="MaterialSearchBarLight">
<item name="mt_searchBarColor">@color/searchBarPrimaryColor</item>
<item name="mt_dividerColor">@color/searchBarDividerColor</item>
<item name="mt_navIconTint">@color/searchBarNavIconTintColor</item>
<item name="mt_searchIconTint">@color/searchBarSearchIconTintColor</item>
<item name="mt_clearIconTint">@color/searchBarClearIconTintColor</item>
<item name="mt_menuIconTint">@color/searchBarMenuIconTintColor</item>
<item name="mt_backIconTint">@color/searchBarBackIconTintColor</item>
<item name="mt_textCursorTint">@color/searchBarCursorColor</item>
<item name="mt_textColor">@color/searchBarTextColor</item>
<item name="mt_hintColor">@color/searchBarHintColor</item>
<item name="mt_placeholderColor">@color/searchBarPlaceholderColor</item>
<item name="mt_highlightedTextColor">@color/searchBarTextHighlightColor</item>
</style>
OR
Custom Colors - colors.xml
Simply set/change these colors(or some) and you have your custom style.
<!--Material SearchBar Light Theme Colors-->
<color name="searchBarIconColor">#3a3a3a</color>
<!--Base
<color name="searchBarPrimaryColor">#FFFFFF</color>
<color name="searchBarCursorColor">#8000a1ff</color>
<color name="searchBarDividerColor">#1F000000</color>
<!--Icons-->
<color name="searchBarNavIconTintColor">@color/searchBarIconColor</color>
<color name="searchBarMenuIconTintColor">@color/searchBarIconColor</color>
<color name="searchBarSearchIconTintColor">@color/searchBarIconColor</color>
<color name="searchBarClearIconTintColor">@color/searchBarIconColor</color>
<color name="searchBarBackIconTintColor">@color/searchBarIconColor</color>
<!--Text-->
<color name="searchBarTextColor">#DE000000</color>
<color name="searchBarHintColor">#42000000</color>
<color name="searchBarPlaceholderColor">#8A000000</color>
<color name="searchBarTextHighlightColor">#8000a1ff</color>
<!--Base-->
<color name="searchBarPrimaryColorDark">#303030</color>
<color name="searchBarDividerColorDark">#1FFFFFFF</color>
<!--Material SearchBar Dark Theme Colors-->
<color name="searchBarIconColorDark">#00a1ff</color>
<!--Icons-->
<color name="searchBarNavIconTintColorDark">@color/searchBarIconColorDark</color>
<color name="searchBarMenuIconTintColorDark">@color/searchBarIconColorDark</color>
<color name="searchBarSearchIconTintColorDark">@color/searchBarIconColorDark</color>
<color name="searchBarClearIconTintColorDark">@color/searchBarIconColorDark</color>
<color name="searchBarBackIconTintColorDark">@color/searchBarIconColorDark</color>
<!--Text-->
<color name="searchBarTextColorDark">#DEFFFFFF</color>
<color name="searchBarHintColorDark">#42FFFFFF</color>
<color name="searchBarPlaceholderColorDark">#8AFFFFFF</color>
<color name="searchBarTextHighlightColorDark">#BF00a1ff</color>
YouTube | Amazon | Goodreads | Cyber Prophets | Sharing Your Stories | TikTok | ||
---|---|---|---|---|---|---|---|
© Federico Navarrete and Supernova IC, 2017-2024. Based on: MaterialSearchBar by Mansur Nashaev.