Create amazing view pager using wowo view pager in the Android application.

Creating New Project

  • Create a new project in Android Studio from File ⇒ New Project. When selecting Empty Activity and proceed.
  • Add WoWoViewPager dependency to your build.gradle and rebuild the project.
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.+'
    implementation 'com.android.support.constraint:constraint-layout:1.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    implementation 'com.nightonke:wowoviewpager:2.0.0'
}

Choosing the Colors

  • Open colors.xml located under res ⇒ values and add the below color values.

colors.XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="rocket_fire">#EFC75E</color>

    <color name="blue_1">#eae9fe</color>
    <color name="blue_2">#ccc8fc</color>
    <color name="blue_3">#ada8fb</color>
    <color name="blue_4">#8f87f9</color>
    <color name="blue_5">#7067f8</color>
</resources>
  •  Open Style.xml located under res ⇒ values and add the below values.
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.hide" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>


    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="AppTheme.hide.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.hide.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
  •  Create  background_corner.xml located under res ⇒ drawable and add the below values.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"  >
    <corners android:radius="5dp"/>
    <solid android:color="#05502f"/>
</shape>
  •  Create  background_gray_black_circle .xml located under res ⇒ drawable and add the below values.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"  >
    <solid android:color="#f9dc0a"/>
</shape>

Create four XML layouts named activity_intro.xml  under res ⇒ layouts.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/base"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    tools:context=".IntroActivity">

    <com.nightonke.wowoviewpager.WoWoViewPager
        android:id="@+id/wowo_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <View
        android:id="@+id/circle"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="-20dp"
        android:background="@drawable/background_gray_black_circle"
        />

    <FrameLayout
        android:id="@+id/login_layout"
        android:layout_width="250dp"
        android:layout_height="300dp"
        android:layout_marginTop="50dp"
        android:background="@drawable/background_corner"
        android:layout_gravity="center">

        <EditText
            android:id="@+id/username"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="40dp"
            android:hint="Username"/>

        <EditText
            android:id="@+id/password"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="100dp"
            android:hint="Password"/>

        <Button
            android:id="@+id/button"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Sign In"
            android:layout_marginBottom="20dp"
            android:layout_gravity="bottom|center_horizontal"/>

    </FrameLayout>

    <TextView
        android:id="@+id/text"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:gravity="center"
        android:textColor="#05502f"
        android:layout_gravity="center"
        android:textSize="20sp"
        android:layout_marginTop="100dp"/>

    <ImageView
        android:id="@+id/planet_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/planet_target"
        tools:ignore="ContentDescription"
        android:visibility="invisible"/>

    <ImageView
        android:id="@+id/meteor"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/meteor"
        android:layout_marginLeft="-100dp"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/planet_0"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/planet_0"
        android:layout_marginTop="-150dp"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/planet_1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/planet_1"
        android:layout_gravity="center_vertical|right"
        android:layout_marginRight="-150dp"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/earth"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/earth"
        tools:ignore="ContentDescription"
        android:visibility="invisible"/>

    <com.nightonke.wowoviewpager.WoWoPathView
        android:id="@+id/path_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:wowo_pathColor="@color/rocket_fire"
        app:wowo_pathWidth="2dp"
        app:wowo_dynamicPath="true"
        app:wowo_headImageSrc="@drawable/rocket"
        app:wowo_headImageWidth="60dp"
        />

    <ImageView
        android:id="@+id/cloud_red"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="130dp"
        android:src="@drawable/cloud_red"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/cloud_yellow"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/cloud_yellow"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="50dp"
        tools:ignore="ContentDescription" />

    <ImageView
        android:id="@+id/cloud_blue"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/cloud_blue"
        android:layout_marginLeft="200dp"
        android:layout_marginTop="150dp"
        android:visibility="invisible"
        tools:ignore="ContentDescription" />

</FrameLayout>
  • Create WoWoActivity.java and modify the code as below. 
package com.wapptech.waytofeed;

import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;

import com.nightonke.wowoviewpager.Enum.Ease;
import com.nightonke.wowoviewpager.WoWoViewPager;
import com.nightonke.wowoviewpager.WoWoViewPagerAdapter;

