Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Exploring fitsSystemWindows and transparent status bar in android

Tags:

android

Kindly assume everything is only for target and minSDK vesion is lollipop only.

What I want

I am trying to implement an activity similar to the following screen from play store.

enter image description here

I am focusing on the Hero image here. As you see, 1. hero image is drawn behind status bar. (Completely transparent. No protection) 2. Rest of the content is drawn below status bar. (Eg., Toolbar/ActionBar) 3. While scrolling the status bar is colored.

What I have done

I have used ScrimInsetsFrameLayout from GoogleIO app. Wrapped my hero image around this layout. Added proper styling in my theme. This is what I get

enter image description here

Help I need

  1. I am still confused about fitsSystemWindows tag. When I set this to "true" on the hero image layout, nothing happens. That is status bar is transparent but image is drawn below status bar. If set to "false", I get the above result. Is there a clear article that explains the usage and behind the scenes of this tag.

  2. I set the "insetForeground" on ScrimInsetFrameLayout to transparent. Also in the theme I set the status bar color as transparent. But still there is a protection over the image. How to make the status bar completely transparent.

Kindly help me with a pointers or demo projects. Also let me know if i am not clear or need more info.

like image 408
Riyaz Ahamed Avatar asked Jul 25 '15 06:07

Riyaz Ahamed


1 Answers

This works for me.

layout.xml

<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/appbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/detail_backdrop_height"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

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

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

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

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

        <FrameLayout
            android:id="@+id/fragmentContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

and set statusBarColor attribute with transparent color at styles.xml v-21

like image 176
Dark Leonhart Avatar answered Oct 16 '22 06:10

Dark Leonhart