Animation in Viewpager tab change fadein / fadeout as like Linkedin introduction screen

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

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>