You can use PageTransformer like in this article with OnPageChangeListener to do that. With something like this:
public class MainActivity extends AppCompatActivity {
public ViewPager mViewPager;
public Button mFirstButton;
public Button mSecondButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mFirstButton = (Button) findViewById(R.id.first_button);
mFirstButton.setText("NEXT");
mSecondButton = (Button) findViewById(R.id.second_button);
mSecondButton.setText("PREVIOUS");
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPager.setAdapter(new CustomPagerAdapter(this));
mViewPager.setPageTransformer(false, mButtonsPageTransformer);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (position == 0) {
mFirstButton.setText("NEXT");
} else {
mFirstButton.setText("PREVIOUS");
mSecondButton.setText("NEXT");
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
public enum CustomPagerEnum {
FIRST_PAGE(R.string.first_page_title, R.layout.first_page),
SECOND_PAGE(R.string.second_page_title, R.layout.second_page);
private int mTitleResId;
private int mLayoutResId;
CustomPagerEnum(int titleResId, int layoutResId) {
mTitleResId = titleResId;
mLayoutResId = layoutResId;
}
public int getTitleResId() {
return mTitleResId;
}
public int getLayoutResId() {
return mLayoutResId;
}
}
private class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
public CustomPagerAdapter(Context context) {
mContext = context;
}
@Override
public int getCount() {
return CustomPagerEnum.values().length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence getPageTitle(int position) {
CustomPagerEnum customPagerEnum = CustomPagerEnum.values()[position];
return mContext.getString(customPagerEnum.getTitleResId());
}
@Override
public Object instantiateItem(ViewGroup collection, int position) {
CustomPagerEnum customPagerEnum = CustomPagerEnum.values()[position];
LayoutInflater inflater = LayoutInflater.from(mContext);
ViewGroup layout = (ViewGroup) inflater.inflate(customPagerEnum.getLayoutResId(), collection, false);
collection.addView(layout);
return layout;
}
@Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
}
ViewPager.PageTransformer mButtonsPageTransformer = new ViewPager.PageTransformer() {
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
} else if (position <= 1) { // [-1,1]
LinearLayout.LayoutParams firstButtonLayoutParams = (LinearLayout.LayoutParams) mFirstButton.getLayoutParams();
firstButtonLayoutParams.weight = 1 - position;
mFirstButton.setLayoutParams(firstButtonLayoutParams);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
}
}
};
}
activity_main.xml like
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="{YOUR_CONTEXT}.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_above="@+id/buttons_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<LinearLayout
android:id="@+id/buttons_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="@+id/first_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:lines="1"
/>
<Button
android:id="@+id/second_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:lines="1"
/>
</LinearLayout>
</RelativeLayout>
and first_page.xml and second_page.xml like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/red">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/first_page_title"/>
</RelativeLayout>
you'll got something like that:
Of course, it's just concept and you need more elegant (with transition animation) solution for text changing, button styles, etc.
To this:
