This is not strictly a mistake, but the way they implemented it.
Because of this:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
This behavior does not affect the size of the ViewPager, it just pops it from the bottom of the screen when extending the AppBarLayout.
Your fragment fills the entire size of the ViewPager and therefore correctly aligns the FAB in the lower right corner of the ViewPager container; but since the ViewPager container is offset, the lower right screen.
The “right” way to use FloatingActionButton in this context is to show activity - for example:
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="bubblebearapps.co.uk.nfcapi.MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/appbar_padding_top" 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:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay"> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" 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="end|bottom" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>
Then you resize, the FloatingActionButton icon and the onClickBehaviour icon based on which page is displayed in the ViewPager using the OnPageChangeListener interface.
To make the FloatingActionButton scroll from the bottom, when you throw a RecyclerView, you must create a Behavior! This is the one I used in another project:
public class ScrollOffBottomBehaviour extends CoordinatorLayout.Behavior<View> { private int mViewHeight; private ObjectAnimator mAnimator; public ScrollOffBottomBehaviour(Context context, AttributeSet attrs) { super(); } @Override public boolean onLayoutChild(CoordinatorLayout parent, View child, int layoutDirection) { mViewHeight = child.getHeight(); return super.onLayoutChild(parent, child, layoutDirection); } @Override public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { if(mAnimator == null || !mAnimator.isRunning()){ int totalScroll = (dyConsumed + dyUnconsumed); int targetTranslation = totalScroll > 0 ? mViewHeight : 0; mAnimator = ObjectAnimator.ofFloat(child, "translationY", targetTranslation); mAnimator.start(); } } @Override public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) { return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL; } }
Install this on your FloatingActionButton using the app: layout_behaviour, and everything should be fine ...