Android – Change Toolbar color in Appcompat 21

androidandroid-actionbarandroid-actionbar-compatandroid-appcompatandroid-toolbar

I am testing out the new Appcompat 21 Material Design features. Therefore I've created a Toolbar like this:

<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/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

and included it in my main layout file.

Then I've set it as supportActionBar like that:

Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);

It's working, but somehow I can't quite figure out how to customize the toolbar. It's grey and the text on it is black. How should I change background and text color?

I've gone through this instructions:

http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html

What have I overseen to change colors?

 <style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowActionBar" tools:ignore="NewApi">false</item>
    <item name="windowActionBar">false</item>
</style>

EDIT:

I was able to change the background color by adding these lines of code to the theme:

<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>

But they won't affect the text color. What am I missing? Instead of the black text and black menu button, I'd rather prefer a white text and white menu buttons:

enter image description here

Best Answer

again this is all in the link you supplied

to change the text to white all you have to do is change the theme.

use this theme

<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/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Update:

Solution: use the windowActionModeOverlay property. Set this in your theme:

<item name="windowActionModeOverlay">true</item>

and the actionmode will be shown over the action bar instead of pushing it down. (If you're not using the latest AppCompat then you need to add the "android:" prefix to the property). It basically lets AppCompat know that you have a toolbar located in the top of the screen and that it should draw the ActionMode on top of it.

Old answer/workaround:

I ran into the same problem. No matter what theme I set, it always pushes down the Toolbar I set as ActionBar. I tried with and without the support library, but it didn't matter.

Unfortunately I was not able to fix it so I have built a workaround instead. In my ActionModeCallback's onCreateActionMode I hide the action bar:

actionBarToolbar.setVisibility(View.GONE);

and in onDestroyActionModeI show it again:

actionBarToolbar.setVisibility(View.VISIBLE);

The hiding/showing happens so quickly it is not noticeable on my test devices. There is of course a downside: although the enter-animation still works, the exit-animation of the contextual action bar gets lost because the Toolbar immediately pops over it. But until we come across a better solution I guess we are stuck with this.

(My Activity is actually extending a custom BaseActivity class which has a method called getActionBarToolbar(), taken from the Google I/O 2014 app source code, so I can easily get fetch the Toolbar:

BaseActivity activity = (BaseActivity) getActivity();
activity.getActionBarToolbar().setVisibility(View.GONE);

Too bad the I/O app does not use the contextual action bar.)

Jquery – Produce “toast” messages like StackOverflow

Specifically, the jGrowl jQuery plugin does what you're asking.

Just include the jQuery and jGrowl scripts in your html, and start generating messages with the $.jGrowl() function.

Example code:

<html>
<head>
<script src="path/to/jquery.js"></script>
<script src="path/to/jgrowl.js"></script>
<script>
$(function() {
  $.jGrowl("My sticky message, loaded after the rest of the page", {sticky: true});
  $("#mybutton").live("click", function(_) {
    $.jGrowl("you clicked the button!");});
});
</script>
</head>
<body>
<button id="mybutton">click me</button>
</body>
</html>

Best Answer

Related Solutions

Android – Toolbar and Contextual ActionBar with AppCompat-v7

Update:

Old answer/workaround:

Jquery – Produce “toast” messages like StackOverflow

Related Topic