How to make status bar transparent when using CoordinatorLayout in fragment

Question

I hava a problem, when i using CoordinatorLayout which contain an imageview in fragment,i can't make the status bar transparent and draw the imageview under the status bar(in activity it's ok).

To illustration the problem,i take cheesesquare for an example.

There's a CheeseDetailActivity in cheesesquare shows some content like this(which effect it's i want):

As we know,it easy to make this effect in activity,i pick up the key code:

styles.xml(v21)

< resources>

< style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo"> < item name="android:windowDrawsSystemBarBackgrounds">true < item name="android:statusBarColor">@android:color/transparent < /style >

< /resources>

activity_detail.xml

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

    <ImageView
        android:id="@+id/backdrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:fitsSystemWindows="true"
        app:layout_collapseMode="parallax" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_collapseMode="pin" />

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

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/card_margin">

        <LinearLayout
            style="@style/Widget.CardContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Info"
                android:textAppearance="@style/TextAppearance.AppCompat.Title" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/cheese_ipsum" />

        </LinearLayout>

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/card_margin"
        android:layout_marginLeft="@dimen/card_margin"
        android:layout_marginRight="@dimen/card_margin">

        <LinearLayout
            style="@style/Widget.CardContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Friends"
                android:textAppearance="@style/TextAppearance.AppCompat.Title" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/cheese_ipsum" />

        </LinearLayout>

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/card_margin"
        android:layout_marginLeft="@dimen/card_margin"
        android:layout_marginRight="@dimen/card_margin">

        <LinearLayout
            style="@style/Widget.CardContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Related"
                android:textAppearance="@style/TextAppearance.AppCompat.Title" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/cheese_ipsum" />

        </LinearLayout>

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

</LinearLayout>

the problem

Now,for some reason ,i want to show the same content in fragment but not in activity.I try to modify the code in cheesesquare .I just add a fragment and the style.xml and layout.xml is almost the same.Then the problem exist:

the status bar look look different! I confirm the style and layout is the same.So my question is what makes different?How can i make the status bar transparent?

EDIT:

the xmls after modify

activity_main.xml(modified)

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">

<!--<include layout="@layout/include_list_viewpager"/>-->

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        class="com.support.android.designlibdemo.MainFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

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

fragment_main.xml(added)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         tools:context="com.support.android.designlibdemo.MainFragment">

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

include_list_viewpager.xml(no modify)

style.xml(no modify)

activity_cheese_detail.xml(deleted)

fragment_cheese_detail.xml(added,just copy the source activity_cheese_detail.xml)

<android.support.design.widget.CoordinatorLayout 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/main_content"
                                             android:layout_width="match_parent"
                                             android:layout_height="match_parent"
                                             android:fitsSystemWindows="true"
                                             tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

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

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_discuss"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

Please show the xmls after added the fragment. – GPack Nov 27 '16 at 17:05 — GPack, Nov 27 '16 at 17:05
ok, the question is edited. – 何福毅 Nov 28 '16 at 03:02 — 何福毅, Nov 28 '16 at 03:02

score 7 · Answer 1 · edited May 23 '17 at 11:53

You can this in Java code

protected void makeTransperantStatusBar(boolean isTransperant) {
    if (isTransperant) {
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    } else {
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }
}

if you want complete transperent you should do following

add these lines in your theme

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

set this flag in your co-ordinator layout

android:fitsSystemWindows="true"

at last add these lines in onCreate method of Activity

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        Window w = getWindow(); // in Activity's onCreate() for instance
        w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
    }

reference solution taken from here

GPack · Answer 2 · 2016-11-28T11:52:19.530

1

Remove or change to a CoordinatorLayout type (with fitSystemWindows) the FrameLayout parent of a CoordinatorLayout child.

edited Nov 28 '16 at 11:52

answered Nov 28 '16 at 06:50

GPack

2,494
4
19
50

FrameLayout doesnt dispatch the insets informations to its childs. Use CoordinatorLayout type instead as parent of a nested CoordinatorLayout. – GPack Nov 28 '16 at 11:37

score 0 · Answer 3 · answered Nov 27 '16 at 10:24

0

You have to use kitkat+ android to have this option.

Add this code to your theme:

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

answered Nov 27 '16 at 10:24

SaraK

11
1

How to make status bar transparent when using CoordinatorLayout in fragment

3 Answers3