Primary color (sometimes) goes transparent

Question

I am developing with the latest SDK version (API 21) and Support Library 21.0.2 and I've been having trouble when trying to implement the new Material Design guidelines.

Material Design says that I need to have my primary color and my accent color and apply them over my app. But sometimes when I open the app the primary color becomes transparent in some widgets, it goes back to normal until I close the app (with the Back Button) and launch it again.

Here is an example of the primary color being transparent in my toolbar.

I am using Teal 500 as my primary color and, as you can see, it is transparent only in the android.support.v7.widget.Toolbar. This also happens on my Navigation Drawer and (sometimes , sometimes not) in another random widgets.

This is my Toolbar

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >

I've tried with @color/primary and ?attr/colorPrimary with no success.

Here is my Theme (I don't know if it is related, but just in case):

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>     
    <item name="colorAccent">@color/accent</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:textColorPrimary">#fff</item>

    <item name="windowActionModeOverlay">true</item>
    <item name="android:textViewStyle">@style/Widget.TextView.White</item>
</style>

This just happens with the primary color, accent color works fine. My device is running 4.2.2 and I haven't checked on more devices.

Activity with Toolbar

<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <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"
            app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:ignore="MergeRootFrame" />
    </LinearLayout>

    <!-- The navigation drawer -->

    <LinearLayout
        android:id="@+id/navdrawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:orientation="vertical" >

        <!-- IN THIS IT ALSO HAPPENS -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingBottom="16dp"
            android:orientation="vertical"
            android:background="@color/primary" >

            <!-- Some stuff -->

        </LinearLayout>

        <ListView
            android:id="@+id/left_drawer"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:background="@color/black_light"
            android:divider="@color/grey"
            android:choiceMode="singleChoice" />
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

Answer 1

The problem is related with the way the toolbar's background is handled. It is shared between all instances of toolbar, so if you tend to change the toolbar's background alpha, you change the alpha of the drawable that is reused on other screens too.

Make sure you are not manipulating with the Toolbar's background properties, instead set the new background color/drawable each time you want to customize it.