Develop Reference

how to have a different animation to the ImageView in ViewPager

https://github.com/anitaa1990/OnboardingSample
I want ZoomOut tranformation animation on ImageView in ViewPager. Only ImageView should be have ZoomOut Animation and other element of ViewPager should have default animation.

Here in your activity.
The main code is at ZoomOutPageTransformer look at the transformPage() method. (if it answers your question mark as answer. Thanks)
public class ScreenSlidePagerActivity extends FragmentActivity {
/**
* The number of pages (wizard steps) to show in this demo.
*/
private static final int NUM_PAGES = 5;
/**
* The pager widget, which handles animation and allows swiping horizontally to access previous
* and next wizard steps.
*/
private ViewPager mPager;
/**
* The pager adapter, which provides the pages to the view pager widget.
*/
private PagerAdapter mPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_screen_slide);
// Instantiate a ViewPager and a PagerAdapter.
mPager = (ViewPager) findViewById(R.id.pager);
mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
mPager.setAdapter(mPagerAdapter);
// watch and understand what this code does
mPager.setPageTransformer(true, new ZoomOutPageTransformer());
}
#Override
public void onBackPressed() {
if (mPager.getCurrentItem() == 0) {
// If the user is currently looking at the first step, allow the system to handle the
// Back button. This calls finish() on this activity and pops the back stack.
super.onBackPressed();
} else {
// Otherwise, select the previous step.
mPager.setCurrentItem(mPager.getCurrentItem() - 1);
}
}
/**
* A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
* sequence.
*/
private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
public ScreenSlidePagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
// return your fragment here
return new ScreenSlidePageFragment();
}
#Override
public int getCount() {
return NUM_PAGES;
}
}
}
Here is your ZoomOutPager class
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
public void transformPage(View CurentView, float position) {
ImageView view = (ImageView)CurrentView.findViewById(// the id of the image view you would like)
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
The main code is at ZoomOutPageTransformer look at the transformPage() method

Cover Flow feature using view pager android

I have to implement cover flow feature in my app similar to
mobikwik app cover flow
and .
I have already tried with Android CoverFlow widget library and few others. But nothing working as expected.
How i can achieve this type of view using ViewPager?

I have created my class ZoomOutPageTransformer,which is implementing PageTransformer and this set into the pager using setPageTransformer() method.
Please check bellow ZoomOutPageTransformer.class -
public class ZoomOutPageTransformer implements PageTransformer {
private static float MIN_SCALE = 1f;
private static final float MIN_ALPHA = 0.7f;
public ZoomOutPageTransformer(boolean isZoomEnable) {
if (isZoomEnable) {
MIN_SCALE = 0.85f;
} else {
MIN_SCALE = 1f;
}
}
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
float vertMargin = pageHeight * (1 - MIN_SCALE) / 2;
float horzMargin = pageWidth * (1 - MIN_SCALE) / 2;
view.setScaleX(MIN_SCALE);
view.setScaleY(MIN_SCALE);
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(MIN_ALPHA);
view.setTranslationX(horzMargin - vertMargin / 2);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
vertMargin = pageHeight * (1 - scaleFactor) / 2;
horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(MIN_ALPHA);
view.setTranslationX(-horzMargin + vertMargin / 2);
}
}
}
and in PagerActivity.java -
public class PagerActivity extends Activity {
ViewPager pager;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
pager = (ViewPager) findViewById(R.id.viewPager);
// mContainer.setViewPager(pager);
PagerAdapter adapter = new MyPagerAdapter();
pager.setPageTransformer(true, new ZoomOutPageTransformer(true));
pager.setAdapter(adapter);
//Necessary or the pager will only have one extra page to show
// make this at least however many pages you can see
// pager.setOffscreenPageLimit(adapter.getCount());
pager.setOffscreenPageLimit(3);
//A little space between pages
pager.setPageMargin((int) getResources().getDimension(R.dimen.dimen_20));
//If hardware acceleration is enabled, you should also remove
// clipping on the pager for its children.
pager.setClipChildren(false);
}
//Nothing special about this adapter, just throwing up colored views for demo
private class MyPagerAdapter extends PagerAdapter {
#Override
public Object instantiateItem(ViewGroup container, int position) {
TextView view = new TextView(PagerActivity.this);
view.setText("Item " + position);
view.setGravity(Gravity.CENTER);
view.setBackgroundColor(Color.argb(255, position * 50, position * 10, position * 50));
container.addView(view);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
#Override
public int getCount() {
return 9;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view == object);
}
}
}
in main.xml -
<?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">
<FrameLayout
android:id="#+id/pager_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#CCC"
android:clipChildren="false">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginLeft="#dimen/dimen_50"
android:layout_marginRight="#dimen/dimen_50" />
</FrameLayout>
</RelativeLayout>
it works for me.

