Qfyilyi

I am trying to have a navigation with fragments along different screens.
We have decided that the Toolbar has to go away when scrolling. That is easy using AppBarLayout and layout_scrollFlags "scroll".

So I use a NestedScrollView that will contain the fragments.
Some fragments just contain a button that I want it to be placed at the bottom. Others are large menus that need to be scrollable.

So for this purpose I use the flag fillViewPort on the NestedScrollView. In case the fragment is short, it will fill the screen and the button will appear at the bottom.

The problem is that if I use the flag "scroll" on the AppBarLayout, if the fragment has a button on the bottom it is placed behind the navigation bar, while if I don't use the flag "scroll" NestedScrollView resizes to its proper size and the button is visible.

The test is very easy to reproduce in the preview of the layout on AndroidStudio.

Am I trying to do something weird? How can I achieve to have a button on the bottom for certain (small) fragments using the Coordinator and AppBarLayout with flags "scroll"?
Note that fitsSystemWindow does not make a difference for this.

This is just without using app:layout_scrollFlags="scroll"

This is using app:layout_scrollFlags="scroll"

This is the code for the simplified layout:

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:fitsSystemWindows="true"

    tools:context=".MainActivity">



    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:theme="@style/AppTheme.AppBarOverlay">



        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary"

            app:layout_scrollFlags="scroll"

            app:popupTheme="@style/AppTheme.PopupOverlay" />



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



    <android.support.v4.widget.NestedScrollView

        android:fillViewport="true"

        app:layout_behavior="@string/appbar_scrolling_view_behavior"

        android:layout_width="match_parent"

        android:layout_height="match_parent">



        <include layout="@layout/content_main" />



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



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

also just in case this is the "content_main.xml"

    <?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"

    tools:showIn="@layout/activity_main">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello World!"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent" />



    <Button

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginBottom="20dp"

        android:backgroundTint="@android:color/red"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

Solution: Adding a <NestedScrollView> alone by itself below the AppBarLayout will avoid the visibility of the screen as it takes the Width and Height of the screen, but CoordinatorLayout will shift the view one below the other by default.

Hence, the work-around would be to wrap the <NestedScrollView> in a separate layout like <LinearLayout> as shown below:

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">



    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:theme="@style/AppTheme.AppBarOverlay">



        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary"

            app:layout_scrollFlags="scroll"

            app:popupTheme="@style/AppTheme.PopupOverlay" />



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



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical">



        <android.support.v4.widget.NestedScrollView

            android:fillViewport="true"

            app:layout_behavior="@string/appbar_scrolling_view_behavior"

            android:layout_width="match_parent"

            android:layout_height="match_parent">



            <include layout="@layout/content_main" />



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



    </LinearLayout>



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

And this will work as expected, you will be able to see the view and also hide the toolbar on scroll.

Rest of the code remains the same. Try it, comment if any issues.