Develop Reference

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.

DepthPageTransformer from both side same effect?

The code for dept page transformation animation appears when slide to left, to achieve the similar effect when sliding to right I did work around but have no success.
Depth Page Tranfomer
I want the same effect when I back to previous image that is the coming image must zoom out and current image slide to right. Any solution or fix for this?

This code solves the problem, but is written in C#,i use Xamarin.Android, but it should be easy to translate to java, because it is translated from Java.
It is a class derived from RecyclerView.ViewHolder because in my code I use a RecyclerView to display multiple ViewPager.
I implement the interfaces
ViewPager.IPageTransformer
ViewPager.IOnPageChangeListener
In Java are
ViewPager.PageTransformer
ViewPager.OnPageChangeListener
In the same class to know if this dragging to the right or to the left.
And the transformation change in the direction
public class PhotoPaisViewHolder : RecyclerView.ViewHolder,
ViewPager.IPageTransformer,
ViewPager.IOnPageChangeListener
{
private static AtomicInteger sNextGeneratedId = new AtomicInteger(1);
/**
* Generate a value suitable for use in {#link #setId(int)}.
* This value will not collide with ID values generated at build time by aapt for R.id.
*
* #return a generated ID value
*/
public static int GenerateViewId()
{
for (;;)
{
int result = sNextGeneratedId.Get();
// aapt-generated IDs have the high byte nonzero; clamp to the range under that.
int newValue = result + 1;
if (newValue > 0x00FFFFFF) newValue = 1; // Roll over to 1, not 0.
if (sNextGeneratedId.CompareAndSet(result, newValue))
{
return result;
}
}
}
public ViewPager Pager { get; private set; }
// Get references to the views defined in the CardView layout.
public PhotoPaisViewHolder(View itemView)
: base(itemView)
{
// This for support multiple pagers in the same RecyclerView
Pager = itemView.FindViewById<ViewPager>(Resource.Id.pager);
if (Build.VERSION.SdkInt < BuildVersionCodes.JellyBeanMr1)
{
Pager.Id = PhotoPaisViewHolder.GenerateViewId();
}
else
{
Pager.Id = View.GenerateViewId();
}
Pager.AddOnPageChangeListener(this);
Pager.SetPageTransformer(reverse, this);
}
//For control the transformation
private static float MIN_SCALE = 0.75f;
private int currentPos;
private bool reverse;
private bool dragging;
public void TransformPage(View view, float position)
{
// Console.WriteLine(position);
int pageWidth = view.Width;
if (position < -1)
{ // [-Infinity,-1)
// This page is way off-screen to the left.
view.Alpha = 0;
}
else if (position <= 0)
{ // [-1,0]
// Use the default slide transition when moving to the left page
if (reverse)
{
TransformUpView(view);
}
else
{
TransformDownView(view, position, pageWidth);
}
}
else if (position <= 1)
{ // (0,1]
// Fade the page out.
if (reverse)
{
TransformDownView(view, position, pageWidth);
}
else
{
TransformUpView(view);
}
}
else
{ // (1,+Infinity]
// This page is way off-screen to the right.
view.Alpha = 0;
}
}
private static void TransformDownView(View view, float position, int pageWidth)
{
view.Alpha = 1 - Math.Abs(position);
// Counteract the default slide transition
view.TranslationX = pageWidth * -position;
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.Abs(position));
view.ScaleX = scaleFactor;
view.ScaleY = scaleFactor;
}
private static void TransformUpView(View view)
{
view.Alpha = 1;
view.TranslationX = 0;
view.ScaleX = 1;
view.ScaleY = 1;
}
public void OnPageScrollStateChanged(int state)
{
dragging = state == ViewPager.ScrollStateDragging;
}
public void OnPageScrolled(int position, float positionOffset, int positionOffsetPixels)
{
if (dragging)
{
if (position < currentPos)
{
if (reverse)
{
reverse = !reverse;
Pager.SetPageTransformer(reverse, this);
}
}
else
{
if (!reverse)
{
reverse = !reverse;
Pager.SetPageTransformer(reverse, this);
}
}
}
}
public void OnPageSelected(int position)
{
currentPos = position;
}
}

How to remove fading animation in vertical ViewPager in Android