ViewPager became show incorrect pages after update of the support libraries

I updated the Google support libraries to rev. 23.2.0. And ViewPager became show wrong page views.
ViewPager uses a custom page transformer:
private class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private float mCenterOffset;
private boolean mIsFixedCenterOffset = false;
public void transformPage(View view, float position) {
final int pageWidth = view.getWidth();
final int pageHeight = view.getHeight();
if(!mIsFixedCenterOffset) {
mCenterOffset = position;
mIsFixedCenterOffset = true;
}
position -= mCenterOffset;
if (position <= 1) {
final float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
final float vertMargin = pageHeight * (1 - scaleFactor) / 2;
final float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}
}
}
And has page margin:
ViewPager viewPager = (ViewPager) v.findViewById(R.id.vpDaySlider);
mAdapter = new DayPagerAdapter(getActivity(), fm, mWeekNumber);
viewPager.setAdapter(mAdapter);
viewPager.addOnPageChangeListener(this);
viewPager.setPageTransformer(false, new ZoomOutPageTransformer());
Point display = SettingsManager.getDisplaySize(getContext());
final int padding = (int)(display.x * 0.1);
viewPager.setPageMargin(padding);
Now, it looks like below:
I even don't know where bug is... How to fix it? I need to page fills parent space and scales down only on scrolling.
Warning in LogCat:
W/FragmentManager: moveToState: Fragment state for DayFragment{24ec179 #2 id=0x7f0c00b4} not updated inline; expected state 3 found 2
ADDED
I realized what a bug. ZoomOutPageTransformer fixes the first position of page. And it must be 0 or nearly at zero but after update the first value of position > 1 (for example 1.1 on my phone) but the next (second) value is real page position (for my phone: 0).
Because of what is happening? I think it's a wrong behaviour of ViewPager.

I fixed this bug so:
private static class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private ViewPager mViewPager;
private float mPositionFixer;
private boolean isSetFixer = false;
public ZoomOutPageTransformer(ViewPager viewPager) {
mViewPager = viewPager;
}
public void transformPage(View view, float position) {
final int pageWidth = view.getWidth();
final int pageHeight = view.getHeight();
if(!isSetFixer) {
final int mClientWidth = mViewPager.getMeasuredWidth() -
mViewPager.getPaddingLeft() - mViewPager.getPaddingRight();
mPositionFixer = ((float)mViewPager.getPaddingStart()) / mClientWidth;
isSetFixer = true;
}
position -= mPositionFixer;
if (position <= 1) {
final float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
final float vertMargin = pageHeight * (1 - scaleFactor) / 2;
final float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}
}
}
Although I cannot understand this bug in Support libraries rev. 23.2.0.

ViewPager animation fade in/out instead of slide