public abstract class WoWoActivity extends AppCompatActivity {

    protected WoWoViewPager wowo;

    protected int ease = Ease.Linear;
    protected boolean useSameEaseTypeBack = true;

    protected TextView pageNumber;

    protected abstract int contentViewRes();

    protected int fragmentNumber() {
        return 5;
    }

    protected Integer[] fragmentColorsRes() {
        return new Integer[]{
                R.color.blue_1,
                R.color.blue_2,
                R.color.blue_3,
                R.color.blue_4,
                R.color.blue_5
        };
    }

    protected int screenW;
    protected int screenH;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(contentViewRes());

        init();

        wowo = (WoWoViewPager)findViewById(R.id.wowo_viewpager);
        wowo.setAdapter(WoWoViewPagerAdapter.builder()
                .fragmentManager(getSupportFragmentManager())
                .count(fragmentNumber())                       // Fragment Count
                .colorsRes(fragmentColorsRes())                // Colors of fragments
                .build());
        setPageTV(wowo);

//        pageNumber = (TextView) findViewById(R.id.page);

        screenW = WoWoUtil.getScreenWidth(this);
        screenH = WoWoUtil.getScreenHeight(this);
    }

    protected int color(int colorRes) {
        return ContextCompat.getColor(this, colorRes);
    }

    private void setPageTV(WoWoViewPager wowo) {
        wowo.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                if (pageNumber != null) pageNumber.setText(String.valueOf(position));
            }
        });
    }

    private void init() {
        useSameEaseTypeBack = getIntent().getBooleanExtra("useSameEaseTypeBack", true);
        int easeEnumNumber = getIntent().getIntExtra("easeType", -1);
        switch (easeEnumNumber) {
            case 0: ease = Ease.Linear; break;
            case 1: ease = Ease.InSine; break;
            case 2: ease = Ease.OutSine; break;
            case 3: ease = Ease.InOutSine; break;
            case 4: ease = Ease.InQuad; break;
            case 5: ease = Ease.OutQuad; break;
            case 6: ease = Ease.InOutQuad; break;
            case 7: ease = Ease.InCubic; break;
            case 8: ease = Ease.OutCubic; break;
            case 9: ease = Ease.InOutCubic; break;
            case 10: ease = Ease.InQuart; break;
            case 11: ease = Ease.OutQuart; break;
            case 12: ease = Ease.InOutQuart; break;
            case 13: ease = Ease.InQuint; break;
            case 14: ease = Ease.OutQuint; break;
            case 15: ease = Ease.InOutQuint; break;
            case 16: ease = Ease.InExpo; break;
            case 17: ease = Ease.OutExpo; break;
            case 18: ease = Ease.InOutExpo; break;
            case 19: ease = Ease.InCirc; break;
            case 20: ease = Ease.OutCirc; break;
            case 21: ease = Ease.InOutCirc; break;
            case 22: ease = Ease.InBack; break;
            case 23: ease = Ease.OutBack; break;
            case 24: ease = Ease.InOutBack; break;
            case 25: ease = Ease.InElastic; break;
            case 26: ease = Ease.OutElastic; break;
            case 27: ease = Ease.InOutElastic; break;
            case 28: ease = Ease.InBounce; break;
            case 29: ease = Ease.OutBounce; break;
            case 30: ease = Ease.InOutBounce; break;
        }
    }

    protected int dp2px(float dp) {
        return WoWoUtil.dp2px((int) dp, this);
    }

    protected int dp2px(double dp) {
        return WoWoUtil.dp2px((int) dp, this);
    }
}
  • Create WoWoUtil.java and modify the code as below. 
package com.wapptech.waytofeed;

import android.app.Activity;
import android.content.Context;
import android.graphics.Point;
import android.util.DisplayMetrics;
import android.view.Display;


class WoWoUtil {

    private static int screenWidth = -1;
    private static int screenHeight = -1;

    /**
     * get the screen width in pixels
     * @param context
     * @return
     */
    public static int getScreenWidth(Context context) {
        if (screenWidth == -1) {
            Display display = ((Activity)context).getWindowManager().getDefaultDisplay();
            Point size = new Point();
            display.getSize(size);
            screenWidth = size.x;
        }
        return screenWidth;
    }