Above is my issue screenshot. I just want to remove the opacity while I swipe up and down. When I swipe down, the current page turns transparent. I need to remove that transparency. Instead of extending the ViewPager, I have extended the activity. Can anyone give me solution for this issue?
public class VerticalViewPager extends Activity {
private static final float MIN_SCALE = 0.75f;
PagerAdapter adapter;
private static final float MIN_ALPHA = 0.75f;
private boolean a;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.verticalviewpager);
fr.castorflex.android.verticalviewpager.VerticalViewPager verticalViewPager = (fr.castorflex.android.verticalviewpager.VerticalViewPager) findViewById(R.id.verticalviewpager);
adapter = new MyCustomAdapter(VerticalViewPager.this, SplashScreen.newsidArray, SplashScreen.newsdescArray, SplashScreen.newstitleArray,
SplashScreen.newsimageArray, SplashScreen.newsdateArray, SplashScreen.newsauthorArray, SplashScreen.newsurlArray);
verticalViewPager.setOffscreenPageLimit(1);
verticalViewPager.setAdapter(adapter);
verticalViewPager.setPageTransformer(false, new PageTransformer() {
#Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position <= -1.0F) {
view.setAlpha(1);
Log.e("1", "test1");
} else if (position < 0F) {
view.setAlpha(1);
Log.e("2", "test2");
} else if (position >= 0F) {
view.setAlpha(0.9F - position);
view.setTranslationY((int) ((float) (pageHeight) * -position));
Log.e("3", "test3" + position);
} else if (position > 1.0F) {
view.setAlpha(1);
// view.setTranslationX(position < 0 ? 0f : -pageHeight * position);
Log.e("4", "test4");
}
}
});
}
}

Please try this.
And you have to confirm not using setAlpha() anywhere for page layout.(e.g. layout xml)
verticalViewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position >= 0) {
view.setTranslationY(position < 0 ? 0f : -pageHeight * position);
}
}
});

I got the answer, you need to set the background for the view you are animating. By default it is transparent
android:background="#FFFFFF"

Animation does not work

Had a little problem. My animation does not work. I don't get any kind of errors. Simply my animation does not work.
This is my code.
public class MainActivity extends FragmentActivity {
private PagerAdapter mPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.initialisePaging();
}
private void initialisePaging() {
List<Fragment> fragments = new Vector<Fragment>();
fragments.add(Fragment.instantiate(this, Tab1Fragment.class.getName()));
fragments.add(Fragment.instantiate(this, Tab2Fragment.class.getName()));
fragments.add(Fragment.instantiate(this, Tab3Fragment.class.getName()));
this.mPagerAdapter = new PagerAdapter(super.getSupportFragmentManager(), fragments);
ViewPager pager = (ViewPager)super.findViewById(R.id.pager);
pager.setAdapter(this.mPagerAdapter);
pager.setPageTransformer(true, new ZoomOutPageTransformer());
}
public static class Tab1Fragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (container == null) {
return null;
}
return (ImageView)inflater.inflate(R.layout.tab_frag1_layout, container, false);
}
}
public static class Tab2Fragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (container == null) {
return null;
}
return (ImageView)inflater.inflate(R.layout.tab_frag2_layout, container, false);
}
}
public static class Tab3Fragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (container == null) {
return null;
}
return (ImageView)inflater.inflate(R.layout.tab_frag3_layout, container, false);
}
}
public static class PagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
public PagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
#Override
public Fragment getItem(int position) {
return this.fragments.get(position);
}
#Override
public int getCount() {
return this.fragments.size();
}
}
public static 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) { // [-Infinity,-1)
// This page is way off-screen to the left.
// view.setAlpha(0);
ViewHelper.setAlpha(view, 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);
ViewHelper.setTranslationX(view, horzMargin - vertMargin / 2);
} else {
// view.setTranslationX(-horzMargin + vertMargin / 2);
ViewHelper.setTranslationX(view, -horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
// view.setScaleX(scaleFactor);
// view.setScaleY(scaleFactor);
ViewHelper.setScaleX(view, scaleFactor);
ViewHelper.setScaleY(view, scaleFactor);
// Fade the page relative to its size.
// view.setAlpha(MIN_ALPHA +
// (scaleFactor - MIN_SCALE) /
// (1 - MIN_SCALE) * (1 - MIN_ALPHA));
ViewHelper.setAlpha(view, 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);
ViewHelper.setAlpha(view, 0);
}
}
}
}
Every thing else is working fine. I want to implement this. please help me.
Before i implemented without using NineOldroids. But even after implementing this, it didn't work.

I also have that problem check out this answer. Using nineoldandroid should work but PageTransform is ignored in pre 11 (Heneycomb) although it's in the support library. I'm thinking of moving to view flipper just to do the animation. But i'm still searching for another way.
EDIT: CHeck out my answer in that Question to see how i resolved the issue. I basicly copied the viewpager class and removed the if statement that checked the SDK version in setPageTransformer

It did not work in emulator with android 2.2 platform, but when i checked in my Phone Sony Xperia Tipo Dual having ICS as platform, it worked.