Part of fragment inside ViewPager getting cut off at bottom of screen(Android)

Question

I have defined a basic Coordinator layout for my view:

<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"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/white"
            app:tabMode="fixed"/>
    </android.support.design.widget.AppBarLayout>

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

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

There are multiple tabs in my view pager. I am posting one of my simple fragments:

<ListView
    android:id="@+id/transferList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></ListView>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_add_white" />

What happens is that the FAB goes out of screen. It's just not the FAB, but other fragments with cardviews/listviews are getting cut off at the bottom of the screen. I looked around for a solution, and came up with a hacky solution: Removing the property app:layout_scrollFlags="scroll|enterAlways" from the Toolbar.

I can't understand what might be causing this to happen, and how removing the above solved the problem. Is it some bug in the support library? Is there a better way to solve this? Another solution I had come across is from here - to keep the FAB button directly under a Coordinator layout in the activity, and make it visible only in the fragment you need. Did not seem like a good solution to me. Also, other views in my fragments were also getting cut off.

Answer 1

I have fixed this problem by changing the Toolbar's app:layout_scrollFlags="scroll|enterAlways" attribute to just app:layout_scrollFlags="enterAlways".

Answer 2

I have a layout similar to yours: activity with a toolbar going off the top and tabs. And the requirement for fragments is to have their own independent FABs.

I couldn't cope with it directly in the xml, so then I nailed it that way:

Activity layout

<android.support.design.widget.CoordinatorLayout  xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    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:layout_marginBottom="20dp"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabContentStart="72dp"
        app:tabMode="scrollable" />

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

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

Fragment layout:

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

<include
    android:id="@+id/scroll"
    layout="@layout/content_activity_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right|end"
    android:src="@android:drawable/ic_input_add"
    app:borderWidth="0dp"
    app:fabSize="mini"

    app:useCompatPadding="true" />

And a bit of code to make the FAB stay where it intended to be. Fragment onCreateView:

public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        final View rootView = inflater.inflate(R.layout.fragment_tabs2, container, false);
        final FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.fab);
        final TabLayout tabLayout = (TabLayout) getActivity().findViewById(R.id.tabs);
        final AppBarLayout appBarLayout = (AppBarLayout) getActivity().findViewById(R.id.appbar);
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                int maxAbsOffset = appBarLayout.getMeasuredHeight() - tabLayout.getMeasuredHeight();
                fab.setTranslationY(-maxAbsOffset - verticalOffset);
            }

        });

        return rootView;
    }

Answer 3

This is because you are using CoordinatorLayout with ListView. You can change your implementation to RecyclerView to achieve correct scroll.

check my answer here. This may help you.

Answer 4

There are 2 solutions to this problem:

• You can remove Toolbar's scroll from app:layout_scrollFlags (e.g app:layout_scrollFlags="enterAlways") or remove entire app:layout_scrollFlags
• If you require the scroll attribute, the main layout content/fragment must use RecyclerView or NestedScrollView.

https://code.luasoftware.com/tutorials/android/bottom-of-fragment-in-viewpager-out-of-screen/