Viewpager is being pushed out of the screen [CoordinatorLayout] [Design Library]

Question

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 is shown. My problem is when the toolbar is collapsed and I scroll left/right I am expanding it programmatically and it pushes the viewpager down doing so instead of just overlapping it. This results in an not pleasing displacement of the views of the screen. How can I have the toolbar to overlap my viewpager instead of pushing it down while expanding? I made a short recording of the problem click

This is my main_layout:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fab="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"
    tools:context=".UI.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/appBarLayouy"
        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"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/tabsHeight"
            style="@style/NavigationTab"/>


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


    <include layout="@layout/content_main"/>

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/floatingActionMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/blood_orange"
        fab:fab_addButtonColorPressed="@color/dirtyWhite"
        fab:fab_addButtonPlusIconColor="@color/dirtyWhite"
        fab:fab_addButtonSize = "normal"
        fab:fab_labelStyle="@style/menu_labels_style"
        fab:fab_labelsPosition="left"
        app:layout_anchor="@id/viewpager"
        app:layout_anchorGravity="bottom|end">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/createPlanBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/blood_orange"
            fab:fab_title="Create a plan"
            fab:fab_size="normal"
            app:fab_icon="@drawable/ic_event_white_48dp"
            fab:fab_colorPressed="@color/dirtyWhite"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/changeStatusBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/blood_orange"
            fab:fab_size="normal"
            app:fab_icon="@drawable/ic_textsms_white_48dp"
            fab:fab_title="Change status"
            fab:fab_colorPressed="@color/dirtyWhite"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

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

This is my fragment that contains the recyclerview layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
            android:background="@color/tab_bg">

<android.support.v7.widget.RecyclerView
    android:id="@+id/feedCardViewList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="true"
    xmlns:android="http://schemas.android.com/apk/res/android"/>

</RelativeLayout>

content_main layout:

<RelativeLayout
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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".UI.MainActivity"
tools:showIn="@layout/activity_main"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


</RelativeLayout>

does it happen if you remove app:layout_scrollFlags="scroll|enterAlways"? — Blackbelt, Feb 12 '16 at 08:46
@Blackbelt No, it does not. Only happens when the toolbar is collapsed and I scroll out of that fragment (toolbar is expanded onPageChanged of the viewpager) — Georgi Koemdzhiev, Feb 12 '16 at 08:48
@Blackbelt - AFAIK, This flag has nothing to do with that `ViewPager`, i can remember many duplicate questions about this but none of them has an answer — ʍѳђઽ૯ท, Feb 12 '16 at 08:48
@GeorgiKoemdzhiev - What are the content of `content_main`? because you have a `ViewPager` and under the `ViewPager`, a layout. — ʍѳђઽ૯ท, Feb 12 '16 at 08:52
@GeorgiKoemdzhiev - I think this is because of SupportLibrary and there is no official answer about it, yet! — ʍѳђઽ૯ท, Feb 12 '16 at 08:56
@LinX64 That is strange, how then their youtube app has this working https://www.youtube.com/watch?v=63s6T-7WIRM&feature=youtu.be — Georgi Koemdzhiev, Feb 12 '16 at 08:57
@GeorgiKoemdzhiev - It's working yes, but the thing is you think it's a bug and needs to fix by adding padding or something like that, that's not the point. — ʍѳђઽ૯ท, Feb 12 '16 at 08:59
@LinX64 Is there a way how I can see the their layout configuration of the youtube app ? — Georgi Koemdzhiev, Feb 12 '16 at 09:00
@GeorgiKoemdzhiev - I can do that for your (by creating a new question), But, when you specifiying a `ViewPager`, it means, you need to add your fragments by creating a news layouts too, which that was the another problem btw and you need to delete that `Include` i guess, anyways, i think this is because of `CoordinatorLayout` and i think we should contact to google staffs about it. — ʍѳђઽ૯ท, Feb 12 '16 at 09:03
Thank you. I have not contacted Google regarding any issue. Where is the right place to do that? — Georgi Koemdzhiev, Feb 12 '16 at 09:06
This is the best and official website to do that - https://code.google.com/p/android/issues/entry?template=Developer%20bug%20report — ʍѳђઽ૯ท, Feb 12 '16 at 09:07
This is the link to the issue submitted: https://code.google.com/p/android/issues/detail?id=200859 — Georgi Koemdzhiev, Feb 12 '16 at 09:18
Much better, we will see the answer then.:) and if you can, please attach the viewpager's screenshot too. — ʍѳђઽ૯ท, Feb 12 '16 at 09:22
hi @GeorgiKoemdzhiev have you got received some info from google about this issue? I have encountered same issue today just creating a new activity choosing TabbedActivity from wizard. Thx. — an_droid_dev, Jun 11 '17 at 20:00

score 10 · Answer 1 · edited May 23 '17 at 12:32

10

Possible duplicate of this

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

edited May 23 '17 at 12:32

Community

1
1

answered Oct 12 '16 at 13:34

Williem

1,131
1
12
19

1

This one fixed it for me. Thumbs up ^^ – pixelsize Sep 18 '17 at 15:36
Perfect fix. Thank you – Subhrajyoti Sen Dec 19 '19 at 08:01

score 10 · Accepted Answer · answered Feb 07 '17 at 03:08

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.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:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android: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>

    <FrameLayout
        android: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):

AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
FrameLayout contentLayout = (FrameLayout) view.findViewById(R.id.content);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) contentLayout.getLayoutParams();
        layoutParams.setMargins(0, 0, 0, appBarLayout.getMeasuredHeight() + verticalOffset);
        contentLayout.requestLayout();
    }

});

Thank you for sharing your answer! I have not tested it but I will accept your answer since it is the most detailed one yet and it could help others as well. — Georgi Koemdzhiev, Feb 07 '17 at 19:28

score 1 · Answer 3 · answered Mar 18 '16 at 16:50

1

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.

answered Mar 18 '16 at 16:50

Talu

185
2
7

score -1 · Answer 4 · answered Aug 04 '17 at 14:08

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.

This creates a separate issue – paxcow Jan 21 '20 at 13:05 — paxcow, Jan 21 '20 at 13:05

score -3 · Answer 5 · answered Feb 12 '16 at 08:53

-3

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.

answered Feb 12 '16 at 08:53

Newbiee

592
6
22

1

This is the default configuration or default design from SupportLibrary, so, the OP doesn't need to change anything. – ʍѳђઽ૯ท Feb 12 '16 at 08:55
I tried that already, this is a workaround of the problem which just ruins my layout. – Georgi Koemdzhiev Feb 12 '16 at 08:55

Viewpager is being pushed out of the screen [CoordinatorLayout] [Design Library]

5 Answers5

Linked