Common styles for v10 and v11+? - android

I'm using the v7 support library in order to have an ActionBar on API Level 10+ (that's Android 2.3.3+). Now, I want to customize the look a bit, so I added an application theme. Excerpt of my values/styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="background">#drawable/bg_actionbar</item>
</style>
This works fine on Android 2.3.3, where the compat stuff is used. However, on Android 4.3 on an N4 (or an emulator), the styles are not applied. If I change the styles.xml file to:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/bg_actionbar</item>
</style>
(notice the added android: prefix) it works on 4.3, but doesn't on 2.3 (styles not applied).
Is there any way I can get around this without specifying each <item> twice, once with the prefix and once without?

There is a perfect example on the google docs site:
http://developer.android.com/guide/topics/ui/actionbar.html#StyleExample
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="android:actionMenuTextColor">#color/actionbar_text</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="actionMenuTextColor">#color/actionbar_text</item>
</style>
<!-- general styles for the action bar -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">#style/TitleTextStyle</item>
<item name="android:background">#drawable/actionbar_background</item>
<item name="android:backgroundStacked">#drawable/actionbar_background</item>
<item name="android:backgroundSplit">#drawable/actionbar_background</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">#style/TitleTextStyle</item>
<item name="background">#drawable/actionbar_background</item>
<item name="backgroundStacked">#drawable/actionbar_background</item>
<item name="backgroundSplit">#drawable/actionbar_background</item>
</style>
<!-- action bar title text -->
<style name="TitleTextStyle"
parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/actionbar_text</item>
</style>
<!-- action bar tab text -->
<style name="TabTextStyle"
parent="#style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">#color/actionbar_text</item>
</style>
</resources>

Is there any way I can get around this without specifying each <item>
twice, once with the prefix and once without?
Another way would be to create version specific res/values-XX folders.
Since the divide is version 10 and versions 10+, you can create res/values-v10/styles.xml containing:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="background">#drawable/bg_actionbar</item>
</style>
Let versions 10+ deal with the default res/values/styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/bg_actionbar</item>
</style>
Still, it isn't much different from specifying <item></item> twice.
For reference, you can look at the project structure of ActionBarSherlock. That should provide you some pointers.
You can also take a look at: Applying Styles and Themes to the UI. Scroll down to sub-section Select a theme based on platform version.

If I have not misunderstand your issue, you can collapse it together this way
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/bg_actionbar</item>
<item name="background">#drawable/bg_actionbar</item>
</style>
In my experience, this way eclipse gives compile time errors every time you change somethings inside styles.xml (due of lint if I remember good), but clean and rebuild make those errors go away.

Related

Wrong colors on pre-lollipop devices with AppCompatTheme

I have this in my style.xml file
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<!--<item name="colorPrimary">#color/colorPrimary</item>-->
<!--<item name="colorAccent">#color/colorAccent</item>-->
<item name="android:windowBackground">#color/white</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="LoginScreenTheme" parent="AppTheme">
<item name="android:textColor">#color/white</item>
<item name="colorAccent">#color/white</item>
<item name="colorPrimaryDark">#color/login_background_dark</item>
</style>
<style name="LoginEditTextTheme" parent="AppTheme">
<item name="colorControlNormal">#color/login_edit_text_hint_color</item>
<item name="colorControlActivated">#color/login_edit_text_accent</item>
<item name="colorControlHighlight">#color/login_edit_text_accent</item>
<item name="android:textColorHint">#color/login_edit_text_hint_color</item>
<item name="android:textColorPrimary">#color/white</item>
</style>
<style name="LoginErrorFloatingLabelTheme" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#color/login_error_floating_label_color</item>
</style>
<style name="ActionBarTheme" parent="AppTheme">
<item name="android:background">#color/home_primary_color</item>
</style>
<style name="LoginWaitingProgressBar" parent="AppTheme">
<item name="colorAccent">#color/orange_light</item>
</style>
</resources>
On devices with Lollipop and upper everything is alright, but on pre-lollipop there are wrong colors. It's look like theme is not applied to the devices with pre-lollipop android version. After googling I found that people are adviced to remove 'android:' prefix before every item in AppCompat theme but it doesn't work for me coz android studio doesn't see items after that.
The reason was that I didn't extend AppCompatActivity. When I changed it everything became okay.
colorPrimary , colorPrimaryDark and colorAccent items are available on only API 21+.If you want to apply them on pre lollipop devices you must move your current styles.xml file to values-v21 and create a new styles.xml on values folder and use the correct item for pre lollipop.
Check out android developers for more https://developer.android.com/guide/topics/ui/themes.html

