I have used Android Support V7's #style/Theme.AppCompat.Light for my styles. And to be more specific I have used Actionbar Style Generator
I want my overall theme to be in light red. So,for options menu item selector,I need light red color to work. I have made Accent color in Actionbar Style Generator to red as well. But the options menu item is always default blue. I have changed following as well to be sure
<item name="popupMenuStyle">#style/PopupMenu.Fsa</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Fsa</item>
<style name="DropDownListView.Fsa" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/red_selector</item>
</style>
But also,the options menu item selector is always default blue. I have browsed several tutorials on Actionbar styling and they were also of no help. So any help would be greatly appreciated.
Depending on your hardware needs Android Support or not, your XML must contain both item style reference:
<!-- Support library compatibility -->
<item name="popupMenuStyle">#style/PopupMenu.Fsa</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Fsa</item>
and
<!-- Support library not needed -->
<item name="android:popupMenuStyle">#style/PopupMenu.Fsa</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Fsa</item>
regardless the fact of Android Studio show error for "requires API level XX", it compiles as well and now the correct styles are applicable in both hardware, who needs and not the support library.
Related
I know it's possible to replace the icon by setting a custom actionOverflowButtonStyle as described here. However, that style only allows setting a different drawable and or/background.
Instead, I would like to use the standard icon provided by AppCompat, just tinting it with a particular color, just as the drawer icon/back button can be tinted via the color attribute in drawerArrowStyle.
I have tried these methods, which reportedly used to work:
Setting colorControlNormal -- Toolbar icon tinting on Android
Setting textColorPrimary in the theme -- MenuItem tinting on AppCompat Toolbar
Setting a custom actionBarStyle and changing colorControlNormal there.
But as far as I can see none of them work with the latest AppCompat -- the overflow icon keeps its original color (while other widgets, such as TextViews or the text in menu items do change).
Should this be done differently now? I am not using a custom Toolbar view, just the default AppCompat-provided, ActionBar-like one.
How to reproduce:
Create a default Android Studio project, with minimum SDK version = 9.
This automatically includes a blank activity and a menu resource with a single menu item, "Settings", with app:showAsAction="never" which means it will be displayed in the overflow menu.
Finally, customize the styles.xml file. For example:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#008888</item>
<item name="colorControlNormal">#ff0000</item>
<item name="android:textColorPrimary">#ff0000</item>
</style>
</resources>
You'll notice that neither property affects the overflow menu icon color. Tested in a Nexus 5 with Android 5.1.1.
If you trace the Theme.AppCompat.Light.DarkActionBar theme, you see that it sets:
<item name="actionBarTheme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
Which in turn inherits from Base.ThemeOverlay.AppCompat.Dark, which sets:
<item name="android:textColorPrimary">#color/abc_primary_text_material_dark</item>
Which essentially equals white:
<color name="primary_text_default_material_dark">#ffffffff</color>
If you just inherit from Base.Theme.AppCompat.Light, you won't run into this issue since it doesn't set the actionBarTheme. You can easily customize the action bar using the material properties anyway.
I recently started Android programming, all is good and dandy, but I've came across a problem that I couldn't find an answer to, and I really diged hard for 4 days so far.
My app uses support action bar, and to be specific "android.support.v7.app.ActionBarActivity". Long story short, I couldn't handle most of the stuff applicable to an Action Bar to this support one.
My app uses this support action bar by default due to setting up my mini sdk version to 14.
I want to be able to build an action bar from scratch, and customize it, since the default action bar is not responsive to my customization in styles.xml, etc.
I don't mind using Holo theme library instead of AppCompat.
So the question here, how can use Action Bar instead of Support Action Bar?
How can I extend my java class to use that instead of the support one?
Because none of the online customizing solutions are applicable to the support action bar.
A bit foggy description so I apologize for that.
Create a new project, and select the minimum API level as 15. When you do this, the appcompat-v7 library will not be required for this project as it is for projects with minSdkversion < 15. In this project, the classes android.app.ActionBarActivity and android.app.ActionBar will be used by default, i.e. the native AOSP classes and not the ones from the support library.
The following will let you have an ActionBar with custom background color as you want it, on API level 8 and above.
STEP 1. In your res/values folder, define an XML file theme.xml and add the following to it:
<resources
xmlns:tools="http://schemas.android.com/tools">
<style name="DefaultActionBarTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle" tools:targetApi="11">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarSize" tools:targetApi="11">#dimen/action_bar_wrap_content</item>
<item name="actionBarSize">#dimen/action_bar_wrap_content</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background" tools:targetApi="11">#color/actionbarbgcolor</item>
<item name="background">#color/actionbarbgcolor</item>
<item name="android:height" tools:targetApi="11">#dimen/action_bar_wrap_content</item>
<item name="height">#dimen/action_bar_wrap_content</item>
</style>
</resources>
In the same folder make another XML file colors.xml and add the following to it:
<resources>
<color
name="actionbarbgcolor">#00FF00
</color>
</resources>
and to the existing file dimens.xml, add the last line:
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<!-- Optional, in case you wish to increase the default width of the Action Bar. -->
<dimen name="action_bar_wrap_content">55dp</dimen>
</resources>
In place of #00FF00 above, use the hex color code for the background color you wish to use in your ActionBar.
NOTE: The above will work assuming you are using the appcompat-v7 library. If not, then you'll have to use one of the Holo.Light themes instead of AppCompat.Light, and there will be other changes as well.
STEP 2. In your manifest file, you must add:
android:theme="#style/DefaultActionBarTheme"
to every <activity declaration if that Activity has the ActionBar.
Try this. It will work.
Zygotelnit answer works but you have to omit the ["tools:targetApi="11"] from item declaration otherwise it will give you an error for some reason.
On the other hand, I've found a much shorter and easier but not so optimized solution.While searching through the actionBar class and playing around here is the answer:
In your activity.java, go down to
protected void onCreate(Bundle savedInstanceState)
Anywhere appropriate in that method, write the following code:
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(new
ColorDrawable(Color.parseColor("#D62D20")));
You replace the color code by any color code of your choosing. It's obviously a hex color code.
I had my app looking pretty nice using the new Lollipop tools. I decided backwards compatibility is important, so I switched all my Fragments,actionBar imports to the support library. Now (understandably) I can't use my lollipop theme.
Is there a way to use different action bars for different themes? I tried to cast the support ActionBar to a new one but it doesn't seem this is allowed.
My problem lies with the following (from v21 docs)
All of your Activities must extend from ActionBarActivity, which
extends from FragmentActivity from the v4 support library, so you can
continue to use fragments. All of your themes (that want an Action
Bar/Toolbar) must inherit from Theme.AppCompat. There are variants
available, including Light and NoActionBar. When inflating anything to
be displayed on the action bar (such as a SpinnerAdapter for list
navigation in the toolbar), make sure you use the action bar’s themed
context, retrieved via getSupportActionBar().getThemedContext(). You
must use the static methods in MenuItemCompat for any action-related
calls on a MenuItem.
so by calling getsupportActionBar I can't use my Holo theme:
<resources>
<!-- Base application theme. -->
<style name="appTheme" parent="android:Theme.Holo.Light.DarkActionBar">
</style>
<style name="MyActionBar"
parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:background">#color/blue_semi_transparent</item>
</style>
</resources>
Also for some reason the action bar loses the button that was on it and it goes into the dropdown menu and the app icon no longer appears in the action bar.
I really am no expert on this stuff having only started developing on lollipop so would really appreciate advice.
AppCompat (i.e., ActionBarActivity) uses the Material color palette which defines default coloring throughout your app. In your case, you need to use colorPrimary for your action bar color:
<style name="appTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/blue_semi_transparent</item>
</style>
Note that you should also provide a colorPrimaryDark (a darker version of the same color) for coloring the status bar.
Per the partially outdated Action Bar training, AppCompat also uses app namespaced attributes (as things like showAsAction didn't exist before API 11) for your menu items:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item android:id="#+id/action_search"
android:icon="#drawable/ic_action_search"
android:title="#string/action_search"
app:showAsAction="ifRoom" />
...
</menu>
Per the Toolbar documentation (which is default behavior on Material themes and in AppCompat):
In modern Android UIs developers should lean more on a visually distinct color scheme for toolbars than on their application icon. The use of application icon plus title as a standard layout is discouraged on API 21 devices and newer.
Therefore as you noted the app icon not appearing on the Action Bar is expected behavior.
Background
My app has the ability to search for items (which are other apps) using the SearchView on the ActionBar.
The app uses the support library of Google, and it works well on all versions of Android from API 9 .
The problem
On Lollipop, when I click the search action item in order to start searching, I notice that the up/back button on the top-left corner gets to be white, which is bad for this case since the actionbar background is also quite white:
Weird thing is that it doesn't always occur, and I don't think it occurs on Android versions that aren't Lollipop (tested on multiple emulators and devices).
Another weird thing is that the navigation drawer icon seems ok, as well as the X icon inside the searchView.
Here's the XML of the toolbar I have:
<android.support.v7.widget.Toolbar
android:id="#+id/activity_app_list__toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize" />
the "colorPrimary" is set to be : #ffEFEFEF .
Also, the theme's parent of the activity is "Theme.AppCompat.Light.NoActionBar" , as I've set the toolbar to be the actionBar.
The question
How can I fix this issue?
What is the cause for this issue? How come it works fine on other Android versions?
It seems like a known issue: https://code.google.com/p/android/issues/detail?id=78346 .
workaround is here: https://code.google.com/p/android/issues/detail?id=78346#c5 , meaning:
values-21/themes.xml:
<style name="MyTheme" parent="Theme.AppCompat">
<item name="homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
</style>
That's it. Hope it gets fixed later.
In order to customize it, I assume I can use it, and also choose the color using "colorControlNormal"
I'd guess the "app:collapseIcon" attribute is what you were looking for?
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbarHeight"
app:collapseIcon="#drawable/collapseBackIcon" />
How can I fix this issue?
I created a utility class for this (and other) problems. Get it here:
https://gist.github.com/consp1racy/96958a1dedf5a99d4ca5
Part 1: Call the following method in your Activity.onCreate(Bundle):
ToolbarUtils.fixToolbar(mToolbar);
Part 2: The code uses value android:colorControlNormal from the Toolbar "theme" you specified in the layout. If you use support library and defined only colorControlNormal you need to add the following line after it:
<item name="android:colorControlNormal" tools:ignore="NewApi">?attr/colorControlNormal</item>
What is the cause of this issue?
After a lot of thought and experiments it seems that the arrow uses the original bitmap, which is white, without any coloring, which is wrong.
Note: The menu overflow icon also reads the android:colorControlNormal so now it will display correct color as well.
EDIT: Prerequisites:
Your Toolbar should have attributes similar to the following
<!-- custom toolbar theme -->
<item name="theme">#style/ThemeOverlay.MyApp.ActionBar</item>
<!-- light popup menu theme, change this if you need to -->
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<!-- app bar background color -->
<item name="android:background">#color/material_deep_orange_500</item>
Then the toolbar theme should look something like this
<!-- example uses dark app bar template, feel free to change it to light if you need to -->
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- this line defines title text color -->
<item name="android:textColorPrimary">#color/material_white_100</item>
<!-- this line defines subtitle text color -->
<item name="android:textColorSecondary">#color/material_white_70</item>
<!-- this line defines up/hamburger/overflow icons color -->
<item name="colorControlNormal">#color/material_black_54</item>
<!-- this line is necessary for proper coloring on lollipop - do not delete it -->
<item name="android:colorControlNormal" tools:ignore="NewApi">?attr/colorControlNormal</item>
</style>
How can I change the color of the underline beneath the tabs? It's currently the light blue, and I can't find any resources on how to change this for Android 3.0.
Additionally, I'd like to change the text color for the menu items that show up on the right of the ActionBar as a result of: android:showAsAction="ifRoom|withText"
Anyone know how to change these?
You can control the appearance of the tabs by using the properties android:actionBarTabStyle, android:actionBarTabBarStyle, and android:actionBarTabTextStyle.
This section in the official developer guide shows a sample xml to customize the action bar's style.
Regarding the text of the menu options check the properties actionMenuTextAppearance and actionMenuTextColor.
As additional info, here's how I found out how to change the blue bar below each tab (the answer above is perfectly good, but I lacked little information that I put here, which might be useful to somebody).
You just need to change the background to a 9 patch drawable.
Here's how it looks like:
http://android-developers.blogspot.com/2011/04/customizing-action-bar.html
Source available here:
http://code.google.com/p/styled-action-bar/source/browse/trunk/res/drawable/actionbar_tab_bg.xml
9 patches available here:
http://code.google.com/p/styled-action-bar/source/browse/trunk/res/drawable-mdpi
I know this was really easy, but again, it might be useful so I'm just dropping the links here.
None of these solutions worked for me. I changed the colors of my tabs as follows:
This is in the themes.xml
<style name="MyApp" parent="android:style/Theme.Holo">
<item name="android:actionBarTabTextStyle">#style/MyApp.ActionBar.MyTabStyle</item>
</style>
This is in styles.xml
<style name="MyApp.ActionBar.MyTabStyle" parent="android:style/Widget.Holo.ActionBarView_TabText">
<item name="android:textColor">#00ff00</item>
</style>
This should make your tabs green.
I think that you can use:
<resources>
<style name="MyTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionMenuTextColor">#color/...</item>
</style>
</resources>
Regards