Tuesday, 13 September 2016

ViewPager transformation in android

Hi friends
Today we are learn about how to animate view pager pages so lets start and make your app more beautiful.

Create a new android project and follow some instructions ....

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

ActvityMain.java

package com.samset.user.appintro;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

import com.samset.user.appintro.adapters.MyPagerAdapter;
import com.samset.user.appintro.transformations.IntroPageTransformer;
import com.samset.user.appintro.transformations.ZoomOutPageTransformer;

public class MainActivity extends AppCompatActivity {
    private ViewPager pager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pager = (ViewPager) findViewById(R.id.viewpager);
        // Set an Adapter on the ViewPager
        pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));

        // Set a PageTransformer
        // pager.setPageTransformer(false, new IntroPageTransformer());
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);//Menu Resource, Menu
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.trans_1:
                pager.setPageTransformer(false, new ViewPager.PageTransformer() {
                    @Override
                    public void transformPage(View page, float position) {
                        final float normalizedposition = Math.abs(Math.abs(position) - 1);
                        page.setAlpha(normalizedposition);
                    }
                });
                return true;
            case R.id.trans_2:
                pager.setPageTransformer(false, new ViewPager.PageTransformer() {
                    @Override
                    public void transformPage(View page, float position) {
                        final float normalizedposition = Math.abs(Math.abs(position) - 1);
                        page.setScaleX(normalizedposition / 2 + 0.5f);
                        page.setScaleY(normalizedposition / 2 + 0.5f);
                    }
                });
                return true;
            case R.id.trans_3:
                pager.setPageTransformer(false, new ViewPager.PageTransformer() {
                    @Override
                    public void transformPage(View page, float position) {
                        final float normalizedposition = Math.abs(Math.abs(position) - 1);
                        page.setScaleX(normalizedposition / 2 + 0.5f);
                        page.setScaleY(normalizedposition / 2 + 0.5f);
                    }
                });
                return true;
            case R.id.trans_4:
                pager.setPageTransformer(false, new ViewPager.PageTransformer() {
                    @Override
                    public void transformPage(View page, float position) {
                        page.setRotationY(position * -30);
                    }
                });
                return true;
            case R.id.trans_5:
                pager.setPageTransformer(false, new ViewPager.PageTransformer() {
                    @Override
                    public void transformPage(View view, float position) {
                        view.setTranslationX(view.getWidth() * -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));
                        }

                    }
                });
                return true;
            case R.id.trans_6:
                pager.setPageTransformer(false, new ViewPager.PageTransformer() {
                    @Override
                    public void transformPage(View view, float position) {
                        view.setTranslationX(view.getWidth() * -position);

                        if (position <= -1.0F || position >= 1.0F) {        // [-Infinity,-1) OR (1,+Infinity]
                            view.setAlpha(0.0F);
                            view.setVisibility(View.GONE);
                        } else if( position == 0.0F ) {     // [0]
                            view.setAlpha(1.0F);
                            view.setVisibility(View.VISIBLE);
                        } else {

                            // Position is between [-1,1]
                            view.setAlpha(1.0F - Math.abs(position));
                            view.setTranslationX(-position * (view.getWidth() / 2));
                            view.setVisibility(View.VISIBLE);
                        }

                    }
                });
                return true;
            case R.id.trans_7:
                pager.setPageTransformer(false, new ZoomOutPageTransformer());
                return true;
            case R.id.trans_8:
                pager.setPageTransformer(false, new IntroPageTransformer());
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}


Pageradapter.java


package com.samset.user.appintro.adapters;

import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.samset.user.appintro.fragments.FirstFragment;

/**
 * Created by user on 13-Sep-16.
 */
public class MyPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return FirstFragment.newInstance(Color.parseColor("#03A9F4"), position); // blue
            case 1:
                return FirstFragment.newInstance(Color.parseColor("#9C27B0"), position); // purpal
            case 2:
                return FirstFragment.newInstance(Color.parseColor("#E91E63"), position); // pink
            case 3:
                return FirstFragment.newInstance(Color.parseColor("#F44336"), position); // red
            default:
                return FirstFragment.newInstance(Color.parseColor("#4CAF50"), position); // green
        }
    }

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

}

Thank you
 Fullsource codeViewPager_Transformation

Live Sample






No comments:

Post a Comment