    /**
     * get the screen height in pixels
     * @param context
     * @return
     */
    public static int getScreenHeight(Context context) {
        if (screenHeight == -1) {
            Display display = ((Activity)context).getWindowManager().getDefaultDisplay();
            Point size = new Point();
            display.getSize(size);
            screenHeight = size.y;
        }
        return screenHeight;
    }

    /**
     * dp to px
     * @param dp
     * @param mContext
     * @return
     */
    public static int dp2px(int dp, Context mContext) {
        DisplayMetrics displayMetrics = mContext.getResources().getDisplayMetrics();
        int px = Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
        return px;
    }

    private static WoWoUtil ourInstance = new WoWoUtil();

    public static WoWoUtil getInstance() {
        return ourInstance;
    }

    private WoWoUtil() {
    }
}
  • Create IntroActivity.java and modify the code as below. 
package com.wapptech.waytofeed;

import android.graphics.Color;
import android.os.Build;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import com.nightonke.wowoviewpager.Animation.WoWoAlphaAnimation;
import com.nightonke.wowoviewpager.Animation.WoWoElevationAnimation;
import com.nightonke.wowoviewpager.Animation.WoWoPathAnimation;
import com.nightonke.wowoviewpager.Animation.WoWoRotationAnimation;
import com.nightonke.wowoviewpager.Animation.WoWoScaleAnimation;
import com.nightonke.wowoviewpager.Animation.WoWoShapeColorAnimation;
import com.nightonke.wowoviewpager.Animation.WoWoTextViewColorAnimation;
import com.nightonke.wowoviewpager.Animation.WoWoTextViewTextAnimation;
import com.nightonke.wowoviewpager.Animation.WoWoTranslationAnimation;
import com.nightonke.wowoviewpager.Enum.Ease;
import com.nightonke.wowoviewpager.WoWoPathView;

public class IntroActivity extends WoWoActivity {

    private int r;
    private boolean animationAdded = false;
    private ImageView targetPlanet;
    private View loginLayout;

    @Override
    protected int contentViewRes() {
        return R.layout.activity_intro;
    }

    @Override
    protected int fragmentNumber() {
        return 4;
    }

    @Override
    protected Integer[] fragmentColorsRes() {
        return new Integer[]{
                R.color.white,
                R.color.white,
                R.color.white,
                R.color.white,
        };
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        r = (int)Math.sqrt(screenW * screenW + screenH * screenH) + 10;
        ImageView earth = (ImageView) findViewById(R.id.earth);
        targetPlanet = (ImageView) findViewById(R.id.planet_target);
        loginLayout = findViewById(R.id.login_layout);

        earth.setY(screenH / 2);
        targetPlanet.setY(-screenH / 2 - screenW / 2);
        targetPlanet.setScaleX(0.25f);
        targetPlanet.setScaleY(0.25f);

        wowo.addTemporarilyInvisibleViews(0, earth, findViewById(R.id.cloud_blue), findViewById(R.id.cloud_red));
        wowo.addTemporarilyInvisibleViews(0, targetPlanet);
        wowo.addTemporarilyInvisibleViews(2, loginLayout, findViewById(R.id.button));
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        addAnimations();
    }

