I'm implementing Material Design into my app and I'm stuck on style of my DrawerToggle with windowActionBarOverlay.
I'm setting the DrawerArrowStyle in my styles.xml and when running on device I have a different color in whole ToolBar:
Transparent ToolBar:
With title and action:
This is only happening on pre-Lollipop devices. I suspect that it's some compatibility on my styles, but until now I couldn't figure out what it's.
In my other style (without windowActionBarOverlay) it works perfectly in any device.
Here's my styles:
<style name="StyleOverlay" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/primary_dark_blue</item>
<item name="colorAccent">#color/orange</item>
<item name="android:dialogTheme">#style/translucentDialog</item>
</style>
<style name="ThemeWithoutOverlay" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowContentOverlay">#null</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/primary_dark_blue</item>
<item name="colorAccent">#color/orange</item>
<item name="android:dialogTheme">#style/translucentDialog</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="drawableSize">40dp</item>
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<style name="ThemeToolbar" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/primary_dark_blue</item>
<item name="colorAccent">#color/orange</item>
</style>
My layout toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res/android"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeToolbar" />
In my Activity:
...
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
...
Does anyone know whats happening?
Thanks!
According to the Google Android Docs, from the link
To avoid resizing your layout when the action bar hides and shows, you can enable overlay mode for the action bar. When in overlay mode, your activity layout uses all the space available as if the action bar is not there and the system draws the action bar in front of your layout. This obscures some of the layout at the top, but now when the action bar hides or appears, the system does not need to resize your layout and the transition is seamless.
Setting the windowactionbaroverlay to true will create a 60% transparent black gradient over the action bar. Hence you can see a color of BLUE + (60% TRANSPARENT BLACK) = BLUISH GREEN. Sorry about my color definitions.
You need to set an extra property here on your activity's parent layout i.e.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize">
...</RelativeLayout>
as mentioned in the docs. Please refer them.
Related
I am developing an app with the action bar And I wanted to make it split. in action bar I am using toolbar. let me first put some of my code here and let me tell you what I want.
I am setting my toolbar in to Actionbar and here is the xml of my toolbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/header_actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/iv_header"
/>
</android.support.v7.widget.Toolbar>
and in main activity I am calling it as below after finding my id of toolbar:
if (toolbar != null) {
setSupportActionBar(toolbar);
}
**
What I want
**
1.Now every thing has set and looking great. but accept the one thing and that is I want to make the text color to white of three dots which shows action, currently they are in black color. How can I change them to white.
2. Secondly I want to show split action bar so I am trying this but it never shows up what could be the reason? All I want a below bar as used in viber app.
For explanation of my app action icon(three dots: which shows action) i have done so many changes to my style but nothing really help , what I have done in it so far is given below :
Style.xml :
<resources>
<style name="myAppTheme" parent="Base.Theme.AppCompat.Light">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="windowNoTitle">true</item>
<item name="actionMenuTextColor">#ffffff</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="titleTextStyle">#style/MyTitleTextStyle</item>
<item name="actionMenuTextColor">#ffffff</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
<style name="MyTitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="actionMenuTextColor">#ffffff</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
</resources>
Note: My activity extends to appcompactactivity.
In your MyActionBar theme, have these attributes :
<item name="android:textColorSecondary">#color/white</item>
<item name="android:textColorPrimary">#color/white</item>
This worked for me. I hope it does for you too.
Bigger question I have now, is how do I color the toolbar icons on kitkat / jellybean. On lollipop I can use the
<item name="android:textColorSecondary">#color/ttdPrimaryColor</item>
and that seems to do the trip but no such luck on kitkat.
I am trying to figure out how to theme the menu icon on the Toolbar. I need to keep the title white, but I want the menu icon to be a different color.
This is my current style:
<style name="ToolBarStyle" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">?colorPrimary</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
the toolbar looks like:
<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_actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="#dimen/abc_action_bar_default_height_material"
app:popupTheme="#style/Theme.AppCompat.Light.NoActionBar"
app:theme="#style/ToolBarStyle" />
Another problem is that on most activities I want the drawer toggle to be the apps primary color but on certain activities I want it to be white. What is the best way to handle that.
Thanks,
Nathan
You can define a Theme for your Activities (not the Toolbar).
Something like this:
<style name="MyTheme" parent="Theme.AppCompat">
<item name="drawerArrowStyle">#style/MyDrawerArrowToggle</item>
</style>
<style name="MyDrawerArrowToggle"
parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/my_color</item>
</style>
I cannot use Theme.AppCompat.Light.DarkActionBar because of this HTC bug.
So I've been trying to find a workaround. I attempted to remove the DarkActionBar and just use Theme.AppCompat.Light as a parent of my app theme; it fixed the bug, but some items in my action bar appear black:
Items that appear black: v7 ActionBarDrawerToggle, SearchView controls, SearchView text, overflow menu icon, menu item text.
Is there a way to make them all white?
Use Toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:background="#color/blue"
android:layout_height="#dimen/actionbar_height"/>
And add this on style and manifest:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/white</item>
<item name="colorPrimaryDark">#color/light_gray</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="colorAccent">#color/white</item>
<item name="android:textColorPrimaryInverse">#color/white</item>
<item name="actionMenuTextColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:windowBackground">#color/white</item>
</style>
I'm using new android appcompat toolbar. I need to set the same custom color to both burger icon and back arrow icons. Using drawerArrowStyle allows me to change burger icon but not the arrow. The issue is only on Lollipop devices, anything pre-lollipop is fine.
Here is the code:
Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/my_primary"
local:theme="#style/My.Toolbar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Style.xml:
<style name="Theme.Base" parent="Theme.AppCompat.Light">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/my_primary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/black</item>
</style>
<style name="My.Theme" parent="Theme.Base">
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="My.Toolbar" parent="Theme.AppCompat.NoActionBar">
<!-- color of the title text in the Toolbar, in the Theme.AppCompat theme: -->
<item name="android:textColorPrimary">#color/my_actionbartext</item>
<!-- necessary to support older Android versions.-->
<item name="actionMenuTextColor">#color/my_actionbartext</item>
<item name="android:textColorSecondary">#color/my_actionbartext</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/my_actionbartext</item>
</style>
I've tried using solution from here but it didn't work. Anyone has any ideas?
Just do this in your Activity/Fragment:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
getSupportActionBar().setHomeAsUpIndicator(getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha, null));
else
getSupportActionBar().setHomeAsUpIndicator(getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
The path to the right solution for the problem I found here
However this still didn't 100% work due to our use of DrawerLayout. My colleague wrote an excellent post on the solution here
I am also not able to update back arrow button after upgrading to 23.2.0 support library
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
It is the color of actionMenuTextColor. Add this line to your theme.
<item name="actionMenuTextColor">your color</item>
Context
Using the AppCompat v7 21.0.0 / 21.0.2 / 21.0.3
Problem
The popupTheme of the ToolBar is not applied to the ShareAction
Style on the toolbar:
<style name="MyActionBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/green</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
The overflow menu item is using the popupTheme properly
The ShareAction on the other hand does not receive the popupTheme. After some testing I noticed it received the app:theme of the ToolBar thus being dark.
<item name="android:colorBackground">#color/white</item>
In order to get the black text on the ShareAction I tried setting many attributes and by setting "android:textColorPrimary" (on the ToolBar theme) I get what I want BUT then my icons on the ToolBar also takes this color which is weird...
The menu xml is the following:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cycle="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/ic_share"
android:icon="#drawable/abc_ic_menu_share_holo_dark"
android:title="#string/media_share"
cycle:showAsAction="ifRoom"
cycle:actionProviderClass="android.support.v7.widget.ShareActionProvider" />
<item
android:icon="#drawable/abc_ic_menu_share_holo_dark"
android:showAsAction="ifRoom"
android:title="br">
<menu>
<item
android:id="#+id/menuSortNewest"
android:title="Sort by newest" />
<item
android:id="#+id/menuSortRating"
android:title="Sort by rating" />
</menu>
</item>
</menu>
I would expect both the ShareAction & the overflow to have the popupTheme but it's not the case
Workaround
I'll edit this post once I got a workaround
Ref: https://code.google.com/p/android/issues/detail?id=87285&thanks=87285&ts=1419254842
So, here's what worked for me.
Here's my Toolbar xml:
<?xml version="1.0" encoding="utf-8"?>
<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/action_bar_main"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
app:theme="#style/Toolbar"
app:popupTheme="#style/Toolbar_Popup"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
Notice that I set both theme and popupTheme, and I also override background to be colorPrimary.
Here's the main app theme description with themes for Toolbar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionMenuTextColor">#color/white</item>
<!-- Support library compatibility -->
<item name="actionMenuTextColor">#color/white</item>
<item name="actionBarSize">#dimen/actionbar_height</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/dark_blue</item>
<item name="android:textColorPrimary">#607d8b</item>
</style>
<style name="Toolbar" parent="Base.ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#fff</item>
<item name="android:background">#color/dark_blue</item>
</style>
<style name="Toolbar_Popup" parent="Base.ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#fff</item>
<item name="android:background">#color/dark_blue</item>
</style>
So, as a result, Share action background is set to the value of background in the main Toolbar theme. And the background of Toolbar itself is overriden.
I was scratching my head for ages trying to solve this. I found a solution to my problem. Hopefuully this will help others also:
In my toolbar definition I was setting a custom theme like so:
<android.support.v7.widget.Toolbar
...
app:theme="#style/ActionBarThemeOverlay"
... />
In my styles.xml, my theme was defined as:
<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
I wanted white action icons in my toolbar, so I was setting these values to white. Unfortunately it was also making my ShareActionProvider menu text white (on a white background).
The solution for me was to remove the style setting for textColorPrimary. My toolbar icons were still white but I now had the desired dark text in the popup share provider menu.
<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
This page may helps to solve your problem: http://www.murrayc.com/permalink/2014/10/28/android-changing-the-toolbars-text-color-and-overflow-icon-color/
One difference I noticed in your XML is that you once use the property android:showAsAction="ifRoom" and once cycle:showAsAction="ifRoom".