0

I've tried searching SO a few hours and couldn't find anything relating to what I want. Most questions are in relations to making the Navigation Drawer appear behind the status bar.

However, this isn't the behavior that I want.

I want the status bar to remain opaque over the Drawer, but is transparent over the DrawerLayout container (the fragment).

Here's what I have:

enter image description here

And here's what I want:

enter image description here

I can get the status bar to be translucent over other activities, except for the main activity which has the DrawerLayout. Because everytime I try to make the status bar translucent only the Drawer can become translucent, which is exactly the opposite of what I want for the Drawer. The status bar should only be translucent over the fragment.

Any ideas how I can achieve this?

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:openDrawer="start"
    android:fitsSystemWindows="true">

    <!-- This FrameLayout is the container for all other fragments
    so I want this to have a transparent status bar because some fragments
    may have "cover photos" that needs to take up the status bar. It looks
    nicer that way. I tried playing around with the fragment layouts    
    themselves. Bit nothing seems to budge, so I give up on that part. -->
    <FrameLayout 
        android:id="@+id/main_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:fitsSystemWindows="false"
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/activity_main_nav_header_main"
        app:menu="@menu/activity_main_drawer"/>

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

fragment_profile.xml (one of the fragment to be placed inside the container)

<?xml version="1.0" encoding="utf-8"?>
<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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">


            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <android.support.v7.widget.CardView
                    android:id="@+id/card_cover"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    app:cardElevation="10dp">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#11b4ff"
                        android:src="@android:drawable/sym_def_app_icon"/>
                </android.support.v7.widget.CardView>

                <android.support.v7.widget.CardView
                    android:id="@+id/card_profile"
                    android:layout_below="@id/card_cover"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    app:cardElevation="10dp"
                    android:layout_marginLeft="15dp"
                    android:layout_marginBottom="15dp"
                    android:layout_marginTop="-60dp">
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#1119ff"
                        android:src="@android:drawable/sym_def_app_icon"
                        />
                </android.support.v7.widget.CardView>

                <TextView
                    android:layout_margin="15dp"
                    android:layout_below="@id/card_cover"
                    android:layout_toRightOf="@id/card_profile"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Profile Name"
                    android:textSize="30sp"/>

            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/fragment_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="6dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/white"/>

    </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"/>


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

v21\styles.xml

<resources>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>
chaser
  • 3,107
  • 4
  • 29
  • 34

1 Answers1

0

After more searching on SO I found this answer that although didn't directly solve my problem, it gave me clues as to what was going on. In order to enable the translucent status bar in the fragment I needed to change the container layout to a CoordinatorLayout.

Furthermore, I needed to add "fitsSystemWindows=true" to all child views in order for the inset to be placed correctly in my desired fragment.

Here's the updated code that gave me the desired result:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:openDrawer="start"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:fitsSystemWindows="true"
        android:id="@+id/main_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:fitsSystemWindows="false"
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/activity_main_nav_header_main"
        app:menu="@menu/activity_main_drawer"/>

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

fragment_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">

            <RelativeLayout
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <android.support.v7.widget.CardView
                    android:id="@+id/card_cover"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    app:cardElevation="10dp">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#11b4ff"
                        android:src="@android:drawable/sym_def_app_icon"/>
                </android.support.v7.widget.CardView>

                <android.support.v7.widget.CardView
                    android:id="@+id/card_profile"
                    android:layout_below="@id/card_cover"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    app:cardElevation="10dp"
                    android:layout_marginLeft="15dp"
                    android:layout_marginBottom="15dp"
                    android:layout_marginTop="-60dp">
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#1119ff"
                        android:src="@android:drawable/sym_def_app_icon"
                        />
                </android.support.v7.widget.CardView>

                <TextView
                    android:layout_margin="15dp"
                    android:layout_below="@id/card_cover"
                    android:layout_toRightOf="@id/card_profile"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Profile Name"
                    android:textSize="30sp"/>

            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/fragment_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="6dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/white"/>

    </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"/>

</android.support.design.widget.CoordinatorLayout>
Community
  • 1
  • 1
chaser
  • 3,107
  • 4
  • 29
  • 34