26

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. Linkedin Spalsh screen Thank you

Improve this question
2

2 Answers 2

Reset to default
52
+50

This is a lag free one and also handles the Buttons

enter image description here

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Its nice solution but my images are look like stretch one.. how can i use scaletype="cropcenter" or something like that property. I tried android:gravity="center"or "fill_verticle" but image look like stretch..any solution for that?
try android:scaleType="fitXY"
or your last friend is photo editing tools like photoshop or searching for free one or online one on the net.
nice one..let me check this
Really nice. However due to the multi-layer background, it's abit laggy when overscroll viewpager (Skipped 60 frames! The application may be doing too much work on its main thread). I modify the viewpager source code to disable overscroll here: gist.github.com/hoavt-54/38d66fc9d975f78e95d6
|
20

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:

Screen record

Improve this answer

8 Comments

The text works like an ordinary viewpagwer and the background fades in and fades out, I do not think your solution satisfying these two conditions. you simply have created the fade part but the text does not fade.
@Manish Nice answer but i want textview display right to left with fadein-fadeout animation as respect to swipe. plus background also fadein and fadeout but Buttons and logo keep as it is on screen.
@Swap-IOS-Android I've updated my answer. The text moves from right to left now.
@ManishMulimani Text works but what about background image..I will explain you my code, In my code i used view pager in which main view pager layout i added buttons and company logo(which is fix during view pager swip) and just text are added in view pager fragment and one more thing is that background image is in activity layout not in view pager fragment..I will update main question with code.
I believe you are using high resolution background image. You can load a scaled down version of bitmap as specified in the docs. I tried with inSampleSize of 4 with the android wallpapers. For inSampleSize 1 & 2, I get OutOfMemory error.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.