CODEWITHSUNDEEP
androidandroid-layoutandroid-design-library
E. Fernandes
E. Fernandes

Reputation: 3997

Coordinator layout and transparent status bar

I'm currently trying to use coordinator layout in order to collapse an image - in a theme with transparent status bar -, however three issues are bothering me:

  1. When Activity is started, image is not being displayed behind the status bar (if I remove the coordinatorlayout, it works);
  2. When I scroll up, I would like to change the status bar to a solid color, but a piece of the image remains showing;
  3. After adding AppBarLayout and CollapsingToolbarLayout the bottom of the image - with the same height of the status bar - get cut;

image below status bar - even though it is set to be transparent in the theme Image remains below status bar - even though it is set to be transparent in the theme

Status bar after collapsing - it should have a solid color Status bar after collapsing - it should have a solid color

Code:

<?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:background="@color/colorPrimary"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:statusBarScrim="@color/colorPrimary"
            app:contentScrim="@color/colorPrimaryDark">

            <RelativeLayout
                android:id="@+id/cover_wrapper"
                android:layout_width="match_parent"
              android:layout_height="@dimen/rsc_character_details_cover_height">

                <ImageView
                    android:id="@+id/cover"
                    android:layout_width="match_parent"                 android:layout_height="@dimen/rsc_character_details_cover_height"/>
            </RelativeLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

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

           ...
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

This is how I'm setting the status bar transparency:

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

Any help will be very appreciated. Thank you very much.

Upvotes: 1

Views: 3431

Answers (1)

tachyonflux
tachyonflux

Reputation: 20211

For the problems with the image not being displayed behind the status bar and being cut off, anything that should be displayed in the status bar area should have android:fitsSystemWindows="true". ie. your cover_wrapper and cover.

Upvotes: 2

Related Questions