I got the FragmentBasics example from here. Is there a way make the ViewPager animation simply fade in and out when I swipe instead of sliding left and right? I've been trying some stuff with PageTransformer, but no success, I can still see it sliding. So I guess I need to somehow force its position to stay put, while sliding my finger only affects the alpha.
public class SecondActivity extends Activity {
SectionsPagerAdapter mSectionsPagerAdapter;
ViewPager mViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setPageTransformer(false, new FadePageTransformer());
mViewPager.setAdapter(mSectionsPagerAdapter);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.second, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
// getItem is called to instantiate the fragment for the given page.
// Return a PlaceholderFragment (defined as a static inner class below).
return PlaceholderFragment.newInstance(position + 1);
}
#Override
public int getCount() {
// Show 3 total pages.
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return getString(R.string.title_section1).toUpperCase(l);
case 1:
return getString(R.string.title_section2).toUpperCase(l);
case 2:
return getString(R.string.title_section3).toUpperCase(l);
}
return null;
}
}
public static class PlaceholderFragment extends Fragment {
/**
* The fragment argument representing the section number for this fragment.
*/
private static final String ARG_SECTION_NUMBER = "section_number";
/**
* Returns a new instance of this fragment for the given section number.
*/
public static PlaceholderFragment newInstance(int sectionNumber) {
PlaceholderFragment fragment = new PlaceholderFragment();
Bundle args = new Bundle();
args.putInt(ARG_SECTION_NUMBER, sectionNumber);
fragment.setArguments(args);
return fragment;
}
public PlaceholderFragment() {
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_second, container, false);
TextView textView = (TextView) rootView.findViewById(R.id.section_label);
textView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
return rootView;
}
}
public class FadePageTransformer implements ViewPager.PageTransformer {
public void transformPage(View view, float position) {
if (position < -1 || position > 1) {
view.setAlpha(0);
}
else if (position <= 0 || position <= 1) {
// Calculate alpha. Position is decimal in [-1,0] or [0,1]
float alpha = (position <= 0) ? position + 1 : 1 - position;
view.setAlpha(alpha);
}
else if (position == 0) {
view.setAlpha(1);
}
}
}

This should work better for the fade in/out transform:
public void transformPage(View view, float position) {
view.setTranslationX(view.getWidth() * -position);
if(position <= -1.0F || position >= 1.0F) {
view.setAlpha(0.0F);
} else if( position == 0.0F ) {
view.setAlpha(1.0F);
} else {
// position is between -1.0F & 0.0F OR 0.0F & 1.0F
view.setAlpha(1.0F - Math.abs(position));
}
}

Based on a #murena's answer, this should work better for the fade in/out transform. At the end of animation the position is restored to default value.
public void transformPage(View view, float position) {
if(position <= -1.0F || position >= 1.0F) {
view.setTranslationX(view.getWidth() * position);
view.setAlpha(0.0F);
} else if( position == 0.0F ) {
view.setTranslationX(view.getWidth() * position);
view.setAlpha(1.0F);
} else {
// position is between -1.0F & 0.0F OR 0.0F & 1.0F
view.setTranslationX(view.getWidth() * -position);
view.setAlpha(1.0F - Math.abs(position));
}
}

Fade according to Google:
https://developer.android.com/training/animation/reveal-or-hide-view
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(#NonNull View page, float position) {
page.setAlpha(0f);
page.setVisibility(View.VISIBLE);
// Start Animation for a short period of time
page.animate()
.alpha(1f)
.setDuration(page.getResources().getInteger(android.R.integer.config_shortAnimTime));
}
});

A simple fading transformer could be implemented like this:
private static class FadePageTransformer implements ViewPager.PageTransformer {
public void transformPage(View view, float position) {
view.setAlpha(1 - Math.abs(position));
if (position < 0) {
view.setScrollX((int)((float)(view.getWidth()) * position));
} else if (position > 0) {
view.setScrollX(-(int) ((float) (view.getWidth()) * -position));
} else {
view.setScrollX(0);
}
}
}
Maybe not exactly what your looking for, but a good starting point.

I found #murena's answer super helpful. However, I ran into a problem when I tried to add an OnClickListener to each tab. I needed each page to open a different URL link. I modified the code to hide the views that are out of sight and added a little extra effect to slide the view at .5 the speed:
public void transformPage(View view, float position) {
if (position <= -1.0F || position >= 1.0F) { // [-Infinity,-1) OR (1,+Infinity]
view.setAlpha(0.0F);
view.setVisibility(View.GONE);
} else if( position == 0.0F ) { // [0]
view.setAlpha(1.0F);
view.setVisibility(View.VISIBLE);
} else {
// Position is between [-1,1]
view.setAlpha(1.0F - Math.abs(position));
view.setTranslationX(-position * (view.getWidth() / 2));
view.setVisibility(View.VISIBLE);
}
}

