Animation in Viewpager tab change fadein / fadeout

Question

I want to implement same kind of animation such as linked in does in android application for its Introduction(Login / register) screen.

I am using view pager for Introduction screen and i want to implement fadein fadeout animation on background image change, As per swipe right to left or vice versa. I want to implement fadein and fadeout animation on background image change according to swipe of screen. any help is appreciated. Please take a look at my layout code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
    android:id="@+id/background_image"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scaleType="centerCrop" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:weightSum="7" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:gravity="right"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginRight="5dp"
            android:src="@drawable/icon_skip" />

        <TextView
            android:id="@+id/skip_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Skip"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@android:color/white" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4"
        android:gravity="bottom"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/logo" />

        <android.support.v4.view.ViewPager
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/pager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:context="com.xyz.View.IntroductionScreen" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:id="@+id/connection_bt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            android:background="@drawable/button"
            android:text="CONNEXION"
            android:textColor="@android:color/white" />

        <Button
            android:id="@+id/register_bt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/button"
            android:text="INSCRIPTION"
            android:textColor="@android:color/white" />
    </LinearLayout>
</LinearLayout>

And View pager fragment layout is

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
 <LinearLayout
   android:id="@+id/text_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:orientation="vertical" >
<TextView
    android:id="@+id/tagline_tv1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:singleLine="true"
    android:text="Laissez votre prochain job"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@android:color/white" />

<TextView
    android:id="@+id/details_tv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:maxLines="2"
    android:text="vous trouver"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="@android:color/white" />

    </LinearLayout>
  </RelativeLayout>

sample Splashs creen this is what i want to implement. Thank you

Answer 1

Set a ViewPager.PageTransformer to the ViewPager and achieve the desired animation using aplha and translation animation properties.

The most important input is the position parameter passed to transformPage callback. The position value indicates how the view is positioned currently.

Assuming the views in ViewPager are full width, here is how position value need to be interpreted.

------------------------------------------------------------------------------------
position | what does it mean
------------------------------------------------------------------------------------
0        | view is positioned in the center and fully visible to the user.
-1       | view is positioned in the left and not visible to the user. 
1        | view is positioned in the right and not visible to the user.
>-1 & <0 | view is being scrolled towards left and is partially visible.
>0 & <1  | view is being scrolled towards right and is partially visible.
------------------------------------------------------------------------------------ 

   mPager.setPageTransformer(true, new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View view, float position) {
            // Ensures the views overlap each other.
            view.setTranslationX(view.getWidth() * -position);

            // Alpha property is based on the view 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));
            }

            // TextView transformation
            view.findViewById(R.id.textView).setTranslationX(view.getWidth() * position);
        }
    });

Here is the layout:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:layout_alignParentTop="true"
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView" />

</RelativeLayout>

Here is the screen record:

Answer 2

This is a lag free one and also handles the Buttons

Main Idea:

1) first create transparent background for your fragments.

2) Create LayerDrawable and add background image of each fragment as an item. Then add your LayerDrawable as a background of your viewpager.

3) in onCreate method set alpha of each layer correctly so just upper one has alpha value of 255.

4) set for each view of your FragmentStatPagerAdapter a tag that corresponds to drawable index that you declared in the LayerDrawable. for example when you open the app FragmentA is showing so its tag must correspond to upper drawable that is 2 (beginning from 0). last page tag must be 0 corresponds to lowest drawable.

5) change drawable of each view at the function transformPage

6) for adding the button use RelativeLayout. In order to place buttons on top of all views use RelativeLayout. Later children are placing higher on the Z axis. You can see it in the code:

now lets see code:

MainActivity

public class MainActivity extends FragmentActivity {

    ViewPager viewPager=null;
    int numberOfViewPagerChildren = 3;
    int lastIndexOfViewPagerChildren = numberOfViewPagerChildren - 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.pager);
        viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));

        final LayerDrawable background = (LayerDrawable) viewPager.getBackground();

        background.getDrawable(0).setAlpha(0); // this is the lowest drawable
        background.getDrawable(1).setAlpha(0);
        background.getDrawable(2).setAlpha(255); // this is the upper one 

        viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View view, float position) {

                int index = (Integer) view.getTag();
                Drawable currentDrawableInLayerDrawable;
                currentDrawableInLayerDrawable = background.getDrawable(index);

                if(position <= -1 || position >= 1) {
                    currentDrawableInLayerDrawable.setAlpha(0);
                } else if( position == 0 ) {
                    currentDrawableInLayerDrawable.setAlpha(255);
                } else { 
                    currentDrawableInLayerDrawable.setAlpha((int)(255 - Math.abs(position*255)));
                }

            }
        });


        }
    class MyAdapter extends FragmentStatePagerAdapter
    {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            Fragment fragment=null;
            if(i==0)
            {
                fragment=new FragmentA();
            }
            if(i==1)
            {
                fragment=new FragmentB();
            }
            if(i==2)
            {
                fragment=new FragmentC();
            }
            return fragment;
        }

        @Override
        public int getCount() {
            return numberOfViewPagerChildren;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            if(object instanceof FragmentA){
                view.setTag(2);
            }
            if(object instanceof FragmentB){
                view.setTag(1);
            }
            if(object instanceof FragmentC){
                view.setTag(0);
            }
            return super.isViewFromObject(view, object);
        }        
    }

}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/layerdrawable" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:layout_marginBottom="48dip" >

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Sign in"
            android:layout_margin="16dip"
            android:background="#2ec6e4"
            android:textColor="#FFFFFF" />

        <Button
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Join us"
            android:background="#2ec6e4"
            android:layout_margin="16dip"
            android:textColor="#FFFFFF"
            />
    </LinearLayout>

</RelativeLayout>

LayerDrawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <bitmap
            android:id="@+id/Idofbg3"
            android:gravity="fill"
            android:src="@drawable/bg3" />
    </item>
    <item>
        <bitmap
            android:id="@+id/Idofbg2"
            android:gravity="fill"
            android:src="@drawable/bg2" />
    </item>
    <item>
        <bitmap
            android:id="@+id/Idofbg1"
            android:gravity="fill"
            android:src="@drawable/bg1" />
    </item>

</layer-list>

for lazy people who just do not want to declare fragments:

FragmentA

public class FragmentA extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_a,container,false);

        return v;
    }
}

fragment_a.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"
    android:id="@+id/FragmentA"
     android:background="@android:color/transparent">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="This is Fragment A"
        android:textColor="#FFFFFF"
        android:id="@+id/textView"  
        android:gravity="center"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true" />
</RelativeLayout>