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.

Wondawonder

I removed app:layout_scrollFlags="scroll|enterAlways|snap" and the scrolling worked properly and the bottom is not getting cut. Just wanted to ask what are the implications of this change? Did you come across any other solutions to this problem? – Tanto

I found that only removing the scroll| part was enough. Hopefully, by doing this, there will be less possible implications than if I'd removed the app:layout_scrollFlags attribute entirely(?) – Ankylosaur

Answer 1

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.

Cameron

I have the same problem as the OP and I'm not using a ListView in my ViewPager. (I'm using a WebView.) – Ankylosaur

Can you try replacing CordinatorLayout with someother layout and see if it still happens? – Cameron

It's OK, thanks. I have found a solution now, as per my answer: https://mcmap.net/q/549868/-part-of-fragment-inside-viewpager-getting-cut-off-at-bottom-of-screen-android – Ankylosaur

Answer 2

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

Ankylosaur

The problem if I use CollapsingToolbarLayout and must use scroll attribute. – Diaphoresis

Works for me, I don't have to add a space to the bottom. – Altagraciaaltaic

Answer 3

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;
    }

Iridium

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/

Erotomania

Answer 5

Remove scroll from the toolbar layout_scrollFlags attribute. You should have something like this: app:layout_scrollFlags="enterAlways|enterAlwaysCollapsed"

Herpetology