La animación en la pestaña Viewpager cambia fadein / fadeout como la pantalla de introducción de Linkedin

Quiero implementar el mismo tipo de animación, como el vinculado en hace en la aplicación android para su pantalla de introducción (inicio de sesión / registro).

Estoy usando el paginador de la visión para la pantalla de la introducción y quiero implementar la animación del fadeout del fadein en el cambio de la imagen de fondo, como por el golpe a la derecha a la izquierda o viceversa. Quiero implementar la animación de fadein y fadeout en el cambio de imagen de fondo según el golpe de pantalla. Cualquier ayuda es apreciada. Echa un vistazo a mi código de diseño

<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> 

Y ver el diseño del fragmento de paginación

 <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> 

Muestra Splashs creen esto es lo que quiero implementar. Pantalla de Linkedin Spalsh Gracias

Esto es un lag free y también maneja los Buttons

Introduzca aquí la descripción de la imagen

Idea principal:

1) crear primero un fondo transparente para sus fragmentos.

2) Crear LayerDrawable y agregar imagen de fondo de cada fragmento como un elemento. A continuación, agregue su LayerDrawable como fondo de su viewpager.

3) en el método onCreate , establezca el alfa de cada capa correctamente, de modo que sólo la parte superior tenga el valor alfa de 255.

4) establezca para cada vista de su FragmentStatPagerAdapter una etiqueta que corresponde al índice LayerDrawable que declaró en el LayerDrawable . Por ejemplo, al abrir la aplicación FragmentA está mostrando su etiqueta debe corresponder a superior dibujable que es 2 (a partir de 0). La etiqueta de la última página debe ser 0 corresponde a la más baja dibujable.

5) cambia el drawable de cada opinión en la función transformPage

6) para agregar el uso de botón RelativeLayout . Para colocar botones en la parte superior de todas las vistas, utilice RelativeLayout . Los niños posteriores se colocan más arriba en el eje Z. Lo puedes ver en el código:

Ahora permite ver el código:

Actividad principal

 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> 

Para las personas perezosas que simplemente no quieren declarar fragmentos:

Fragmento

 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; } } 

Fragmento_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> 

Establezca ViewPager.PageTransformer en ViewPager y obtenga la animación deseada usando las aplha y animación de translation .

La entrada más importante es el parámetro de position pasado a transformPage callback. El valor de posición indica cómo se posiciona actualmente la vista.

Asumiendo que las vistas en ViewPager son de ancho completo, aquí es cómo se debe interpretar el valor de posición.

 ------------------------------------------------------------------------------------ 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); } }); 

Aquí está el diseño:

 <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> 

Aquí está el registro de la pantalla:

Registro de pantalla

  • Visualización de la actividad con animación personalizada
  • Harism android Page Curl
  • Android: mostrar / ocultar una vista utilizando una animación
  • Efecto ondulado en estado prensado + transparencia en estado normal
  • Widgets de Android: Animaciones en RemoteViews?
  • Vista web de Android con GSAP: intenta eliminar la referencia local que no sea JNI,
  • Animación de propiedades de Android
  • Animar un cuadro de diálogo personalizado
  • ANDROID - cómo comprobar si la animación se está ejecutando antes de comenzar la nueva animación
  • Animación de la barra de herramientas junto con las transacciones de fragmentos
  • Carga de la rueda giratoria de animación
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.