Android: Using jetpack navigation, how can you add a collapsingtoolbarlayout to your fragments without the back button breaking?

Question

I have this collapsingtoolbar code below that was working perfectly. However when I switched to using Jetpack Navigation (Nav graph), hitting the back button on the app would cause every other view to suddenly shift down like so. How can i avoid this from happening?

Code:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/diningAppBar"
        android:layout_width="match_parent"
        android:layout_height="356dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/diningToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false"
            >

            <edu.msu.msumobile.ui.shared.CustomImageView
                android:id="@+id/diningImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:alpha="0.3"
                android:background="@android:color/black"
                android:fitsSystemWindows="true"/>

            <TextView
                android:id="@+id/diningHeader"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="?attr/actionBarSize"
                android:textColor="@android:color/white"
                android:textSize="48dp"
                android:paddingStart="@dimen/text_margin"
                android:paddingEnd="@dimen/text_margin"
                android:fitsSystemWindows="true"
                android:layout_gravity="bottom|end"
                android:gravity="bottom|end"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                />

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

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/diningDetailTabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:tabIndicatorColor="@color/textLightColor"
                app:tabSelectedTextColor="@color/textSelectedColor"
                app:tabTextColor="@color/textLightColor"
                />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/diningViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

The white area is added space after coming back from the fragment that contains the above code. It will persist across the entire app and only show correctly on the fragment that has this code:

score 0 · Answer 1 · answered Nov 14 '19 at 21:51

0

Solved. Turns out that adding

android:fitsSystemWindows="true"

breaks jetpack navigation. Removing those from the above code removed the excess whitebar at the top of every other fragment.

answered Nov 14 '19 at 21:51

Avairhn

117
1
9

Android: Using jetpack navigation, how can you add a collapsingtoolbarlayout to your fragments without the back button breaking?

1 Answers1