Android how to style a SearchView in Actionbar? - android

I need to change the style of my SearchView in my ActionBar. In particular I need to change the text hint color and the SearchView icons if possible. How can I accomplish this in XML (is it even possible in XML)?
If this isn't possible, how can I easily recreate similar behavior with a custom view? The close/expand behavior of the SearchView is particularly useful for me.

Have you tried something like this (With ActionBarSherlock):
AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
searchText.setHintTextColor(getResources().getColor(R.color.white));
searchText.setTextColor(getResources().getColor(R.color.white));
It works fine for me.

It looks like you may need to supply a custom layout for your search action. I haven't been able to find any documents that talk about modifying the default SearchView. But this does allow the close/expand behavior.
http://developer.android.com/guide/topics/ui/actionbar.html#ActionView
Related questions:
Honeycomb - customize SearchView inside the action bar
set numeric input type to SearchView in ActionBar

You need to create a new theme and use it in manifest file.
<style name="Theme.Test" parent="#style/Theme.AppCompat.Light">
<item name="searchViewAutoCompleteTextView">#style/Theme.Test.SearchField</item>
</style>
<!-- Search edit text -->
<style name="Theme.Test.SearchField" parent="#style/Widget.AppCompat.Light.AutoCompleteTextView">
<item name="android:textColor">#color/white</item>
<item name="android:textColorHint">#color/white</item>
</style>
It worked fine for me.

The right answer is to overload the action bar widget style with your own custom style. For holo light with dark action bar, put this in your own styles file such as res/values/styles_mytheme.xml:
<style name="Theme.MyTheme" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarWidgetTheme">#style/Theme.MyTheme.Widget</item>
<!-- your other custom styles -->
</style>
<style name="Theme.MyTheme.Widget" parent="#android:style/Theme.Holo">
<item name="android:textColorHint">#android:color/white</item>
<!-- your other custom widget styles -->
</style>
Make sure your application is using theme custom theme as described in enter link description here

Related

Android SearchView icon disappears when SearchView style is overridden