Android actionbar background same color as text

This is my first project working with Android (Xamarin) and i was trying to style the ActionBar. I succesfully changed the background color, but now the text within it is either gone or the same color as the background. I think the second because i only changed the background. Below is my Styles.xml.
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<style name="hme" parent="android:Theme.Material">
<item name="android:actionBarStyle">#style/hme.ActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/hme.ActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="hme.ActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="android:background">#color/primary</item>
<item name="android:titleTextStyle">#style/hme.ActionBar.Text</item>
<!-- Support library compatibility -->
<item name="background">#color/primary</item>
</style>
<style name="hme.ActionBar.Text" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="hme.Splash" parent="android:Theme">
<item name="android:windowBackground">#drawable/splash</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
And here is a screenshot on Gyazo of how it looks. (Not enough rep to post a picture): http://gyazo.com/161cd58ced1f7a147b29f8ee6aa401af
I checked other fixes on SO on diffent questions but nothing seems to work, can anybody help me?
You can add
<item name="android:textColorPrimary">#android:color/black</item>
into your hme style:
<style name="hme" parent="android:Theme.Material">
<item name="android:actionBarStyle">#style/hme.ActionBar</item>
<item name="android:textColorPrimary">#android:color/black</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/hme.ActionBar</item>
</style>
Check also:
<item name="android:textColor">#android:color/black</item>
<item name="android:textColorSecondary">#android:color/black</item>
may be useful.

Action bar menu font color change using appcompat

I have a contextual action mode, the text color of the action bar menu should be red in color.
I am able to change the text color using
<style name="AppTheme" parent="#style/Theme.AppCompat.Light">
<!-- Setting values in the android namespace affects API levels 14+ -->
<item name="android:actionBarStyle">#style/MyStyledActionBar</item>
</style>
<style name="MyStyledActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<!-- Setting values in the android namespace affects API levels 14+ -->
<item name="android:background">#drawable/bg_action_bar</item>
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
<item name="android:actionMenuTextAppearance">#style/MyActionBarMenuText</item>
<item name="android:actionMenuTextColor">#style/MyActionBarMenuText</item>
<item name="android:actionOverflowButtonStyle">#style/MyActionButtonOverFlow</item>
</style>
<style name="MyActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/font_half_white</item>
</style>
<style name="MyActionBarMenuText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Menu">
<item name="android:textColor">#color/font_half_white</item>
</style>
<style name="MyActionButtonOverFlow" parent="#style/Widget.AppCompat.Light.Base.ActionButton.Overflow">
<item name="android:src">#drawable/ic_action_search</item>
</style>
It works in android 2.3, 4.1. but when i run the same in android 4.4. It shows the default black color
Can anyone please let me know, what is the issue.
Thanks in advance.
Maybe it is not the cleanest way to do this but to change the color of my action bar text I use HTML code in the java classe like this:
getSupportActionBar().setTitle(Html.fromHtml("<font color='#FF0000'>"+Your Title+"</font>"));
Hope it helps!
please use below code its working for me
and still if you have doubt and its not working then tell me
<resources>
<!--
Base application theme for API 14+. This theme completely replaces
AppBaseTheme from BOTH res/values/styles.xml and
res/values-v11/styles.xml on API 14+ devices.
-->
<style name="AppTheme" parent="AppBaseTheme">
<!-- <item name="windowBackground">#color/background_window</item> -->
<!-- <item name="android:actionBarStyle">#style/ActionBarStyle</item> -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.ActionBar">
<item name="android:icon">#drawable/ic_launcher</item>
<item name="android:background">#FF666666</item>
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
</style>
<style name="MyActionBarTitleText" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#android:color/holo_blue_bright</item>
</style>

