CODEWITHSUNDEEP
android
Gurleen Sethi
Gurleen Sethi

Reputation: 3512

ImageView not going behind the status bar in collapsing toolbar

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

Upvotes: 1

Views: 1533

Answers (2)

Gurleen Sethi
Gurleen Sethi

Reputation: 3512

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.

Upvotes: 4

rubenlop88
rubenlop88

Reputation: 4221

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.

Upvotes: 0

Related Questions