CoordinatorLayout moves content

Question

I have a CoordinatorLayout, AppBarLayout, Toolbar and main content in the form of NestedScrollview and stuff inside it:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:fitsSystemWindows="true"
       >

      <android.support.v7.widget.Toolbar
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:fitsSystemWindows="true"
         >
      </android.support.v7.widget.Toolbar>
   </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"
      android:fitsSystemWindows="true"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"

        />

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

In the picture above, the blue section is the NestedScrollView (i.e., the main content). As you see, its height is calculated with no regard to toolbar and is just moved out of the screen.

If you replace the CoordinatorLayout with any other layout, the NestedScrollView fits well (again, the blue part is the content, i.e., the NestedScrollView):

Is it how it should behave by design? If so, how to make the NestedScrollView fit the remaining screen wholly without moving its part below?

Update: If I remove behavior on the NestedScrollView, it moves back to top, but then gets covered by the toolbar.

Update 2: Sorry if it wasn't clear, but the main idea for using the CoordinatorLayout was the ability to apply various behaviors, including the default one provided. I have some user entered text that potentially may not fit into the screen, so I surround it with NestedScrollView. Now, to ease entering the text and have more space available, I'd want the toolbar to scroll out when scrolling and typing into this input (because adjustPan and adjustResize are not ideal)

Ganesh · Answer 1 · 2015-12-25T09:54:35.433

Try surrounding it with the <LinearLayout> . I mean, after the Coordinate Layout.

Use weights attributes of LinearLayout ( If necessary ) .

Set Width and height of the Nestedscrollview as Match_parent or fill_parent.

Another thing, you actually don't want to worry about the issue you specified above. It should work well when you execute.

Here is the code with <LinearLayout> . Using this tag inside will give us flexible alignment. It may be difficult at first time , but use it and practice surely it will do a trick.

Here the NestedScrollView is fixed inside the screen.

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

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                >

                <android.support.v7.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fitsSystemWindows="true"
                    >
                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.AppBarLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/third"
            android:layout_width="fill_parent"

            android:layout_height="fill_parent"
            android:orientation="vertical">

            <android.support.v4.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/hello_world"

                    />

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

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

LinearLayout didn't help, though the idea was interesting. NestedScrollView is 'match_parent'. Content of it is 'wrap_content', so it's about its height. I worry about it, because I have a view at the bottom of main content, and with this behavior it is out of the screen. — khusrav, Dec 24 '15 at 20:07
I already had the same issue and solved it with coordinate and linear layout. I am at work, I'll post you the code once I get home. — Ganesh, Dec 24 '15 at 20:10
you solution works. The only thing that I don't like and that makes it feel like a hack is the margin_top explicitly set to 55dp. This make it highly dependent on the toolbar. — khusrav, Dec 25 '15 at 07:10
I just created another linearlayout at the top of toolbar where it will hold the whole page. Now it will surely work as you expected — Ganesh, Dec 25 '15 at 09:58
in the proposed layout, toolbar stops from being scrolled out of the screen on NestedScrollView scroll. — khusrav, Dec 25 '15 at 12:08
You want toolbar to get hided while scrolling or what ? Can you be more clear — Ganesh, Dec 25 '15 at 17:09
I think my solution here is what you want: https://stackoverflow.com/a/58296374/4672107 — Carson Holzheimer, Oct 13 '19 at 08:23

score 0 · Answer 2 · answered Dec 25 '15 at 11:13

Its Pretty simple.You can try this in CoordinatorLayout.

<?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:id="@+id/parentlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    android:animateLayoutChanges="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="@dimen/margin_16"
        app:expanded="true"
        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:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <android.support.v4.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                >
                <!-- Your Entire Code goes Here -->


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

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

Your View will look like this

I want to avoid this look - the blue border means content is hidden behind the bottom navigation bar and fit into the visible part. — khusrav, Dec 25 '15 at 11:15
I got your point, you should check this http://stackoverflow.com/a/28341624/2022000 — Anuj Sharma, Dec 25 '15 at 11:22
or you can transparent the navigation bar as explained in Android Layout Structure Documentation https://www.google.co.in/design/spec/layout/structure.html#structure-system-bars — Anuj Sharma, Dec 25 '15 at 11:28

score 0 · Answer 3 · answered Oct 11 '18 at 15:32

In case anyone is still interested in this issue, I guess I have the explanation why this happens.

So the main issue here is the AppbarLayout and it's ability to add scrolling behaviours when it's used with a CoordinatorLayout. Let's say you want to scroll away the toolbar when a user scrolls down on the view below the AppbarLayout (Let's say you have a ViewPager). Then the OS also needs to scroll that ViewPager up to fill the space on the top of the screen. But when that happens if the ViewPager doesn't have enough height to fill the entire screen, then there would be a space on the bottom. That's why the system adds an additional height (which is exactly the same height as the AppbarLayout has) to the bottom of theViewPager, to fill the space on the top, in case the AppbarLayout scrolls away.

If you look at the problem in this way, this is something that needs to be done to have a consistent view. So either you have to remove the AppbarLayout or decide not to use scrolling behaviours.

CoordinatorLayout moves content

3 Answers3

Linked