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>
Related
I am trying as best I can to style the ActionBar (i.e. an android.support.v7.widget.Toolbar) in my app, but it just won't work. I am following the official documentation when trying to achieve this. What I am really trying to do is to make the title color white. It is currently displayed in black. My target API is 11.
What am I doing wrong?
res/values/themes.xml
<resources>
<!-- Base theme applied no matter what API -->
<style name="MMTheme.Base" parent="Theme.AppCompat.Light">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColor">#color/mm_dark_gray</item>
<item name="colorPrimary">#color/mm_brown</item>
<item name="colorPrimaryDark">#color/mm_dark_gray</item>
<item name="colorAccent">#color/mm_green</item>
<item name="android:actionBarStyle">#style/MMActionBar</item>
<item name="android:actionBarTabTextStyle">#style/MMActionBarTabText</item>
<item name="android:actionMenuTextColor">#color/mm_green</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MMActionBar</item>
<item name="actionBarTabTextStyle">#style/MMActionBarTabText</item>
<item name="actionMenuTextColor">#color/mm_green</item>
</style>
<style name="MMTheme" parent="MMTheme.Base"></style>
<!-- ActionBar style -->
<style name="MMActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#color/mm_green</item>
<item name="android:titleTextStyle">#style/MMActionBarTitleText</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">#style/MMActionBarTitleText</item>
</style>
<!-- ActionBar title text -->
<style name="MMActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/mm_white</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
<!-- ActionBar tabs text -->
<style name="MMActionBarTabText" parent="#style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">#color/mm_green</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
</resources>
The inflated android.support.v7.widget.Toolbar
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mm_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"/>
In the Activity
// Setup main Toolbar
Toolbar toolbar = (Toolbar) mInflatedActivity.findViewById(R.id.mm_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setIcon(R.drawable.ic_launcher);
I have tried everything I can think of and searched a lot online, but I cannot make it work. What am I missing?
Current result is (nevermind the search icon):
Adding style="#style/MMActionBar" to the xml properties of the android.support.v7.widget.Toolbar results in this:
Changing main parent theme to Theme.AppCompat.Light.DarkActionBar does nothing.
Just use this in yout layout xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red600"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Set theme in xml itself to ThemeOverlay.AppCompat.Dark.ActionBar which will make title text white.
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
And I guess this is the right way to theme Toolbar, since according to official Android Developer blog
Styling of Toolbar is done differently to the standard action bar, and
is set directly onto the view.
Here's a basic style you should be using when you're using a Toolbar
as your action bar:
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
The app:theme declaration will make sure that your text and items are
using solid colors (i.e 100% opacity white).
I have faced same problem. The following solution solved my problem.
For this you need to make changes at two places.
1.Modify your toolbar xml like this,
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:elevation="2dp"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:id="#+id/TV_tool_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My App Name"
android:textSize="18sp"
android:textColor="#FFFFFF"/>
</android.support.v7.widget.Toolbar>
Modify like this in your activity file.
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(null);
Thats it. This will make your title color white. Cheers..!
Use this to change colors of the letters on the toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
I am using the toolbar for android.
I just want to change the background color of the overflow menu. But it is not changing.
Style xml
<style name="MyDarkToolbarStyle" parent="Widget.AppCompat.Toolbar">
<item name="popupTheme">#style/PopupMenuStyle</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
<style name="PopupMenuStyle" parent="android:Widget.Holo.Light.PopupMenu">
<item name="android:popupBackground">#android:color/white</item>
</style>
Toolbar XML
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:elevation="2dp"
android:theme="#style/MyDarkToolbarStyle" />
To change the toolbar options menu color, add this to your toolbar element
app:popupTheme="#style/MyDarkToolbarStyle"
Then in your styles.xml define the popup menu style
<style name="MyDarkToolbarStyle" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#color/mtrl_white_100</item>
<item name="android:textColor">#color/mtrl_light_blue_900</item>
</style>
Note that you need to use colorBackground not background. The latter would be applied to everything (the menu itself and each menu item), the former applies only to the popup menu.
Edit:
if you just want a white overflow popup menu just do this
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:elevation="2dp"
app:theme="#style/MyDarkToolbarStyle"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"" />
and remove the redundant popupTheme your Style xml
<style name="MyDarkToolbarStyle" parent="Widget.AppCompat.Toolbar">
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
You should also include this in your top (parent) Layout
xmlns:app="http://schemas.android.com/apk/res-auto"
Simplest way
If you just want a white overflow popup menu just do this:
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/ColorPrimary"
android:elevation="2dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Also, take a look at the value of android:layout_height attribute.
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 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 use the new Toolbar in my Android App. I want the same behauviour theme like "Light.DarkActionBar". So that my content background are white. The textes etc. are black. And my ActionBar/Toolbar have a custom background and also white Textes and Overflow-Menus.
So I implement these in my styles.xml:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/accentColor</item>
<item name="colorAccent">#color/accentColor</item>
</style>
The Toolbar implementation loks like that:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
app:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
But it looks not like a want. The Toolbar-Text and the Toolbar back-Button (getSupportActionBar().setDisplayHomeAsUpEnabled(true)) looks still black!!!
Want I doing wrong?
Ok, I found the bug. The
xmls:app
namenspace had the wrong URI. It was
xmlns:app="http://schemas.android.com/tools"
for whatever reason...
I changed it to the right one:
xmls:app="http://schemas.android.com/apk/res-auto"
Now it works like I want.