This question already has answers here:
MenuItem tinting on AppCompat Toolbar
(9 answers)
Closed 7 years ago.
I have some white-on-transparent icons I want to use in my Toolbar, but they aren't being tinted to fit my theme (based on AppCompat.Light). No matter what color icons I put, they stay that color and don't turn dark gray (like the overflow and SearchView icons do).
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetStart="0dp">
Here's my theme:
<style name="Theme.*myapp*" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/accent</item>
<item name="colorPrimaryDark">#color/accent_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="windowActionBar">false</item>
<item name="android:dialogTheme">#style/*myapp*.Dialog</item>
<item name="android:textColorPrimary">#DE000000</item>
<item name="android:textColorSecondary">#8A000000</item>
</style>
Is there something I have to do to get the Toolbar to tint MenuItems?
Try this <item name="colorControlNormal">#color/white</item>
Looks like Google is hiding something:
I've tried adding this following two items to my menu.xml:
<item
android:id="#+id/menu_test2"
android:icon="#drawable/i_cccc_mtrl_alpha"
android:orderInCategory="10"
pressreader:showAsAction="always" />
<item
android:id="#+id/menu_test3"
android:icon="#drawable/abc_ic_menu_cut_mtrl_alpha"
android:orderInCategory="10"
pressreader:showAsAction="always" />
i_cccc_mtrl_alpha is copy of abc_ic_menu_cut_mtrl_alpha, abc_ic_menu_cut_mtrl_alpha is from appcompat package.
So abc_ic_menu_cut_mtrl_alpha works perfectly on both themes (Light & Dark) on all devices, i_cccc_mtrl_alpha is not tinted and always white...
Related
When I first start looking over this question I found this question, but the answer didn't work for me. I am working on a KitKat phone, but from what I read, this can be done on a pre-lollipop versions using the AppCompat library. I am using this GitHub repo, and more specificaly this code sample to create nested preference screen.
Here is my AppTheme.SettingsTheme for the SettingActivity in the code sample:
<style name="AppTheme.SettingsTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="titleTextStyle">#android:color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#fff</item>
</style>
This line: <item name="colorControlNormal">#fff</item> changes the Toolbar from having a white text and black back arrow, to having both the text and back arrow appear white (which is good).
The issue is that I have a CheckBoxPreference which is tinted with this line also, so when it in not check, I can barely see it (box color is white).
I tried creating a special theme just for the toolbar (again from this answer) and doing the <item name="colorControlNormal">COLOR</item>, but its just doesn't affect to toolbar.
I also tried to tint the CheckBoxPreference alone, but it seems that in involves creating a custom layout for it, and this brings a lot more work.
Here is my toolbar layout, currently with no specific theme:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".ui.activities.settingsActivity.SettingsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="?colorPrimary"
android:minHeight="?actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
app:navigationIcon="?homeAsUpIndicator"
app:title="#string/activity_settings_title"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
Can anybody explain how to tint the CheckBoxPreference and Toolbar seperatly? I don't care which one of them I tint using the ActivityTheme and which one I tint on its custom theme. The answers I found didn't work.
Use the theme for your Toolbar specifically, instead of for your entire Activity. This is what the ThemeOverlay styles are meant for (they use the colorControlNormal attribute when necessary). You can also define a separate "popup" theme if you would like light-themed pop-ups from your dark Toolbar:
<style name="SettingsTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="SettingsTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
<style name="SettingsTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
Then you can apply these styles in your layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/SettingsTheme.AppBarOverlay"
tools:context=".ui.activities.settingsActivity.SettingsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?colorPrimary"
android:minHeight="?actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
app:navigationIcon="?homeAsUpIndicator"
app:title="#string/activity_settings_title"
app:popupTheme="#style/SettingsTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
Recently I noticed that the shadow of my action bar had disappeared, and when looking into it it appears that on KitKat devices the shadow is present but on Lollipop+ it remains non-existant. I feel it is as though something that I am missing from the docs and if someone could point me in the right direction it would be very helpful. Thank you in advance!
This is my styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="GenericTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarStyle">#style/GenericActionBar</item>
<item name="android:actionBarStyle">#style/GenericActionBar</item>
<item name="android:windowActionBar">true</item>
<item name="windowActionBar">true</item>
</style>
<!-- ActionBar styles -->
<style name="GenericActionBar"
parent="Widget.AppCompat.ActionBar">
<item name="background">#android:color/holo_blue_bright</item>
<item name="android:background">#android:color/holo_blue_bright</item>
</style>
</resources>
Edit : No I am not using a tool bar
If you want shadow in your Toolbar in API 21+ you have to add one XML attribute in the toolbar like this :
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/tab_primary_color"
android:elevation="8dp"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
I've been spending hours trying to fix the changing action bar title size according to this stack overflow post:
Android Toolbar: small title text in landscape mode
Unfortunately, it seems that no matter what I do, anything regarding the actionbar style won't actually apply.
My styles v14 file:
<!-- Main theme -->
<style name="MyTheme" parent="Theme.AppCompat">
<item name="android:actionBarItemBackground">#drawable/selectable_background</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.MyTheme</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.MyTheme</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.MyTheme</item>
<item name="android:spinnerItemStyle">#style/Widget.MyTheme.TextView.SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/Widget.MyTheme.DropDownItem</item>
</style>
My ActionBar styles:
<style name="Widget.MyTheme.ActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="android:background">#drawable/ab_solid</item>
<item name="android:titleTextStyle">#style/my_title_style</item>
</style>
<style name="my_title_style" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="textSize">20sp</item>
</style>
And, of course, "MyTheme" is applied in the manifest as well - I've even tried adding it to all the individual activities as well, to no avail.
It seems that no matter what I do, stuff just won't apply. I've tried removing the android: namespace, I've tried using titleTextAppearance instead of titleTextStyle, I've basically emulated exactly how the parent themes do it, but it won't change anything. Anybody have a clue as to what's going on? I just recently updated to AppCompat so I'm not totally familiar with how everything works.
You need to use
<item name="background">#drawable/ab_solid</item>
<item name="titleTextStyle">#style/my_title_style</item>
for support library compatibility into your style.
Read Styling the Action Bar, section "For Android 2.1 and higher". Where it is given that you need to use two entries like
<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>
So your complete style would be
<style name="Widget.MyTheme.ActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="android:background">#drawable/ab_solid</item>
<item name="android:titleTextStyle">#style/my_title_style</item>
<item name="background">#drawable/ab_solid</item>
<item name="titleTextStyle">#style/my_title_style</item>
</style>
I don´t know if it's all that ou have made, but you have to add this code in the manifest(in the activity you want to apply this style):
<activity
android:name=".MyActivity"
android:label="#string/appName"
android:theme="#style/my_little_style" >
</activity>
Try in this way:
Create a layout for your Toolbar and put a TextView:
<?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:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:id="#+id/toolbar"
android:background="#b2b2b2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/toolbar_title"
android:textSize="20sp"
android:textColor="#ff282828"/>
</android.support.v7.widget.Toolbar>
Include the layout in your .xml:
<include layout="#layout/toolbar_activities"
android:id="#+id/toolbar_layout"/>
Finally set a title in your java class:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_layout);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
mTitle.setText("Your Title");
setSupportActionBar(toolbar)
I used this tutorial to facelift my Holo app for Lollipop:
http://android-developers.blogspot.ru/2014/10/appcompat-v21-material-design-for-pre.html
What I have:
Theme
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionModeOverlay">true</item>
<item name="colorPrimary">#color/theme_primary</item>
<item name="colorPrimaryDark">#color/theme_primary_dark</item>
<item name="colorAccent">#color/theme_accent</item>
</style>
Toolbar layout
<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_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Activity inherited from ActionBarActivity with a ListFragment fragment in the multi-choice mode
getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
Result: The toolbar is OK. It uses the sepcified theme colors, but the ActionBar used by the ListFragment in the ActionMode (activated by tap-and-hold a list item) has the standard Dark.ActionBar colors. Also the popup menu of the action bar uses the dark theme.
I tried all the SO tricks, but still cannot solve that. I will appreciate any help.
BTW. I found that the dark colors of the ActionBar are caused by the toolbar's app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar", but have no idea how solve this, because this attribute is needed for the correct toolbar appearance.
Just add these two lines to the theme:
<item name="actionModeBackground">#color/theme_primary_dark</item>
<item name="actionBarPopupTheme">#style/ThemeOverlay.AppCompat.Light</item>
This might also be helpful in addition to #Andrey Shcherbakov's answer if you want to have more control of each individual color.
<!-- action bar title text color, icon color (ie: back icon, icons when editing text)-->
<item name="android:textColorPrimary">#FFFF00</item>
<!-- action bar background color-->
<item name="android:colorBackground">#444400</item>
<!-- color of line under contextual action bar-->
<item name="colorControlActivated">#00CC00</item>
I want my ToolBar to serve as an ActionBar and I want it to look like a light theme with a dark action bar. I can't seem to find the right combination to do it.
This is what I have in styles.xml
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/my_awesome_color</item>
<item name="android:textColorPrimary">#color/my_awesome_text_color</item>
<item name="colorPrimaryDark">#color/my_awesome_darker_color</item>
<item name="colorAccent">#color/accent</item>
</style>
And My toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize" />
Currently I get this
What I want is that the menu items be white as well
Is there an elegant solution or do I have to choose a custom style for each one of the toolbar's items? It seems there should be.
You can use the following theme on your Toolbar to get it to appear "dark". The first portion app:theme themes the color of the text on Toolbar to be light among other things. The app:popupTheme is for styling the overflow menu indicator to be light.
<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" />
I am sure am a bit late but to do that in your theme add:
<item name="android:textColorSecondary">my_awesome_text_color</item>