I can't figure out why the stacked ActionBar I have implemented has a gap between the left most tab and the edge of the screen.
This is not the case with the right most tab.
I tried to remove the dividers by styling the ActionBar. After playing around with styles for a little bit, it seems like I am able to override attributes of the TabView style but not the TabBar style of ActionBarSherlock.
<style name="ActionBarTabBarStyle.Dark" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="android:divider">#null</item>
<item name="android:showDividers">none</item>
<item name="android:dividerPadding">0dip</item>
</style>
Then I realized I need to include identical unprefixed attributes.
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.
But I tried to include identical unprefixed attributes but that didnt work for me.
I tried to include identical unprefixed attributes.
<style name="ActionBarTabBarStyle.Dark" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="android:divider">#null</item>
<item name="android:showDividers">none</item>
<item name="android:dividerPadding">0dip</item>
<item name="divider">#null</item>
<item name="showDividers">none</item>
<item name="dividerPadding">0dip</item>
</style>
But it throws an error
Error: No resource found that matches the given name: attr 'dividerPadding'.
Error: No resource found that matches the given name: attr 'showDividers'.
So then i removed those two attributes and tried to run it again, but i still see the tabbar dividiers.
<style name="ActionBarTabBarStyle.Dark" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="android:divider">#null</item>
<item name="android:showDividers">none</item>
<item name="android:dividerPadding">0dip</item>
<item name="divider">#null</item>
</style>
In my AndroidManifest.xml file, I included
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18"/>
Any suggestions or thoughts about what may be the issue?
Update
I also tried
<style name="Theme.Dark" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarDivider">#null</item>
<item name="android:actionBarDivider">#null</item>
</style>
But this didn't remove the dividers either. Is there another attribute which overrides these attributes?
You have to change the android:actionBarDivider attribute which belongs to the theme, not to the action bar style android:divider. You can remove the divider like this:
<style name="AppTheme" parent="Theme.Sherlock">
<item name="actionBarDivider">#null</item>
<item name="android:actionBarDivider">#null</item>
</style>
I will accept anyone with an answer that involves keeping ActionBarSherlock, however, I removed this library and now I am just using the support libraries and am no longer having that spacing issue. I guess there might be an issue with ActionBarSherlock. But since it is no longer being supported I think the best solution is just to use the Support libraries.
Related
I'm having a hard time trying to style a ListPreference.
I've applied a main theme which declares a preferenceTheme and both of them link to a dialogTheme (and alertDialogTheme respectively). It works except that the text color of the items doesn't change - but the color of all other texts does. I cannot rely on a workaround because I'm using the v7 preferences and thus cannot override the dialog methods in a custom class.
For me it looks like the rows ignore the text color value, but maybe someone else has a solution for this. Otherwise this might be a bug?
Main style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- [...] -->
<!-- Some color values -->
<item name="android:dialogTheme">#style/DialogTheme</item>
<item name="android:alertDialogTheme">#style/DialogTheme</item>
<item name="dialogTheme">#style/DialogTheme</item>
<item name="alertDialogTheme">#style/DialogTheme</item>
<item name="preferenceTheme">#style/PreferenceTheme</item>
</style>
PreferenceTheme:
<style name="PreferenceTheme" parent="PreferenceThemeOverlay.v14.Material">
<!-- [...] -->
<!-- Some color values -->
<item name="android:textColor">#color/preference_primary_color</item>
<item name="android:textColorPrimary">#color/preference_primary_color</item>
<item name="android:textColorSecondary">#color/preference_primary_color</item>
<item name="android:textColorHighlight">#color/preference_primary_color</item>
<item name="android:editTextColor">#color/preference_primary_color</item>
<item name="android:dialogTheme">#style/DialogTheme</item>
<item name="android:alertDialogTheme">#style/DialogTheme</item>
<item name="preferenceTheme">#style/PreferenceTheme</item>
</style>
DialogTheme:
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColor">#EEEEEE</item>
<item name="android:textColorPrimary">#EEEEEE</item>
<item name="android:textColorSecondary">#EEEEEE</item>
<item name="android:textColorHighlight">#EEEEEE</item>
<item name="android:textColorTertiary">#EEEEEE</item>
<item name="android:textColorAlertDialogListItem">#EEEEEE</item>
<item name="android:editTextColor">#EEEEEE</item>
<item name="color">#EEEEEE</item>
</style>
This is how it looks.The text should be #EEEEEE. I've snipped it but the text colors are applied in each of the given styles.
You did everything right, except one thing: do not use the android prefix when overriding textColorAlertDialogListItem because this is not the framework version of AlertDialog.
This statement is generally true for almost all attributes that belong to the support widgets / views. The reason is pretty straightforward: not all attributes are available on the older platforms. Such example is android:colorControlActivated which was introduced in API 21. The AppCompat lib declares its own colorControlActivated so it's available on older API levels, too. In this case the developer should not use the android prefix when defining the style in the theme as that would point to the platform version of the attribute instead of the AppCompat one.
TL;DR: Do not use the android prefix for support widgets unless you have to (i.e. you get compilation error).
P.S.: I have created a fix / extension to the support preferences-v7 lib's annoying things that you might want to check out.
Also for radio buttons color add <item name="colorAccent">#000000</item> to your style.
Be careful, it's not android:colorAccent but colorAccent
I need to change text size of action buttons in AppBar/Toolbar. It should be 14sp, but I'll use 20sp in this example, because it is more evident. I am using appcompat-v7 22.1.1
At first I tried to use theme attribute android:actionButtonStyle:
<style name="FirstAttemptTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionButtonStyle">#style/Custom.Widget.AppCompat.Light.ActionButton</item>
</style>
<style name="Custom.Widget.AppCompat.Light.ActionButton" parent="Widget.AppCompat.Light.ActionButton">
<item name="android:textSize">20sp</item>
</style>
Then I ran application on the Lollipop and the result was as needed:
But then I used an emulator with lower version and my theming had no effect:
I digged a little deeper and discovered that abc_action_menu_item_layout.xml is used for action menu items and it has a line android:textAppearance="?attr/actionMenuTextAppearance"
So I tried to modify this theme attribute (I also had to add textStyle:bold):
<style name="SecondAttemptTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionMenuTextAppearance">#style/Custom.TextAppearance.AppCompat.Widget.ActionBar.Menu</item>
</style>
<style name="Custom.TextAppearance.AppCompat.Widget.ActionBar.Menu" parent="TextAppearance.AppCompat.Widget.ActionBar.Menu">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>
As in the first time, the result was as needed on Lollipop and no effect on any version below.
So, the question is: how to properly change text size for action menu item?
PS: I created a simple project on github to demostrate my issue
It appears that actionButtonStyle and actionMenuTextAppearance should be used without android: namespace.
As it can be seen in values-v21/values.xml of support library, Lollipop uses attribute from system theme (note the android: prefix), that's why my attempts worked with it:
<style name="Base.V21.Theme.AppCompat.Light" parent="Base.V7.Theme.AppCompat.Light">
...
<item name="actionButtonStyle">?android:attr/actionButtonStyle</item>
...
</style>
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.
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