Issue using ViewPager and PageTransformer with Android API <11

I need to write a custom transition for a ViewPager on an app with android:minSdkVersion="9".
I'm trying to run the ZoomOutPageTransformer given here.
I get no compiling error, and on a Samsung Galaxy S running Android 2.3.3 (API 10), the line
pager.setPageTransformer(true, new ZoomOutPageTransformer());
does not give any error, but the code in ZoomOutPageTransformer's transformPage is never executed.
The code works perfectly if I set android:minSdkVersion="11" and use my Nexus 4 (API 17).
Can these PageTransformers be used with API 9 and 10? Otherwise, how can I create custom transitions for ViewPager?
EDIT
Here's the code I use:
public class HomeFragment extends Fragment{
ViewPager mNewsTitlePager;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.home_content, container, false);
}
#Override
public void onActivityCreated (Bundle savedInstanceState){
super.onActivityCreated(savedInstanceState);
mNewsTitlePager = (ViewPager) getView().findViewById(R.id.news_title_pager);
mNewsTitlePager.setPageTransformer(true, new ZoomOutPageTransformer());
mNewsTitlePager.setAdapter(new NewsPagerAdapter(news_item_list));
}
private class NewsPagerAdapter extends PagerAdapter {
private List<News> news_item_list;
private LayoutInflater inflater;
NewsPagerAdapter(List<News> news_item_list) {
this.news_item_list = news_item_list;
inflater = getActivity().getLayoutInflater();
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((View) object);
}
#Override
public void finishUpdate(View container) {
}
#Override
public int getCount() {
return this.news_item_list.size();
}
#Override
public Object instantiateItem(ViewGroup view, int position) {
TextView news_title = (TextView) inflater.inflate(R.layout.news_title_item, view, false);
news_title.setText(news_item_list.get(position).title);
((ViewPager) view).addView(news_title, 0);
return news_title;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view.equals(object);
}
#Override
public void restoreState(Parcelable state, ClassLoader loader) {
}
#Override
public Parcelable saveState() {
return null;
}
#Override
public void startUpdate(View container) {
}
}
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private float MIN_SCALE = 0.85f;
private float MIN_ALPHA = 0.5f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
}

I copied the ViewPager class from here and removed the if statement for the version and called it TransformableViewPager
public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) {
if (Build.VERSION.SDK_INT >= 11) {
final boolean hasTransformer = transformer != null;
final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
mPageTransformer = transformer;
setChildrenDrawingOrderEnabledCompat(hasTransformer);
if (hasTransformer) {
mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
} else {
mDrawingOrder = DRAW_ORDER_DEFAULT;
}
if (needsPopulate) populate();
}
}
I also had to change all PageTransformer to ViewPager.PageTransformer. Then did the transformations in ZoomOutPageTranformer like this,
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){
// > 11 version
view.setAlpha(0);
}
else
{
// Nine Old Androids version
ViewHelper.setAlpha(view, 0);
}
This worked even for 2.2

Ok: I got the answer at the beginning of the doc:
As property animation is only supported as of Android 3.0 and forward, setting a PageTransformer on a ViewPager on earlier platform versions will be ignored.
I'll use ViewFlipper instead.

None of the answers above are the correct answer even if they work,
Here is mine, do not forget to add nineoldandroids.jar to your libs folder:
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) {
ViewHelper.setAlpha(view, 0);
} else if (position <= 1) { // [-1,1]
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
ViewHelper.setTranslationX(view,horzMargin - vertMargin / 2);
} else {
ViewHelper.setTranslationX(view,-horzMargin + vertMargin / 2);
}
ViewHelper.setScaleX(view,scaleFactor);
ViewHelper.setScaleY(view, scaleFactor);
ViewHelper.setAlpha(view, MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else {
ViewHelper.setAlpha(view,0);
}
}
}