Transparent status bar and CollapsingToolbarLayout

Question

I know that there thousand of questions like this one but I tried everything and I couldn't come up with a solution. Basically I'm using activities with a NoActionBar style.

styles.xml:

<resources>

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Light"/>

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

<style name="AppTheme.Dialog" parent="Theme.AppCompat" />

v21/styles.xml:

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

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

The home activity is fine and the Drawer will open properly under the transparent status bar:

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

<include
    layout="@layout/app_bar_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<android.support.design.widget.NavigationView
    android:id="@id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header_main"
    android:fitsSystemWindows="true"
    app:menu="@menu/main"/>

The problem is into another activity that uses the following layout:

<android.support.design.widget.CoordinatorLayout
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="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@id/app_bar_layout"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:layout_height="230dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        app:contentScrim="?attr/colorPrimary"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <ImageView
            android:id="@id/tab_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:layout_marginTop="20dp"
            android:layout_gravity="center_vertical|center_horizontal"
            app:layout_collapseMode="parallax"/>

        <include
            android:id="@id/toolbar_main"
            layout="@layout/toolbar_main"/>

        <android.support.design.widget.TabLayout
            android:id="@id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

<include layout="@layout/toolbar_search"/>

<include layout="@layout/content_main"/>

Basically the status bar is transparent so I cannot see it since my colorPrimary is white. Strange that if I collapse the toolbar (so only the tabs are visible) the status bar will be coloured properly with the colorPrimaryDark (a kind of Grey).

Do you have any idea how I can fix that?

user1341300 user1341300 · Accepted Answer · 2016-09-11T09:23:10

Nevermind, I solved creating a new style in the v21/styles to use in the activities that I want the transparency (setting the style in the manifest for each Activity):

<style name="AppTheme.NoActionBarTransparency">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Transparent status bar and CollapsingToolbarLayout

1 Answers