Viewpager Is Being Pushed Out Of The Screen [coordinatorlayout] [design Library]

August 26, 2023 Post a Comment

I have a simple app with a viewpager containing 3 fragments. In one of the fragments I have Recyclerview list. When scrolling down, the toolbar is collapsed and when scrolling up i

Solution 1:

Came across this issue today. I'm not sure if I'm somehow missing something and implementing the CoordinatorLayout incorrectly, or if it's a bug. But if anyone is still having this issue, I solved it programatically by adjusting the margin of the content below the toolbar based on the height of the app bar. Here it is:

Layout XML:

<android.support.design.widget.CoordinatorLayoutxmlns: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.AppBarLayoutandroid:id="@+id/app_bar"android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_scrollFlags="scroll|exitUntilCollapsed">

            ...collapsing toolbar content...

        </android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><FrameLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior">

        ...content beneath toolbar...

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

Code (after inflating the layout):

AppBarLayoutappBarLayout= (AppBarLayout) findViewById(R.id.app_bar);
CollapsingToolbarLayoutcollapsingToolbarLayout= (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
FrameLayoutcontentLayout= (FrameLayout) view.findViewById(R.id.content);
appBarLayout.addOnOffsetChangedListener(newAppBarLayout.OnOffsetChangedListener() {

    @OverridepublicvoidonOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        ViewGroup.MarginLayoutParamslayoutParams= (ViewGroup.MarginLayoutParams) contentLayout.getLayoutParams();
        layoutParams.setMargins(0, 0, 0, appBarLayout.getMeasuredHeight() + verticalOffset);
        contentLayout.requestLayout();
    }

});

Solution 2:

Possible duplicate of this

You could try changing the Toolbar's app:layout_scrollFlags="scroll|enterAlways" attribute to app:layout_scrollFlags="enterAlways".

Solution 3:

I have the same issue, so temporarily I put a 55dp bottom margin android:layout_marginBottom="55dp" and looks nice, I hope this issue will fixed quickly.

Solution 4:

Everyone

I was also facing same problem.

This Problem can be easily resolved by simply removing

app:layout_scrollFlags="scroll|enterAlways"

from your tool bar code in you xmlfile.

i was also encountering same problem but soon after removing this viewpager arranged itself inside the screen(didn't crosses the screen limit)

this was the default code

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">

change this to

  <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"

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

second line from bottom.

Solution 5:

Try giving Android:MarginBottom = "5dp" inside your viewpager tag, here you are using layour height as "Match_Parent" so it is covering the bottom area.

Android Coder