Strange custom Toolbar on pre-lollipop devices

Question

I've issues with the appcompat toolbar on < 5.0 devices. I was expecting this (Working result on Xperia and Nexus devices with lollipop):

Unfortunately I do get this on < 5.0 devices; black text and a weird looking statusbar hovering over the toolbar:

This is my toolbar design:

<?xml version="1.0" encoding="utf-8"?>
<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>

And MainActivity design:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/DrawerLayout"
    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:clickable="true">

        <include
            android:id="@+id/tool_bar"
            layout="@layout/tool_bar">
        </include>

        <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v4.view.PagerTitleStrip android:id="@+id/pager_title_strip"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top"
                android:background="#33b5e5"
                android:textColor="#fff"
                android:paddingTop="4dp"
                android:paddingBottom="4dp" />

        </android.support.v4.view.ViewPager>
    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/RecyclerView"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"

        android:background="#ffffff"
        android:scrollbars="vertical">

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

My styles-v21.xml:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

Defining code inside MainActivity's onCreate:

toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);

mRecyclerView = (RecyclerView) findViewById(R.id.RecyclerView);
mRecyclerView.setHasFixedSize(true);
Drawer = (DrawerLayout) findViewById(R.id.DrawerLayout);
Drawer.setStatusBarBackgroundColor(getResources().getColor(R.color.ColorPrimaryDark));

Answer 1

Okay I finally managed to get rid of this weird issue. I've changed the style.xml for v-19 to this:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" >
    <item name="android:windowTranslucentStatus">true</item>
</style>

Which just makes the statusbar transparent on kitkat devices. And changed nothing in the style-v21.xml and the original styles.xml file.

Then changed the toolbar to add app:theme and app:popupTheme which is set to display white text theme. And a android:paddingTop to change the padding which is needed to be set on kitkat devices.

<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_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ColorPrimary"
    android:elevation="4dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:paddingTop="@dimen/tool_bar_top_padding">

</android.support.v7.widget.Toolbar>

In the default dimens.xml:

<dimen name="tool_bar_top_padding">0dp</dimen>

dimens-v19.xml:

<dimen name="tool_bar_top_padding">20dp</dimen>

dimens-v21.xml:

<dimen name="tool_bar_top_padding">0dp</dimen>

And last but not least removed the android:fitsSystemWindows="true" from the DrawerLayout in the main_activity.xml design

Answer 2

I am not sure about reason of this error. But I think a work around can be done if you set Statusbar background color in Lollipop from API introduced recently

The API is setStatusBarColor(int color) and you are required to set some meaningful flags to WindowManager along with it :

Sample found from this descriptive answer :

Window window = activity.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(activity.getResources().getColor(R.color.ColorPrimary)); 
// to set ColorPrimary as status bar background color

This will remove the gray background shown in Samsung devices of lollipop