    private void addAnimations() {
        if (animationAdded) return;
        animationAdded = true;

        addEarthAnimation();
        addCloudAnimation();
        addTextAnimation();
        addRocketAnimation();
        addCircleAnimation();
        addMeteorAnimation();
        addPlanetAnimation();
        addPlanetTargetAnimation();
        addLoginLayoutAnimation();
        addButtonAnimation();
        addEditTextAnimation();

        wowo.ready();

        // Do this the prevent the edit-text and button views on login layout
        // to intercept the drag event.
        wowo.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
                loginLayout.setEnabled(position == 3);
                loginLayout.setVisibility(position + positionOffset <= 2 ? View.INVISIBLE : View.VISIBLE);
            }
        });
    }

    private void addEarthAnimation() {
        View earth = findViewById(R.id.earth);
        wowo.addAnimation(earth)
                .add(WoWoRotationAnimation.builder().page(0).keepX(0).keepY(0).fromZ(0).toZ(180).ease(Ease.OutBack).build())
                .add(WoWoRotationAnimation.builder().page(1).keepX(0).keepY(0).fromZ(180).toZ(720).ease(Ease.OutBack).build())
                .add(WoWoRotationAnimation.builder().page(2).keepX(0).keepY(0).fromZ(720).toZ(1260).ease(Ease.OutBack).build())
                .add(WoWoScaleAnimation.builder().page(1).fromXY(1).toXY(0.5).ease(Ease.OutBack).build())
                .add(WoWoScaleAnimation.builder().page(2).fromXY(0.5).toXY(0.25).ease(Ease.OutBack).build());
    }

    private void addCloudAnimation() {
        wowo.addAnimation(findViewById(R.id.cloud_blue))
                .add(WoWoTranslationAnimation.builder().page(0).fromX(screenW).toX(0).keepY(0).ease(Ease.OutBack).sameEaseBack(false).build())
                .add(WoWoTranslationAnimation.builder().page(1).fromX(0).toX(screenW).keepY(0).ease(Ease.InBack).sameEaseBack(false).build());

        wowo.addAnimation(findViewById(R.id.cloud_red))
                .add(WoWoTranslationAnimation.builder().page(0).fromX(-screenW).toX(0).keepY(0).ease(Ease.OutBack).sameEaseBack(false).build())
                .add(WoWoTranslationAnimation.builder().page(1).fromX(0).toX(-screenW).keepY(0).ease(Ease.InBack).sameEaseBack(false).build());

        wowo.addAnimation(findViewById(R.id.cloud_yellow))
                .add(WoWoTranslationAnimation.builder().page(0).keepX(0).fromY(0).toY(dp2px(50)).ease(Ease.OutBack).sameEaseBack(false).build())
                .add(WoWoTranslationAnimation.builder().page(1).fromX(0).toX(-screenW).keepY(dp2px(50)).ease(Ease.InBack).sameEaseBack(false).build());
    }

    private void addTextAnimation() {
        View text = findViewById(R.id.text);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) text.setZ(50);
        String[] texts = new String[]{
                "HOME?",
                "OR SKY?",
                "OR UNIVERSE?",
                "Let's Discover More!",
        };
        wowo.addAnimation(text)
                .add(WoWoTextViewTextAnimation.builder().page(0).from(texts[0]).to(texts[1]).build())
                .add(WoWoTextViewTextAnimation.builder().page(1).from(texts[1]).to(texts[2]).build())
                .add(WoWoTextViewTextAnimation.builder().page(2).from(texts[2]).to(texts[3]).build())
                .add(WoWoTextViewColorAnimation.builder().page(1).from("#05502f").to(Color.WHITE).build());
    }

    private void addRocketAnimation() {
        WoWoPathView pathView = (WoWoPathView) findViewById(R.id.path_view);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) pathView.setZ(50);

        // For different screen size, try to adjust the scale values to see the airplane.
        float xScale = 1;
        float yScale = 1;

        pathView.newPath()
                .pathMoveTo(xScale * (-100), screenH - 100)
                .pathCubicTo(screenW / 2, screenH - 100,
                        screenW / 2, screenH - 100,
                        screenW / 2, yScale * (-100));
        wowo.addAnimation(pathView)
                .add(WoWoPathAnimation.builder().page(0).from(0).to(0.50).path(pathView).build())
                .add(WoWoPathAnimation.builder().page(1).from(0.50).to(0.75).path(pathView).build())
                .add(WoWoPathAnimation.builder().page(2).from(0.75).to(1).path(pathView).build())
                .add(WoWoAlphaAnimation.builder().page(2).from(1).to(0).build());
    }

    private void addCircleAnimation() {
        View circle = findViewById(R.id.circle);
        wowo.addAnimation(circle)
                .add(WoWoScaleAnimation.builder().page(1).fromXY(1).toXY(r * 2 / circle.getWidth()).build())
                .add(WoWoShapeColorAnimation.builder().page(1).from("#f9dc0a").to("#05502f").build());
    }

    private void addMeteorAnimation() {
        View meteor = findViewById(R.id.meteor);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) meteor.setZ(50);
        float fullOffset = screenW + meteor.getWidth();
        float offset = fullOffset / 2;
        wowo.addAnimation(meteor)
                .add(WoWoTranslationAnimation.builder().page(1)
                        .fromX(0).fromY(0)
                        .toX(offset).toY(offset).ease(Ease.OutBack).sameEaseBack(false).build())
                .add(WoWoTranslationAnimation.builder().page(2)
                        .fromX(offset).fromY(offset)
                        .toX(fullOffset).toY(fullOffset).ease(Ease.InBack).sameEaseBack(false).build());
    }

    private void addPlanetAnimation() {
        View planet0 = findViewById(R.id.planet_0);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) planet0.setZ(50);
        wowo.addAnimation(planet0)
                .add(WoWoTranslationAnimation.builder().page(1)
                        .keepX(0)
                        .fromY(0).toY(planet0.getHeight() + 200)
                        .ease(Ease.OutBack).sameEaseBack(false).build())
                .add(WoWoTranslationAnimation.builder().page(2)
                        .fromX(0).toX(screenW)
                        .keepY(planet0.getHeight() + 200)
                        .ease(Ease.InBack).sameEaseBack(false).build());

        View planet1 = findViewById(R.id.planet_1);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) planet1.setZ(50);
        wowo.addAnimation(planet1)
                .add(WoWoTranslationAnimation.builder().page(1)
                        .fromX(0).toX(-planet1.getWidth())
                        .keepY(0)
                        .ease(Ease.OutBack).sameEaseBack(false).build())
                .add(WoWoTranslationAnimation.builder().page(2)
                        .fromX(-planet1.getWidth()).toX(-screenW - planet1.getWidth())
                        .keepY(0)
                        .ease(Ease.InBack).sameEaseBack(false).build());
    }

    private void addPlanetTargetAnimation() {
        wowo.addAnimation(targetPlanet)
                .add(WoWoRotationAnimation.builder().page(1).keepX(0).keepY(0).fromZ(0).toZ(180).ease(Ease.OutBack).build())
                .add(WoWoRotationAnimation.builder().page(2).keepX(0).keepY(0).fromZ(180).toZ(360).ease(Ease.OutBack).build())
                .add(WoWoTranslationAnimation.builder().page(0).keepX(0)
                        .fromY(-screenH / 2 - screenW / 2)
                        .toY(-screenH / 2).ease(Ease.OutBack).sameEaseBack(false).build())
                .add(WoWoScaleAnimation.builder().page(1).fromXY(0.25).toXY(0.5).ease(Ease.OutBack).build())
                .add(WoWoScaleAnimation.builder().page(2).fromXY(0.5).toXY(1).ease(Ease.OutBack).build());
    }

    private void addLoginLayoutAnimation() {
        View layout = findViewById(R.id.login_layout);
        wowo.addAnimation(layout)
                .add(WoWoAlphaAnimation.builder().page(1).start(1).end(1).from(0).to(1).build())
                .add(WoWoShapeColorAnimation.builder().page(2).from("#05502f").to("#0aa05f").build())
                .add(WoWoElevationAnimation.builder().page(2).from(0).to(40).build());
    }

    private void addButtonAnimation() {
        View button = findViewById(R.id.button);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) button.setZ(50);
        wowo.addAnimation(button)
                .add(WoWoAlphaAnimation.builder().page(2).from(0).to(1).build());
    }

    private void addEditTextAnimation() {
        wowo.addAnimation(findViewById(R.id.username))
                .add(WoWoAlphaAnimation.builder().page(2).from(0).to(1).build());
        wowo.addAnimation(findViewById(R.id.password))
                .add(WoWoAlphaAnimation.builder().page(2).from(0).to(1).build());
    }
}
  • After Finally open AndroidManifest.XML and make IntroActivity as launcher activity. 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.wapptech.menu">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@android:style/Theme.Light.NoTitleBar">
        <activity android:name=".IntroActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

Github Link: https://github.com/Sudarshan101/Wowoviewpager?

See Demo: https://www.youtube.com/watch?v=L0BCeXyP-Sc?

About the author
Code solution

info@codesolution.co.in

Discussion
  • 0 comments

Add comment To Login
Add comment