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
Related
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.
On android 7 (nexus phone) the title in my context menu appears white. I would expect it to be black as it is on all other devices I tested. The rest of the app looks good.
Update:
I figured out that the colorAccent is the culprit (AppCompat styles various things based on that). I set it to white in a child theme because the tabBar needs to have white tab indicators.
So now the issues is that I need white tab indicators in the actionbar, black titles in dialogs and context menus and Orange text on buttons styled with the Button.Borderless.Colored style. All of these seem to be controlled with colorAccent. I can make a seperate style for the buttons. But the styles of the dialogs and tab indicators are still conflicting. For legacy reasons I cannot use the new toolbar with a tablayout (That one is stylable) but have to use the Actionbar. Any ideas?
White title in context menu screenshot:
Thanks in advance!
Theme:
<resources>
<!-- default theme -->
<style name="Theme.MyApp" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Remove actionbar -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Basic coloring -->
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
<!-- AppCompat dialog themes -->
<item name="dialogTheme">#style/Theme.MyApp.Dialog</item>
<item name="alertDialogTheme">#style/Theme.MyApp.Dialog.Alert</item>
///// Tried this with a custom style but that just f*cked up my tabs...
<item name="actionBarTabStyle">#style/CustomActionBarTabs</item>
</style>
<!-- Alert and dialog styles -->
<style name="Theme.MyApp.Dialog" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
</style>
<style name="Theme.MyApp.Dialog.Alert" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
</style>
</resources>
Djangow, you need to define a new style that with the text color as the specific color you want and then set that style in the app theme you want to use. See this link for the exact coding needed.
UPDATE: Djangow, I apologize. I looked into it and found that you have to add this line <item name="android:actionMenuTextColor">#color/your_color</item> to the main App theme. I found the answer here. Hope that helps
I'm making my app ready for Android 5.0, I'm using the latest compatibility library, here is what my style looks like.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
</resources>
(The ActionBar color is being set programmatically.)
Now, I want the overflow/popup menu to have the dark background like it had in the holo implementation, but I can't get it to work, here is what it looks like:
I have tried setting the popupMenuStyle but it didn't work.
How can I make the popup menu darker?
Stop using the ActionBar. If you want a ToolBar to be set up like an ActionBar, follow this guide on the android-developers blog.
It actually mentions your use case at Dark Action Bar and provides this code:
<android.support.v7.widget.Toolbar
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:minHeight=”#dimen/triple_height_toolbar”
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Not a full answer but what I found so far:
In past versions you needed to specify a drawable (Check https://github.com/StylingAndroid/StylingActionBar code and tutorials)
Apparently, now that is a color. To modify it you need to do specify the following theme:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:actionBarPopupTheme">#style/popupNew</item>
</style>
<style name="popupNew" parent="android:ThemeOverlay.Material.Light">
<item name="android:colorBackground">#color/red</item>
</style>
</resources>
This works correctly if the theme applied to the app is just this.
If I add android:actionBarPopupTheme to my existing theme, it doesn't work. I am trying to figure out why.
Solved my problem by using this style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
<item name="actionModeBackground">#color/actionmode_bg</item>
</style>
<style name="AbStyle" parent="Widget.AppCompat.Toolbar">
<item name="elevation">2dp</item>
<item name="displayOptions">homeAsUp|showTitle</item>
<!--showHome-->
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
</style>
I had to use Widget.AppCompat.Toolbar as the parent actionBarStyle
Add the property popupTheme to your toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:theme="#style/Theme.AppCompat.Light"
app:popupTheme="#style/Theme.AppCompat" />
Or define a new style for your toolbar:
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/green</item>
<item name="popupTheme">#style/Theme.AppCompat.Light</item>
<item name="theme">#style/Theme.AppCompat</item>
</style>
This question has already been answered for styling via XML, but I'm adding an explanation here of how to work out the solution to this and similar styling questions yourself.
First, this is the solution when using AppCompat. To your App's style.xml add actionBarPopupTheme to your theme:
<style name="Theme.MyTheme" parent="#style/Base.Theme.AppCompat.Light.DarkActionBar">
...other stuff here
<item name="actionBarPopupTheme">#style/Theme.MyTheme.ActionBarPopupTheme</item>
</style>
<style name="Theme.MyTheme.ActionBarPopupTheme" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#android:color/black</item>
</style>
Here's the steps I took to arrive at this solution (it takes a bit of detective work as the Android documentation is poor):
Open your App's style.xml in Android Studio
On the line where you App's theme is defined, put your screen cursor in the parent theme (e.g. click in #style/Base.Theme.AppCompat.Light.DarkActionBar) then press F4. This should take you to the source code for the style in the appcompat library.
Within this style I saw this line:
< item name="actionBarPopupTheme">#style/ThemeOverlay.AppCompat.Light< /item>
This looked like a possible place to change the theme of the popup. I searched for "actionBarPopupTheme" in the poor
Android developers documentation and found "Reference to a theme that should be used to
inflate popups shown by widgets in the action bar". So this was worth playing with.
I copied the appcompat line containing "actionBarPopupTheme" to my style.xml then in this line replaced the item's theme reference (the bit in bold above) with Theme.MyTheme.ActionBarPopupTheme.
In my style.xml I created my new style named Theme.MyTheme.ActionBarPopupTheme. I used the same parent that was used in the style I copied from the appcompat source (the bit in bold above).
To ensure my new popup style was working, I changed the parent style to ThemeOverlay.AppCompat.Dark then ran and tested the code on a device. The popup style changed, so now I knew my overriding of actionBarPopupTheme was the correct thing to do. Then I changed back to ThemeOverlay.AppCompat.Light.
The next challenge is to work out what item names to override in Theme.MyTheme.ActionBarPopupTheme. I changed the text and background colours. To find the correct item names that change the style of something can be tricky in some cases. One way to find less obvious style item names is to look through the style definitions in the appcompat xml file (the one you opened when pressing F4 in the 2nd step above), continually descending into parent styles (F4 again!) until you find something that may do what you want. Google searches will help here too.
I'm trying to change the height of my action bar to give it a more Material feel, but whatever I try never seems to work. Currently I have this:
<!-- Main Theme -->
<style name="WPTheme" parent="Theme.Sherlock">
<item name="actionBarStyle">#style/WPTheme.ActionBarStyle</item>
<item name="android:actionBarStyle">#style/WPTheme.ActionBarStyle</item>
<item name="android:actionBarWidgetTheme">#style/CustomActionOverflowDropDownText</item>
<item name="actionBarWidgetTheme">#style/CustomActionOverflowDropDownText</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:actionOverflowButtonStyle">#style/MyOverflowButton</item>
<item name="textColorPrimaryInverse">#android:color/white</item>
<item name="android:windowBackground">#drawable/black</item>
</style>
<!-- Action Bar Theme -->
<style name="WPTheme.ActionBarStyle" parent="Widget.Sherlock.ActionBar">
<item name="background">#drawable/ic_bar_top</item>
<item name="android:background">#drawable/ic_bar_top</item>
<item name="actionBarSize">56dip</item>
<item name="android:actionBarSize">56dip</item>
<item name="actionOverflowButtonStyle">#style/Widget.Sherlock.ActionButton.Overflow</item>
<item name="dropDownListViewStyle">#style/Widget.Sherlock.Light.ListView.DropDown</item>
</style>
Is there any other solutions out there? Or am I just making some bone-head error here that I'm not picking up on? Thanks!
Changing of height of actionbarsherlock is not the solution.
Use Translucent system bars
You can now make the system bars partially translucent with new themes,
Check this project https://github.com/jgilfelt/SystemBarTint
If you're creating a custom theme, set one of these themes as the parent theme or include the windowTranslucentNavigation and windowTranslucentStatus style properties in your theme.
Hope this helps get you started.
Move <item name="actionBarSize">56dip</item> and <item name="android:actionBarSize">56dip</item> to your main theme.
Also, if you'd like, you can check out my blog post on achieving a material style action bar on older android versions here. Though I haven't written it to be used with ActionBarSherlock, with some slight modifications, you should be able to get the same thing working.
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 :)