How to change the background color of the action bar in Android?

I was working hard to achieve this but I had no luck. What I tried to do is to change the background color from the style that I attached in my main style tag. This is my code:
<resources>
<style name="AppBaseTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item ></item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#2E495E</item>
</style>
Still nothing changed.
I get this in my application:
http://i.imgur.com/m1MrGwk.png
I had the same issue and it's probably the same problem you were having. Notice the docs say the following:
each style property that you declare must be declared twice..
So my issue was I declared it for 2.1 and up, but not for 3.0 and greater so my Galaxy S4 of course could not see any changes to the colours I was making.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!--Support Library compatibility-->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/green</item>
<!--Support Library compatibility-->
<item name="background">#color/green</item>
</style>
<style name="NoActionBar" parent="Theme.AppCompat.Light">
<item name="android:windowNoTitle">true</item>
</style>
Is this the only style.xml you have? Else check if you are modifying
for the right API

Android: styling overflow menu in action bar

I am using v7 support library in my project. My manifest settings are:
android:minSdkVersion="7"
android:targetSdkVersion="15"
I used Android Action Bar Style Generator to generate styles for my Action Bar. The problem is that while everything works for the newest apis, my overflow menu does not change in low apis (tested on emulator 2.2 and real device 2.3.3 htc desire).
(this should have red background)
Is menu overflow loading items in some other component like spinner dialog or something (sry if that sounds dumb) ? Why styles for one api(ex 15) doesn't apply for other(ex 8), and is there anything i can do to have same overflow menu for all api versions.
This is my original generated style from Action Bar Style Generator which i tweaked a lot but with no success.
<resources>
<style name="Theme.Example" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarItemBackground">#drawable/selectable_background_example</item>
<item name="popupMenuStyle">#style/PopupMenu.Example</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Example</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Example</item>
<item name="actionDropDownStyle">#style/DropDownNav.Example</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Example</item>
<item name="actionModeBackground">#drawable/cab_background_top_example</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_example</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Example</item>
<!-- Light.DarkActionBar specific -->
<item name="actionBarWidgetTheme">#style/Theme.Example.Widget</item>
</style>
<style name="ActionBar.Solid.Example" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/ab_solid_example</item>
<item name="backgroundStacked">#drawable/ab_stacked_solid_example</item>
<item name="backgroundSplit">#drawable/ab_bottom_solid_example</item>
<item name="progressBarStyle">#style/ProgressBar.Example</item>
</style>
<style name="ActionBar.Transparent.Example" parent="#style/Widget.AppCompat.ActionBar">
<item name="background">#drawable/ab_transparent_example</item>
<item name="progressBarStyle">#style/ProgressBar.Example</item>
</style>
<style name="PopupMenu.Example" parent="#style/Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example</item>
</style>
<style name="DropDownListView.Example" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_example</item>
</style>
<style name="ActionBarTabStyle.Example" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_example</item>
</style>
<style name="DropDownNav.Example" parent="#style/Widget.AppCompat.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_ab_example</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example</item>
<item name="android:dropDownSelector">#drawable/selectable_background_example</item>
</style>
<style name="ProgressBar.Example" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_example</item>
</style>
<style name="ActionButton.CloseMode.Example" parent="#style/Widget.AppCompat.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_example</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Example.Widget" parent="#style/Theme.AppCompat">
<item name="popupMenuStyle">#style/PopupMenu.Example</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Example</item>
</style>
I did it this way:
<style name="Theme.yourapp" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarWidgetTheme">#style/Theme.yourapp.Widget</item>
</style>
<style name="Theme.yourapp.Widget" parent="#style/Theme.AppCompat">
<item name="android:textColor">#android:color/black</item>
</style>
For simplicity, the android: namespace pertains to anything built into the OS while anything without android: as the namespace would pertain to your application (and the libraries you are using). Most, if not all, support libraries for the ActionBar will try to use the native ActionBar implementation and therefor use the android: namespace attributes in your styles. When the native ActionBar is not available it would use the libraries implementation and the non-android: namespaced attributes. This is why you must specify every attribute with and without the android: namespace.

Categories

Resources