I have a SearchView in the main content area of my activity.
I need to override the SearchView style in my style.xml files (so I can remove the SearchView's underline - as shown here).
However, when I override the SearchView style, its searchIcon just disappears from the UI:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="searchViewStyle">#style/MySearchView</item>
<item name="android:searchViewStyle">#style/MySearchView</item>
</style>
<style name="MySearchView" parent="Widget.AppCompat.Light.SearchView">
<!-- nothing entered here yet! -->
</style>
I know I can specify my own drawable for the searchIcon, but I would like to use the default one.
So how do I specify MySearchView style without losing the default searchIcon?
Update #1
I don't know if this is normal, but I also have a problem where if I override the Button style using this approach, then my buttons lose all their padding and therefore become too small:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="buttonStyle">#style/MyButton</item>
<item name="android:buttonStyle">#style/MyButton</item>
</style>
<style name="MyButton" parent="android:style/Widget.Button">
<item name="android:textColor">#color/white</item>
<item name="android:background">#color/red</item>
</style>
It seems the issue here was using a framework class with a style meant for a support class. The correct SearchView class to use with an AppCompat theme is android.support.v7.widget.SearchView, rather than android.widget.SearchView.
A framework View isn't going to be looking for attributes defined for a support View, so those attributes' settings will just be lost. Since no valid resources would be found during the SearchView's construction, null would be set as the image for each icon's ImageButton, which would explain why multiple icons seemed to have disappeared with this style.

Android: How do I change the style of recent queries list in a SearchView?

I implemented a recent queries Content Provider for my Searchable Configuration and it works, but how do I change the style of the list?
It came with white text on light background, I'd like to change at least the color of text.
Thank you for your help!
Use the suggestionRowLayout attribute from the AppCompat Lollipop’s SearchView API. For a complete list of attributes see this post from Android Developers Blog.
<style name="AppTheme" parent="Theme.AppCompat">
<item name="searchViewStyle">#style/AppTheme.SearchView</item>
</style>
<style name="AppTheme.SearchView" parent="#style/Widget.AppCompat.SearchView">
<!-- Layout for query suggestion rows -->
<item name="suggestionRowLayout">#layout/abc_search_dropdown_item_icons_2line</item>
</style>
If you have problems with the suggestionRowLayout attribute you can try the solution https://stackoverflow.com/a/26581489/1374015. Alternatively, you could try to use the old searchView* theme attributes as you can see in this post.

Any easy way to change Android Action Bar "selected" color?

I'm able to change a lot of colors through using the Android style documentation from here and looking at the source here and here.
Using what I learned above, I was able to change the ActionBar.TabBar, ActionBar.TabText, and ActionBar.TabView, but I don't know what that little highlight is called. Searching for a holo blue in the android source code from above also didn't help.
I still don't know if there is any way in styles.xml to specify that "blue" highlight color to be changed.
EDIT:
I know that I can use the the action bar style generator, but I'm looking at if I can set the color of it in code (whether it be java or xml). I would not like to have to generate a new drawable for this purpose.
The easiest way You can have is to use Android Action Bar Style Generator to easily theme your action bar and tabs.
You can also refer ActionBar Documents for a customized ActionBar.Something like
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActivityTheme" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- other activity and action bar styles here -->
</style>
<!-- style for the action bar backgrounds -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/ab_background</item>
<item name="android:backgroundStacked">#drawable/ab_background</item>
<item name="android:backgroundSplit">#drawable/ab_split_background</item>
</style>
</resources>
Alternatively you can try ActionBarSherlock.There is one sample available in the library named "Style ActionBar".Using this you can change ActionBar tabs underline color.
I also see a useful link in a comment to your question.You are good to go after referring all these links.
Hope this helps.

Light.DarkActionBar menu item text colour unchangeable?

The application I've been developing uses ActionBarSherlock, and the main theme inherits from Theme.Sherlock.Light.DarkActionBar. The design requires that the overflow menu popups have a dark coloured background and white text. This works fine for devices without a physical menu button, and the text appears white as intended. However, if the device DOES have a physical menu button, the text shown in the menu displayed remains black.
My main theme contains
<item name="android:panelBackground">#drawable/menu_hardkey_panel</item>
...Where #drawable/menu_hardkey_panel is a dark coloured 9patch.
The resulting appearance of the menu popup is...
I'm unable to determine why this is happening, or how to manually change the colour of the text. In my main theme, I've tried all of the following...
<item name="android:actionMenuTextColor">#android:color/white</item>
<item name="android:textAppearanceLargePopupMenu">#style/MyMenuTextAppearance.Large</item>
<item name="android:textAppearanceSmallPopupMenu">#style/MyMenuTextAppearance.Small</item>
I've even tried
<item name="android:actionBarWidgetTheme">#style/Theme.MyApp.Dark</item>
...Where Theme.MyApp.Dark is...
<style name="Theme.MyApp.Dark" parent="#style/Theme.Sherlock">
<item name="android:dropDownListViewStyle">#style/DropDownListView</item>
<item name="dropDownListViewStyle">#style/DropDownListView</item>
</style>
None have let me change the text to white. If I make my base theme inherit from Theme.Sherlock, the problem is solved and the text is white, but unfortunately that's not an option.
Not entirely sure about this, but I believe the pop-up menu uses the same styling as the overflow menu. In which case you'd just do something like this.
<item name="android:itemTextAppearance">#style/your_new_text_appearance</item>
<style name="your_new_text_appearance">
<item name="android:textColor">#android:color/white</item>
</style>
Giving it a chance: there is a text appearance called actionMenuTextAppearance. Have you tried that?
Update: I did some more digging and I believe that this file is the layout And there they refer to textAppearanceListItemSmall and textAppearanceSmall. However, it takes this value from a special theme which is specified as following in Theme.Holo.Light
<item name="panelMenuListTheme">#android:style/Theme.Holo.Light.CompactMenu</item>
And like this in Theme.Holo:
<item name="panelMenuListTheme">#android:style/Theme.Holo.CompactMenu</item>
The problems comes from the fact that the parent of Sherlock.__Theme.DarkActionBar is Theme.Sherlock.Light. This is not valid for the dark action bar. Taking the line from Theme.Holo should do the trick.
In my research I haven't found a way to change the text color, but you can at least handle hardkey menus gracefully.
This link provided me with a passable solution to the problem:
https://github.com/jgilfelt/android-actionbarstylegenerator/issues/30
Commenting out the "android:panelBackground" item from my generated theme allowed the text to at least be visible on hardkey menus, even if it doesn't perfectly match the theme.
You could also try replacing the "menu_hardkey_panel_whatever.9.png" drawable with something that will work for your theme and the black text.
For me this solves the problem, try this instead:
<style name="MyTheme" parent="Theme.Sherlock.Light.DarkActionBar">
...
<item name="actionBarWidgetTheme">#null</item>
<item name="android:actionBarWidgetTheme">#null</item>
...
</style>
I found the solution, use:
getSupportActionBarContext()
e.g.
ArrayAdapter<CharSequence> list =
ArrayAdapter.createFromResource(getSupportActionBarContext(), R.array.navigation, layout.simple_spinner_item);
list.setDropDownViewResource(layout.simple_spinner_dropdown_item);
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
getSupportActionBar().setListNavigationCallbacks(list, this);
I think that due to the fact that Theme.Sherlock.Light.DarkActionBar don't style its contents right is due to the actionWidgetTheme attribute is used with a ContextThemeWrapper for inflating the action bar views (Jake Wharton's own words), thus something like the following (not tested) will be needed to fulfill your needs, though breaking your need of not using Theme.Sherlock as parent in one way:
<style name="MyColorTheme" parent="Theme.Sherlock">
<item name="android:actionMenuTextColor">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
<style name="YourMainTheme" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="android:actionMenuTextAppearance">#style/MyColorTheme</item>
<item name="actionMenuTextAppearance">#style/MyColorTheme</item>
</style>
Might work or not work. That's the question :)

