Viewpager pops out of the screen [CoordinatorLayout] [Design Library]

Question

I have a simple application with a viewpager containing 3 fragments. In one of the snippets, I have a list of Recyclerview. When scrolling down, the toolbar crashes and scrolling up is displayed. My problem is when the toolbar crashed and I scroll left / right. I am expanding it programmatically, and this forces the viewpager to do this instead of just overlapping it. This leads to an unacceptable bias of the screen representations. How can I make the toolbar overlap my viewer instead of pushing it when expanding? I recorded a short click problem

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 snippet containing 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> 

Answer 1

Passed this question today. I'm not sure that I somehow missed something and used CoordinatorLayout incorrectly, or if this is an error. But if someone still has this problem, I solved it programmatically by resizing the content under the toolbar depending on the height of the application panel. Here he is:

XML format:

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

Answer 2

Possible duplicate of this

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

Answer 3

I have the same problem, so temporarily I put the bottom of android on 55dp: layout_marginBottom = "55dp" and it looks good, I hope that this problem will be fixed quickly.

Answer 4

Everything

I also had the same problem.

This problem can be easily solved by simply removing

Application: layout_scrollFlags = "Spiral | enterAlways"

from your tool code in xmlfile.

i also encountered the same problem, but soon after deleting this viewpager was located inside the screen (did not cross the borders of the screen)

it 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 it 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 the bottom.

Answer 5

Try giving Android:MarginBottom = "5dp" inside your viewpager tag, here you use the laundry height as "Match_Parent" to cover the bottom area.