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>
Related
I am new to Android themes, so this is probably a beginners question but I just can't figure it out.
<style name="MyAppTheme" parent="android:Theme.Material">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
</style>
I want to use the new Material theme, so I used Theme.Material with my own colorPrimary and primaryDark colors to get the action bar the way I want it. But for the context menu (the one that opens when you press the 3-dots icon in the top right corner) I want to use the Theme.Material.Light version. So I want the context menu with black text on a white background instead of white text on a gray background.
How can I do this?
I would advise against using the "Material" theme. It's not supported on older devices. However if you use AppCompat then it will achieve the same effect but with backwards compatibility.
If you create a new Activity using the template it will work as you want. Nevertheless, this is the code:
<!--Application-->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="popupTheme">#style/NewAppTheme.PopupOverlay</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
Add this theme to your Toolbar:
app:popupTheme="#style/myStyle"
Define backgroundcolor and textColor in your custom theme for the pop-up menu:
<style name="myStyle" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">yourBackgroundColor</item>
<item name="android:textColor"yourTextcolor></item>
</style>
If you are using ActionBar then use ActionBar Generator and use the generated files in your res folder.
Hope this helps.
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 want to change the color of text in my actionBar (from black to white), but it seems like nothing's working... somebody has suggestions?
Use custom style (If you are using Actionbarsherlock)
<style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="titleTextStyle">#style/TitleText</item>
<item name="android:titleTextStyle">#style/TitleText</item>
</style>
<style name="TitleText">
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">17dip</item>
</style>
in the themes.xml file.
Edit
to apply the theme
<style name="Theme.Custom" parent="Theme.Sherlock.Light">
<item name="actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.Styled.ActionBar</item>
</style>
and in your activity/application in manifest
android:theme="#style/Theme.Custom"
probably the easiest way to style the action bar is using the action bar style generator online tool, you can find it here: http://jgilfelt.github.io/android-actionbarstylegenerator .
It will take care of generating all the needed assets and styles.
To have the text white, you can simply select "Dark" or "Light - Dark Actionbar" as base theme, then change the other colors according to your needs.
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.
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 =)