ImageView not going behind the status bar in collapsing toolbar

Question

I am trying to bring the image view behind the status bar in collapsing toolbar and have tried many solutions, it goes behind the status bar but in the stating it starts below the status bar, but on scrolling it goes behind. How can I fix this, here is the xml file(it is a fragment inside an activity)

FRAGMENT 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:id="@+id/fragment_detail_app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/fragment_detail_collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="@android:color/transparent"
            app:theme="@style/Theme.AppCompat.NoActionBar">

            <com.android.volley.toolbox.NetworkImageView
                android:id="@+id/fragment_detail_collapsing_toolbar_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/fragment_detail_toolbar"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways"
                app:titleTextColor="@android:color/white">
            </android.support.v7.widget.Toolbar>

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

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

        </LinearLayout>

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

    <com.android.volley.toolbox.NetworkImageView
        android:id="@+id/fragment_detail_anchor_image"
        android:layout_width="96dp"
        android:layout_height="144dp"
        android:layout_margin="40dp"
        android:background="@android:color/white"
        app:layout_anchor="@id/fragment_detail_app_bar_layout"
        app:layout_anchorGravity="bottom"
        android:scaleType="fitXY"
        android:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>

ACTIVITY XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/movie_detail_fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    tools:context="app.com.thetechnocafe.moviesnow.MovieDetailActivity">

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

SCREENSHOT

See http://stackoverflow.com/questions/33668668/coordinatorlayout-not-drawing-behind-status-bar-even-with-windowtranslucentstatu — Philipp, Sep 25 '16 at 19:01

score 4 · Accepted Answer · answered Sep 25 '16 at 22:29

4

Got it solved. The image from the network was of a different ratio, one thing i discovered is that if the image don't fit the res to go behind the status bar then it automatically fits under the status bar. All i had to do is set android:scaleY="1.2" in the NetworkImageView to push it into the status bar.

answered Sep 25 '16 at 22:29

Gurleen Sethi

3,162
6
26
48

Awesome mahn,helped alot. – Sachin Varma Oct 02 '17 at 04:52

score 0 · Answer 2 · answered Sep 25 '16 at 18:30

On devices with API 21+ you can use a custom theme that make the status bar translucent.

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

Add this style to a file within the values-v21 folder and set the Activty theme in your AndroidManifest.xml like this:

<activity
   android:name=".activity.AboutActivity"
   android:theme="@style/AppTheme.NoActionBar.NoStatusBar" />

And one more thing. I think you need to add android:fitsSystemWindows="true" to the NetworkImageView also.

What API level is the device or emulator you are testing on? Can you post the manifest and the styles files? — rubenlop88, Sep 25 '16 at 19:13

ImageView not going behind the status bar in collapsing toolbar

2 Answers2