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>
Related
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'd like to change color of bar when I use this style:
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light" >
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
</style>
For example it should looks like system calculator in Android 5, I mean bar on the top is blue.
you can use
<item name="background">#color/actionbar_background_color</item>
Are you speaking about tool bar. If yes then implement the following xml in your project:
?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/appBar"
android:background="#color/colorPrimary"
app:theme="#style/MyCustomTheme"
android:layout_width="match_parent"
android:layout_height="50dp">
</android.support.v7.widget.Toolbar>
In activity extend your activity to ActionBarActivity, then in onCreate() use the following code:
ToolBar toolbar = (Toolbar) findViewById(R.id.appBar);
setSupportActionBar(toolbar);
Make sure you give blue color for colorPrimary attribute in colors.xml file or you can directly give blue color value if you are not using colors.xml file.
Use the appCompat21 and just set this style:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/my_color</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/my_darker_color</item>
</style>
More info here.
I am trying to change the font of the toolbar's title.
Here is my 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="#666666"
app:titleTextAppearance="#style/MyText"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
And in my styles.xml
<style name="MyText">
<item name="fontPath">fonts/myFont.ttf</item>
</style>
If I do not set app:titleTextAppearance, the toolbar uses the system font. When I set it, the font gets smaller, but it is still in the system font. Am I doing something wrong?
Any suggestion, comments or answers much appreciated.
Edit:
I tried moving the style to styles-text.xml but no luck
Edit2:
For now, I am using a SpannableString and TypefaceSpan to make this work. Hope it helps someone.
This works:
<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="wrap_content"
android:layout_width="match_parent"
app:titleTextAppearance="#style/ActionBarTitleStyle"/>
Then have this in your styles.xml
<style name="ActionBarTitle" parent="android:Widget.TextView">
<!-- The action bar title font -->
<item name="android:fontFamily">sans-serif-light</item>
<!-- Customizes the color of the action bar title-->
<item name="android:textColor">#FF0000</item>
<!-- Customizes the size of the action bar title-->
<item name="android:textSize">24sp</item>
</style>
In my case, the font:family is only applied if I use "android:titleTextAppearance" instead of "app:titleTextAppearance" but this only works for api 21 or higher
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>
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...