ActionBarSherlock Back button color change ?

I am the using the ActionBarSherlock. I have the displayOption "homeAsUp" in my style.xml file. Now this shows a black arrow next to the title of the Activity. Since my theme is White on a blue blackground, i want to change the color of the black arrow, or maybe use a whole new icon resource in its place. How can i do this ?
Kind Regards.
Further to Eric's answer - I wasted a lot of time getting this right.
Remember that these items must go in the parent application theme, inheriting from Theme.Sherlock or similar.
<!-- CUSTOM APP THEME -->
<style name="AppTheme" parent="Theme.Sherlock">
<item name="android:actionBarStyle">#style/AppTheme.ActionBarStyle</item>
<item name="actionBarStyle">#style/AppTheme.ActionBarStyle</item>
<item name="android:homeAsUpIndicator">#drawable/action_bar_ic_ab_back_holo_dark</item>
<item name="homeAsUpIndicator">#drawable/action_bar_ic_ab_back_holo_dark</item>
</style>
Do not put them in the custom Action Bar theme inheriting from Widget.Sherlock.ActionBar.
<!-- ACTION BAR THEME -->
<style name="AppTheme.ActionBarStyle" parent="Widget.Sherlock.ActionBar">
<item name="android:icon">#drawable/action_bar_logo</item>
<item name="icon">#drawable/action_bar_logo</item>
<item name="android:displayOptions">showHome</item>
<item name="displayOptions">showHome</item>
</style>
Be careful when you style ActionBarSherlock !
Here is an extract from the web site (ActionBarSherlock Theming):
Due to limitations in Android's theming system any theme customizations must be declared in two attributes. The normal android-prefixed attributes apply the theme to the native action bar and the unprefixed attributes are for the custom implementation. Since both theming APIs are exactly the same you need only reference your customizations twice rather than having to implement them twice.
So in your case you MUST define two item:
<item name="android:homeAsUpIndicator">#drawable/icon</item>
and
<item name="homeAsUpIndicator">#drawable/icon</item>
Then you are sure that ALL your users will have the same L&F

Categories

Resources