I have AppBarLayout, ViewPager below it and a Floating Action Button in one Activity. I want to animate the FAB when the ViewPager is scrolled. Have a look at the below screens.
When Tab1 is the current tab then the FAB should be in the bottom-right corner. When Tab2 is the current tab then the FAB should be in the bottom-center area. When Tab3 is the current tab then the FAB should move back to bottom-right corner. When Tab4 is the current tab then the FAB should get anchored to ImageView4 and should be in the bottom-right corner of ImageView4.
How can I achieve this? Please help me out.
I need to implement onPageChangeListener on ViewPager and handle the same in onPageScrolled().
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
final int width = mViewPager.getWidth();
if(position == 0) {
// Transition from page 0 to page 1 (horizontal shift)
int translationX = (int) ((-(width - mFab.getWidth()) / 2f) * positionOffset);
mFab.setTranslationX(translationX);
mFab.setTranslationY(0);
} else if(position == 1) {
// Transition from page 1 to page 2 (horizontal shift)
int translationX = (int) (((width - mFab.getWidth())) * positionOffset);
mFab.setTranslationX(translationX);
mFab.setTranslationY(0);
} else if(position == 2) {
// Transition from page 2 to page 3
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
When I go from tab1 to tab2 the FAB in translating correctly, however, in the end it comes back to original position.
How should I animate the FAB in onPageScrolled()?
You can do this easily with coordinate layout. First, add Support Design Library in gradle: compile 'com.android.support:design:22.2.0'
Now lets create a simple layout for our activity
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/your fist layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
</LinearLayout>
<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="16dp"
android:src="@drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="@+id/your second layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
</LinearLayout>
This should work, else, you can play around by putting both layout inside co-orindate layout and show hide the second one.
More details in link : http://android-developers.blogspot.in/2015/05/android-design-support-library.html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.