I've an app that would run on both ICS, honeycomb. For both these flavors, I wish to keep same theme: Theme.Holo.Light.DarkActionBar which is SDK >=14.
I created a custom style:
<style name="ActionBar.Dark" parent="#style/ActionBar">
<item name="android:background">#color/actionbar_background_dark</item>
</style>
<style name="Holo.light.dark.actionbar" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar.Dark</item>
<item name="android:titleTextStyle">#android:style/TextAppearance.Holo.Widget.ActionBar.Title</item>
<item name="android:subtitleTextStyle">#android:style/TextAppearance.Holo.Widget.ActionBar.Subtitle</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:windowActionBarOverlay">false</item>
<item name="android:backgroundStacked">#drawable/ab_stacked_transparent_light_holo</item>
<item name="android:backgroundSplit">#drawable/ab_bottom_transparent_dark_holo</item>
<item name="android:homeAsUpIndicator">#drawable/ic_ab_back_holo_dark</item>
</style>
But this does only the half job, the dropdown spinner has white background with white text and all window titles are black text on black background.
How do I know of all the attributes that I should set to achieve full Theme.Holo.Light.DarkActionBar
I would suggest taking a look at the Sherlock ActionBar. Under the library folder, there is a code intended to make the ActionBar work on versions prior to honeycomb. The guy had to set each of the ActionBar's attributes, so it could be handy exploring it. Look at the abs__styles.xml under the values folder.
Hope it helps and good luck =)
Related
I am currently trying to theme Alert Dialogs on an android app I am making.
I can theme API 9 (min for app) through API 19/20 (KitKat).
However, I cannot theme API 21 (Lollipop) correctly. I do not like the off-white/light-gray color that is the default theme, so I am trying to make the entire background white.
I can only do a certain amount by setting the background of the layout of the dialog to white, and also the button backgrounds to a selector which is white.
There is a strip of space behind the buttons (all across the bottom) that remains the grayish color though. I have tried looking into if I can change it by theming the buttonBarStyle attribute, but haven't had any luck.
Here are some code snippets:
Theme:
<style name="myTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:alertDialogStyle">#style/AlertDialogCustom</item>
</style>
Custom Alert Dialog Theme:
<style name="AlertDialogCustom" parent="#android:style/Theme.Dialog">
<item name="android:bottomBright">#color/white</item>
<item name="android:bottomDark">#color/white</item>
<item name="android:bottomMedium">#color/white</item>
<item name="android:centerBright">#color/white</item>
<item name="android:centerDark">#color/white</item>
<item name="android:centerMedium">#color/white</item>
<item name="android:fullBright">#color/white</item>
<item name="android:fullDark">#color/white</item>
<item name="android:topBright">#color/white</item>
<item name="android:topDark">#color/white</item>
</style>
I have tried some things like this inside the Dialog theme.
Nothing has worked:
<item name="android:background">#color/white</item>
<item name="android:colorBackground">#color/white</item>
<item name="android:buttonBarStyle">#style/CustomButtonBarStyle</item>
CustomButtonBarStyle:
<style name="CustomButtonBarStyle" parent="#android:style/ButtonBar">
<item name="android:background">#color/white</item>
<item name="android:divider">#color/white</item>
</style>
Any help would be appreciated!
Found out I needed to use
<item name="android:alertDialogTheme">#style/AlertDialogCustom</item>
instead of alertDialogStyle. Don't know why it made a difference, I would have expected either to work, since Style worked all the way up to api 21.
I am posting this answer well after I had this question, and the solution I wound up coming up with (I may have had other issues with above answer, I don't remember) was re-creating the entire dialog using a layout, and having custom buttons in the layout.
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 followed this Guide to style my ActionBar. I use fixed tabs in my app so I want to theme the tabs too.
(Note: I'm using the appcompat theme to ensure some backwards compatibility)
So I used
<style
name="CustomTheme"
parent="#style/Theme.AppCompat.Light" >
<item name="android:actionBarStyle">#style/CustomActionBar</item>
<item name="actionBarStyle">#style/CustomActionBar</item>
<item name="android:actionBarTabStyle">#style/CustomActionBarTabs</item>
<item name="actionBarTabStyle">#style/CustomActionBarTabs</item>
</style>
as my theme.
I set the ActionBar background without problems, but then I tried theming the tabs with:
<style
name="CustomActionBarTabs"
parent="#style/Widget.AppCompat.ActionBar.TabView" >
<item name="android:background">#drawable/customtheme_actionbar_tab_indicator</item>
<item name="background">#drawable/customtheme_actionbar_tab_indicator</item>
</style>
The background points to a StateList where I set different drawables for different contexts, which works kind of as expected. Except it works just for the tabs. Not for the ActionBar.
The separator and the background of the tab bar is not themed.
How can I theme those ? (The grey part)
Theme Creation Guidelines
I wonder if there are any guidelines for creating a theme that looks good ?
(good = similar to default theme, so the app fits into the android ecosystem)
Because If you look closely at the default themes you can see a small line at the bottom of the ActionBar drawable. (The part which is light green in my theme)
There may be other things which you should consider when creating a theme that looks similar to the default themes, so it would be nice to some guideline.
Also: Should the TabBar always be darker than the ActionBar ?
(If so, how much darker?)
How much brighter/darker than the ActionBar color should the image color (like the color of the overflow button in the image) be ?
Thanks in advance,
Uriel
Add this
<style
name="CustomTheme"
parent="#style/Theme.AppCompat.Light" >
.
.
.
<item name="android:actionBarTabBarStyle">#style/TabBar</item>
</style>
And then
<style name="TabBar" parent="#style/Widget.AppCompat.ActionBar.TabBar">
<item name="android:background">/** Whatever color you want, like #ffff00 **/</item>
</style>
Just incase, it may help somebody
This below worked for me
<style name="Theme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarTabStyle">#style/Theme.MyActionBarTab</item>
<item name="actionBarTabTextStyle">#style/Theme.MyActionBarTabText</item>
</style>
<style name="Theme.MyActionBarTab" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#color/gray_mask</item>
</style>
<style name="Theme.MyActionBarTabText" parent="Widget.AppCompat.Light.ActionBar.TabText">
<item name="android:textColor">#color/black</item>
<item name="android:textSize">#dimen/size_28</item>
<item name="android:gravity">center</item>
<item name="textAllCaps">false</item>
</style>
I use the newest ActionBarSherlock extension of the support library in my application. I came across a weird appearance of the views and action bar itself when I ran an app on emulator 4.2 and device with android 4.2 Please take a look at the screenshots from the emulator. We can see that blue line appears in every line separator in the ListView and underline the home icon.
Also the little right arrow is underline and not scaled properly as well.
And to put that in perspective, it display well in emulator with android 2.2
The way I use the Theme is:
ManifestFile.xml:
android:theme="#style/AppThemeWithoutTitle"
and styles.xml:
<style name="AppThemeWithoutTitle" parent="Widget.Sherlock.ActionBar">
<item name="actionBarStyle">#style/MyActionBarWithoutTitle</item>
<item name="android:actionBarStyle">#style/MyActionBarWithoutTitle</item>
</style>
<style name="MyActionBarWithoutTitle" parent="Widget.Sherlock.ActionBar">
<item name="android:displayOptions">useLogo|showHome</item>
</style>
How can I solve this issue?
Widget.Sherlock.ActionBar isn't a theme, it's a style. The first clue is it starts with Widget. The convention for themes in Android is to start it with the word Theme or at least put the word Theme in the name of the style.
The style you overrode and tried to use as a Theme is the style assigned to actionBarStyle which is the very thing you are trying to override.
You need to have an actual theme as your parent, then, and only then can you override actionBarStyle and have it work.
<style name="MyAppTheme" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/MyActionBarTheme</item>
<item name="android:actionBarStyle">#style/MyActionBarTheme</item>
</style>
<style name="MyActionBarTheme" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/bg_striped</item>
<item name="android:background">#drawable/bg_striped</item>
<item name="backgroundSplit">#drawable/bg_striped_split</item>
<item name="android:backgroundSplit">#drawable/bg_striped_split</item>
</style>
You can find all the available themes you can override here.
I'm using a custom theme that inherits from DarkActionBar and I want to customize dropdown menu to be white like when using Light Holo theme.
I've been able to change the background to white using:
<style name="MyTheme" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/MyDropDownNav</item>
</style>
<style name="MyDropDownNav">
<item name="android:background">#drawable/spinner_background_white</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_whyite</item>
<item name="android:dropDownSelector">#drawable/selectable_background_white</item>
</style>
But I haven't any clue of how to change the text color to black. Because after setting white drawable the problem is that text isn't visible because is white on white background.
I answer myself after some investigation.
In addition to question's styling you need to:
Customize android:spinnerDropDownItemStyle for actionBarWidgetTheme changing it's text appearance.
Also don't forget that dropdown list is managed by the adapter you use. Then if you used the standard one (simple_dropdown_item_1line) there's no problem. But if you used a custom one like me (to be able to add an icon) don't forget to apply style="?attr/spinnerDropDownItemStyle" in your layout TextView.
Then final custom style is:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.myapp" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/myapp_DropDownNav</item>
<item name="android:actionBarWidgetTheme">#style/myapp.actionBarWidgetTheme</item>
</style>
<style name="myapp.actionBarWidgetTheme" parent="#style/Theme.">
<item name="android:spinnerDropDownItemStyle">#style/myapp.Widget.DropDownItem.Spinner</item>
</style>
<style name="myapp_DropDownNav" parent="#style/Widget.Spinner.DropDown.ActionBar">
<item name="background">#drawable/spinner_background_ab_myapp</item>
<item name="android:background">#drawable/spinner_background_ab_myapp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myapp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myapp</item>
</style>
<style name="myapp.Widget.DropDownItem.Spinner" parent="Widget.DropDownItem.Spinner">
<item name="android:textAppearance">#style/myapp.TextAppearance.Widget.DropDownItem</item>
</style>
<style name="myapp.TextAppearance.Widget.DropDownItem" parent="TextAppearance.Widget.DropDownItem">
<item name="android:textColor">#color/black</item>
</style>
Where drawables in myapp_DropDownNav are white background ones that you can generate with ActionBar Style generator in Android Asset Studio
Try setting itemTextAppearance. That should achieve what you want.
I have stumbled on what may be the simplest way to do this. I was working with the AppCompat library.
<style name="ApplicationTheme" parent="#style/Theme.AppCompat">
<item name="android:actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
<item name="actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
</style>
My advice is to simply inherit from the Sherlock.Light theme and change the applicable fields to the Dark values. For my app, we wanted a white "up" icon, and white text for the action labels. I don't provide dark versions of my actionbar icons, so they are all white anyway. So after several hours messing around with it and following different people's suggestions, I finally found what I was looking for in the ABS themes file.
I inherit from Sherlock.Light (well, technically HoloEverywhereLight.Sherlock but...) and change:
<item name="android:actionMenuTextColor">#color/White</item>
<item name="actionMenuTextColor">#color/White</item>
<item name="android:homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="android:dividerVertical">#drawable/abs__list_divider_holo_dark</item>
<item name="dividerVertical">#drawable/abs__list_divider_holo_dark</item>
That's it. It's way simpler and easier than trying to extend classes, restyle things in code, etc.