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.
Related
styles.xml
<resources>
<style name="CustomTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/CustomBar</item>
<item name="actionBarStyle">#style/CustomBar</item>
</style>
<style name="CustomBar" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/black</item>
<item name="android:src">#drawable/home</item>
<item name="background">#color/black</item>
<item name="src">#drawable/home</item>
</style>
</resources>
The Above code doesn't work as android:src is not found, however i wish to achieve the intended effect of this.
I have a company logo that i want to use as the action bar main image, but don't want to use static image for full background colouring. The logo image, #drawable/home has a transparent background.
How would i style the action bar to include an image as well as a background colour?
I don`t know that we have src, here is the code what worked for me:
to set the image this is what I use:
<item name="android:background">#drawable/headerflowerimage</item>
Please find the whole code here:
<!-- the theme applied to the application or activity -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/SActionBar</item>
<!--- Support library compatibility-->
<item name="actionBarStyle">#style/SActionBar</item>
<item name="android:actionBarTabStyle">#style/STabBars</item>
<!-- Support library compatibility -->
<item name="actionBarTabStyle">#style/STabBars</item>
</style>
<!-- ActionBar tabs styles -->
<style name="STabBars" parent="#style/Widget.AppCompat.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">#color/tabbar_background</item>
<item name="android:backgroundStacked">#color/background_material_light</item>
<item name="android:actionBarTabTextStyle">#color/greyrish_s</item>
<!-- Support library compatibility -->
<item name="background">#color/tabbar_background</item>
<item name="backgroundStacked">#color/background_material_light</item>
<item name="actionBarTabTextStyle">#color/greyrish_s</item>
</style>
<!-- ActionBar styles -->
<style name="SActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/headerflowerimage</item>
<item name="android:titleTextStyle">#style/sTitleColor</item>
<item name="android:displayOptions">showTitle</item>
<!-- Support library compatibility -->
<item name="background">#drawable/headerflowerimage</item>
<item name="titleTextStyle">#style/sTitleColor</item>
<item name="displayOptions">showTitle</item>
</style>
I already read many ways to change spinner textColor in an ActionBar, but I really can't figure it out what is missing to make what I need.
This is how I have my actionbar spinner:
As you can see, I have white text on spinner items. I need to change it to black.
My res/styles file is this one.
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item>
<item name="android:dropDownItemStyle">#style/MyDropDownItemView</item>
<!-- <item name="android:textColor">#color/white</item> -->
</style>
<!-- ActionBar styles -->
<style name="MyDropDownListView" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:background">#color/white</item>
</style>
</resources>
I changed background to white, but now i need to change text to black and I can't do it.
Some one can help me?
I think the easiest way is to create a custom spinner item layout for your spinner, but with only a textview & it's color set to whatever you want it to be.
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:textSize="14sp"
android:textColor="#000000" />
Here is also a post that explains how to do it by changing the xml styles: Android Actionbar navigation spinner text color
UPDATE:
Remove the "android:" part from the xml statments that change something from the appcompat library. In my app it did the trick. So instead of this:
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item>
<item name="android:dropDownItemStyle">#style/MyDropDownItemView</item>
<!-- <item name="android:textColor">#color/white</item> -->
</style>
You remove the "android:" part:
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
<item name="dropDownListViewStyle">#style/MyDropDownListView</item>
<item name="dropDownItemStyle">#style/MyDropDownItemView</item>
<!-- <item name="textColor">#color/white</item> -->
</style>
UPDATE 2:
So i'll just post how i style my appcompat apps, so maybe you can see what i don't see. I have 2 folders: resources/values & resources/values-v14.
In the resource/value my style.xml file looks like this:
<style name="Theme.Jamesstyle" parent="#style/Theme.AppCompat.Light">
<item name="actionBarStyle">#style/Actionbar.FlatUi</item>
<item name="actionBarTabStyle">#style/ActionBar.FlatUi.Tabs</item>
<item name="actionBarTabTextStyle">#style/ActionBar.FlatUi.Text</item>
<item name="homeAsUpIndicator">#android:color/transparent</item>
</style>
<style name="Actionbar.FlatUi" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#color/bizzumi_light</item>
<item name="backgroundStacked">#color/bizzumi_red</item>
<item name="backgroundSplit">#color/bizzumi_red</item>
<item name="titleTextStyle">#style/TitleColor</item>
<item name="displayOptions">showHome|homeAsUp|showTitle</item>
</style>
<style name="TitleColor" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="textColor">#000099</item>
</style>
And in my resources/values-v14 style.xml file i have:
<style name="Theme.Jamesstyle" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/Actionbar.FlatUi</item>
<item name="android:actionBarTabStyle">#style/ActionBar.FlatUi.Tabs</item>
<item name="android:homeAsUpIndicator">#android:color/transparent</item>
<item name="android:actionBarTabTextStyle">#style/ActionBar.FlatUi.Text</item>
</style>
<style name="Actionbar.FlatUi" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/bizzumi_light</item>
<item name="android:backgroundStacked">#color/bizzumi_light</item>
<item name="android:backgroundSplit">#color/bizzumi_light</item>
<item name="android:titleTextStyle">#style/TitleColor</item>i
<item name="android:displayOptions">showHome|homeAsUp|showTitle</item><item name="displayOptions">showHome|homeAsUp|showTitle</item></style>
<style name="TitleColor" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#000099</item>
</style>
Maybe try this folder structure and create 2 different styles.xml files. Otherwise i'm clueless. Good luck!
`<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item>
<item name="android:dropDownItemStyle">#style/MyDropDownItemView</item>
<!-- <item name="android:textColor">#color/white</item> -->
</style>
<!-- ActionBar styles -->
<style name="MyDropDownListView" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:background">#color/white</item>
<item name="android:textColor">#000000</item>
</style>
How to change the color of Action Bar Back Button and Action bar Menu Icon(Image attached).
I have the following style code(below), using which I customized the Text but I'm not able to completely customize the Action Bar.
Below is the Style code which I have used :
<style name="MyCustomTheme" parent="Theme.Sherlock.Light">
<item name="actionBarStyle">#style/ActionBar</item>
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
<style name="ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="background">#drawable/bg_header</item> -----------(1)
<item name="android:background">#drawable/bg_header</item>
<item name="android:titleTextStyle">#style/customTextAppearance.Sherlock.Widget.ActionBar.Title</item> ----(2)
<item name="titleTextStyle">#style/customTextAppearance.Sherlock.Widget.ActionBar.Title</item>
<item name="android:homeAsUpIndicator">#style/customTextAppearance.Sherlock.Widget.ActionBar.Title</item>
</style>
<style name="customTextAppearance.Sherlock.Widget.ActionBar.Title" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textSize">18dp</item>
<item name="android:textColor">#ffffff</item>
<item name="android:shadowColor">#ffffff</item>
<item name="android:shadowDy">3</item>
<item name="android:textStyle">bold</item>
</style>
Your help will be appreciated, Thank you.
Just find proper icons for your actionbar and customize it...
and then make changes in your...
You Can Do Following For Changing Icons Of Actionbar
style.xml
<style name="Widget.ActionButton.Overflow" parent="#android:style/Widget.Holo.ActionButton.Overflow">
<item name="android:src">#drawable/ic_action_overflow</item>
</style>
<style name="Your.Theme" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionOverflowButtonStyle">#style/Widget.ActionButton.Overflow</item>
<item name="android:homeAsUpIndicator">#drawable/my_fancy_up_indicator</item>
</style>
check out this page on android help https://developer.android.com/training/basics/actionbar/styling.html
When supporting Android 3.0 and higher only,
you can define the action bar's background like this: res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/actionbar_background</item>
</style>
</resources>
Then apply your theme to your entire app or individual activities:
<application android:theme="#style/CustomActionBarTheme" ... />
For Android 2.1 and higher
When using the Support Library, the same theme as above must instead look like this:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<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.Solid.Inverse">
<item name="android:background">#drawable/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_background</item>
</style>
</resources>
Then apply your theme to your entire app or individual activities:
<application android:theme="#style/CustomActionBarTheme" ... />
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
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.