CoordinatorLayout overlapping

Question

Have a look at the following layout. You will see, that the floating button is too far to the bottom. This is because the Toolbar and the Tabs are shown and the height of the ViewPager is wrong. So somehow I'm doing something wrong with the layout_height. But how can I fix that?

Remark: The ViewPager is the main content and it contains a fragment with a ListView and a Google Map V2 in the second tab.

That's the layout 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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

    <android.support.v4.view.ViewPager
            android:id="@+id/pager_list_views"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="fill_parent">
    </android.support.v4.view.ViewPager>

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

Here's the layout for the fragment in the first tab (the list):

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

    <ListView
              android:id="@+id/preview_list"
              app:layout_behavior="@string/appbar_scrolling_view_behavior"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:choiceMode="singleChoice"
              android:orientation="vertical" />

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/action_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="16dp"
            android:src="@mipmap/ic_add_white_48dp" />

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

Just to make sure; it's not a problem with the FAB. See this picture. It's a similar layout. A CoordinatorLayout with a ToolBar and a ViewPager which swipes through all detail-entries (therefore no tabs are needed). And again, the inner view seems to be too long (the same height as the ToolBar).

Answer 1

1. You should use android.support.v7.widget.RecyclerView and not ListView
2. Although you are already using android.support.v7.widget.RecyclerView be 100% sure that you have declard compile 'com.android.support:recyclerview-v7:23.0.0' in your build.gradle dependencies. I encountered the same issue where the viewpager overlaps the system buttons. I fixed it by simply adding this dependency.

Answer 2

Anything you what to be "coordinate" need to be direct child of CoordinatorLayout, Including the AppBar, RecyclerView (ListView in API21+ or other view support nested scroll is OK), or FAB, etc.

The reason why your FAB is offset out of screen, is that:

1. ViewPager has a @string/appbar_scrolling_view_behavior, the implement of this behavior will offset view when you scroll.
2. you put FAB inside ViewPager.

So when the offset of ViewPager changed, anything inside ViewPager will offset together (extra CoordinatorLayout has no help to change offset).

To fix this, don't use CoordinatorLayout outside ViewPager.

Or:

1. Put your FAB out of ViewPager so it won't scroll with ViewPager.
2. If the FAB only work with some of your page, hide() it when need.

BTW, there is very good App, Cheesesquare Sample, to demo the design library.