I am using Theme.AppCompat for my app to get the dark look. Everything looks good, except the action bar using this theme looks ancient i.e. it has a bright blue bottom divider.
I want the action bar to look like it is in Theme.AppCompat.Light.DarkActionBar.
Looking at themes.xml, i find :
<style name="Theme.AppCompat.Light.DarkActionBar"
parent="Theme.Base.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">true</item>
</style>
<style name="Theme.Base.AppCompat.Light.DarkActionBar" parent="Theme.Base.AppCompat.Light">
<item name="actionBarDivider">#drawable/appcompat_divider_dark</item>
</style>
So i create my own style as below :
<style name="myTheme" parent="#style/Theme.AppCompat">
<item name="actionBarDivider">#drawable/appcompat_divider_dark</item>
</style>
But i get the build error :
No resource found that matches the given name (at 'actionBarDivider' with value
'#drawable/appcompat_divider_dark')
Why can't i use the same drawable that is being used by the framework?
The blue line is part of the background image used for the action bar. For example, you can find it in : sdk/platforms/android-19/data/res/drawable-xxhdpi/ab_transparent_dark_holo.9.png
The trick is to create your own Widget style by inheriting Widget.AppCompat.ActionBar and set the background attribute with your desired png, which does not have the blue line. I use the support library's existing#drawable/abc_ab_bottom_transparent_dark_holo. You can find it in the folder sdk/extras/android/support/v7/appcompat/res/drawable-hdpi/.
So create the below element in the styles.xml file.
<style name="myActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/abc_ab_bottom_transparent_dark_holo</item>
</style>
Then include this newly created style in your theme(already present in the styles.xml file) :
<style name="AppBaseTheme" parent="#style/Theme.AppCompat">
<item name="android:actionBarStyle">#style/myActionBar</item>
</style>
To enable this change in older APIs, make the same changes in all 3 folder - values-v14, values-v12 and values.
One important thing to note is that the "android:" namespace should not be used for the name attributes in the values-v12 and values folders.
Related
I have tried many options but whatever I use, it seems I cannot change the toolbar or action bar color & styles in the 'style.xml' file. it seems like using 'android.support.v7.widget.toolbar' is my only option . do you know a way so that I can change action bar styles in 'style.xml' file?
<style name="CustomActionBarTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="android:background">#ff0000</item>
</style>
and in the manifest i used 'CustomActionBarTheme' as my default theme .
i found the solution , my first mistake was that i should use a theme like :
'Theme.AppCompat.Light' , anything that starts with Theme , and finally creating an style like bellow , with parent set to 'Widget.AppCompat.ActionBar'
<style name="customActionbarStyle" parent="Widget.AppCompat.ActionBar">
<item name="background">#color/your_custom_color</item>
// also notice you must use color.xml file for colors and for some attributes
// like titleTextStyle , you must define another style and use it here like :
<item name="titleTextStyle">#style/your_title_text_style</item>
</style>
<style name="your_title_text_style">
<item name="android:textColor">#color/your_text_color</item>
</style>
you can find all other properties of ActionBar bellow :
https://developer.android.com/reference/android/R.styleable.html#ActionBar
My brain is about to blow on Android's themes and styles. Somebody, help me, please!
I'm trying to create a theme for my app to provide as similar look for pre- and post-Lollipop devices as possible. So, I've inherited my theme from Theme.AppCompat.NoActionBar and my activities from AppCompatActivity ans set up colorPrimary, colorPrimaryDark and colorAccent. All that went well. The problems started when I tried to style background and text color. I've set android:textColorPrimary and android:textColorSecondary and got what I wanted on Lollipop device, but not on KitKat, so I've added textColorPrimary and textColorSecondary attributes to theme and after that Android Studio said that it can't build the app because these attributes can't be found. Same happened when I've tried to add colorBackground. I've tried to google it but wasn't able to found something useful about what attributes are provided by which theme and what should I use in my situation.
You must have to create two values folder one for lollipop values-v21 and simple values for pre-lollipop
See this style for pre-lollipop devices just paste it to values/styles.xml
Styles.xml
<resources>
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.TransparentActivity">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorPrimary">#color/textColorPrimary</item>
<item name="android:windowBackground">#color/windowBackground</item>
</style>
</resources>
see official documentation on android blog
If you want to style the app for different apis, you have to make a folder name values-v(sdk version) for e.g values-v21 for lollipop, values-v19 for kitkat,... but in this case I think you only need to create values-v21.
inside that folder, create an xml file style.xml and based on the api to use the appropriate attributes.
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 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.