CODEWITHSUNDEEP
androidandroid-fragmentsandroid-viewpagerandroid-recyclerviewandroid-coordinatorlayout
Georgi Koemdzhiev
Georgi Koemdzhiev

Reputation: 11931

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

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

enter image description here

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>

Upvotes: 12

Views: 4248

Answers (5)

Sumit.K
Sumit.K

Reputation: 71

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.

Upvotes: -1

Altherat
Altherat

Reputation: 701

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

});

Upvotes: 10

Williem
Williem

Reputation: 1137

Possible duplicate of this

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

Upvotes: 10

Talu
Talu

Reputation: 315

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.

Upvotes: 1

Newbiee
Newbiee

Reputation: 592

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.

Upvotes: -3

Related Questions