Android Tutorial:-How to create View Pager With Cover-Flow-Teachmeandroidhub(An animation Under Viewpager).

View-Pager  with Cover-flow  :- This Android tutorial  is all about how to create a wonderful  layout using-view pager  with some special  effect  that called carousel effect also to do such  layout  you don’t need  to add  any  dependencies  to  the  gradle  so let’s start this  tutorial first of all just need to create new Project in android studio I hope you know about how to create new project in android studio

 

Step -1:- In  this step you have create main activity that may be created with your  new project  creation this layout contain view pager that will adapt image view that I am going to show in this tutorial

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
   android:background="@drawable/background"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/myviewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center" />

</LinearLayout>

Step-2: Create MainActivity.java  in this  java Code we set the all parameter to the view pager to display  the data with effects  refer code to understand in better way.

MainActivity.java

package com.example.rajeev.viewpagercoverflow;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;



public class MainActivity extends AppCompatActivity {

    public final static int LOOPS = 1000;

    public CarouselPagerAdapter adapter;

    public ViewPager pager;

    public static int count = 10; //ViewPager items size

    /**
     * You shouldn't define first page = 0.
     * Let define firstpage = 'number viewpager size' to make endless carousel
     */
    public static int FIRST_PAGE = 10;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pager = (ViewPager) findViewById(R.id.myviewpager);
        //set page margin between pages for viewpager
        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        int pageMargin = ((metrics.widthPixels / 4) * 2);
        pager.setPageMargin(-pageMargin);
        adapter = new CarouselPagerAdapter(this, getSupportFragmentManager());
        pager.setAdapter(adapter);
        adapter.notifyDataSetChanged();
        pager.addOnPageChangeListener(adapter);
// Set current item to the middle page so we can fling to both
        // directions left and right
        pager.setCurrentItem(FIRST_PAGE);
        pager.setOffscreenPageLimit(3);

    }

}

Step-3  : -  Now in third step create  Adapter   to  set  data  and  get  data  in we will scale the size the view pager and image view.

CrouselPagerAdapter.java

package com.example.rajeev.viewpagercoverflow;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;


public class CarouselPagerAdapter extends FragmentPagerAdapter implements ViewPager.OnPageChangeListener {

    public final static float BIG_SCALE = 1.0f;

    public final static float SMALL_SCALE = 0.7f;

    public final static float DIFF_SCALE = BIG_SCALE - SMALL_SCALE;

    private MainActivity context;

    private FragmentManager fragmentManager;

    private float scale;

    public CarouselPagerAdapter(MainActivity context, FragmentManager fm) {

        super(fm);

        this.fragmentManager = fm;

        this.context = context;

    }
    @Override

    public Fragment getItem(int position) {
        // make the first pager bigger than others
        try {

            if (position == MainActivity.FIRST_PAGE)
                scale = BIG_SCALE;
            else
                scale = SMALL_SCALE;

            position = position % MainActivity.count;

        } catch (Exception e) {

            e.printStackTrace();
        }

        return ItemFragment.newInstance(context, position, scale);
    }
    @Override
    public int getCount() {
        int count = 0;
        try {
            count = MainActivity.count * MainActivity.LOOPS;
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
        return count;
    }
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        try {

            if (positionOffset >= 0f && positionOffset <= 1f) {

                CarouselLinearLayout cur = getRootView(position);

                CarouselLinearLayout next = getRootView(position + 1);
                cur.setScaleBoth(BIG_SCALE - DIFF_SCALE * positionOffset);
                next.setScaleBoth(SMALL_SCALE + DIFF_SCALE * positionOffset);
            }

        } catch (Exception e) {

            e.printStackTrace();

        }

    }
    @Override
    public void onPageSelected(int position) {

    }
    @Override
    public void onPageScrollStateChanged(int state) {

    }
    @SuppressWarnings("ConstantConditions")

    private CarouselLinearLayout getRootView(int position) {

        return (CarouselLinearLayout) fragmentManager.findFragmentByTag(this.getFragmentTag(position))

                .getView().findViewById(R.id.root_container);

    }



    private String getFragmentTag(int position) {

        return "android:switcher:" + context.pager.getId() + ":" + position;

    }

}

Step-4: Just Create a Linear Layout with help of java coding this will contain

    how to represent data view pager so let’s check what happening with layout. 

  In this layout I am using canvas that will be scaled up and scaled down simultaneously

during on scroll view pager

CarouselLinearLayout.java

package com.example.rajeev.viewpagercoverflow;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.LinearLayout;


public class CarouselLinearLayout extends LinearLayout {

    private float scale = CarouselPagerAdapter.BIG_SCALE;
    public CarouselLinearLayout(Context context, AttributeSet attrs) {

        super(context, attrs);

    }
    public CarouselLinearLayout(Context context) {

        super(context);

    }
    public void setScaleBoth(float scale) {

        this.scale = scale;

        this.invalidate();

    }
    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        // The main mechanism to display scale animation, you can customize it as your needs

        int w = this.getWidth();

        int h = this.getHeight();

        canvas.scale(scale, scale, w/2, h/2);

    }

}

Step-5  Now Create a Fragment to set the Image view to show content of the app

 that will be scrolled simeltaneoulsy. 

fragmentimage.xml

<?xml version="1.0" encoding="utf-8"?>

<com.example.rajeev.viewpagercoverflow.CarouselLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/root_container"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@android:color/transparent"

    android:gravity="center"

    android:orientation="vertical">

    <ImageView

        android:id="@+id/pagerImg"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:scaleType="fitXY"

        android:contentDescription="@string/app_name"

        android:src="@drawable/back" />

    <TextView

        android:id="@+id/text"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</com.example.rajeev.viewpagercoverflow.CarouselLinearLayout>

Now create a Java File to give action to layout.

ItemFragment.java

package com.example.rajeev.viewpagercoverflow;



import android.annotation.SuppressLint;

import android.content.Intent;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.util.DisplayMetrics;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;



public class ItemFragment extends Fragment {

    private static final String POSITON = "position";

    private static final String SCALE = "scale";

    private static final String DRAWABLE_RESOURE = "resource";

    private int screenWidth;

    private int screenHeight;



    private int[] imageArray = new int[]{R.drawable.aamir, R.drawable.prineeti,

            R.drawable.shushant, R.drawable.shradha, R.drawable.nawazuddin,

            R.drawable.alia, R.drawable.hritik, R.drawable.beauty,

            R.drawable.dhoni, R.drawable.shirly};



    public static Fragment newInstance(MainActivity context, int pos, float scale) {

        Bundle b = new Bundle();

        b.putInt(POSITON, pos);

        b.putFloat(SCALE, scale);

        return Fragment.instantiate(context, ItemFragment.class.getName(), b);

    }



    @Override

    public void onCreate(@Nullable Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        getWidthAndHeight();

    }



    @SuppressLint("SetTextI18n")

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        if (container == null) {

            return null;

        }



        final int postion = this.getArguments().getInt(POSITON);

        float scale = this.getArguments().getFloat(SCALE);

        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(screenWidth / 2, screenHeight / 2);

        LinearLayout linearLayout = (LinearLayout) inflater.inflate(R.layout.fragment_image, container, false);



        TextView textView = (TextView) linearLayout.findViewById(R.id.text);

        CarouselLinearLayout root = (CarouselLinearLayout) linearLayout.findViewById(R.id.root_container);

        ImageView imageView = (ImageView) linearLayout.findViewById(R.id.pagerImg);

        imageView.setLayoutParams(layoutParams);

        imageView.setImageResource(imageArray[postion]);



        //handling click event

        imageView.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                Intent intent = new Intent(getActivity(), ImageDetailsActivity.class);

                intent.putExtra(DRAWABLE_RESOURE, imageArray[postion]);

                startActivity(intent);

            }

        });



        root.setScaleBoth(scale);



        return linearLayout;

    }



    /**

     * Get device screen width and height

     */

    private void getWidthAndHeight() {

        DisplayMetrics displaymetrics = new DisplayMetrics();

        getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);

        screenHeight = displaymetrics.heightPixels;

        screenWidth = displaymetrics.widthPixels;

    }

}

Step-6 This Is Our Last Step to finish this tutorial in this step I have created an activity to show the item detail when an item clicked In view pager.

activity_full_image.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" >

    <ImageView

        android:id="@+id/img"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:scaleType="fitCenter" />

    <Button

        android:id="@+id/btnClose"

        android:padding="5dp"

        android:layout_width="wrap_content"

        android:layout_height="30dp"

        android:layout_alignParentRight="true"

        android:layout_alignParentTop="true"

        android:layout_marginRight="@dimen/activity_horizontal_margin"

        android:layout_marginTop="15dp"

        android:text="Close" />



</RelativeLayout>

And java File of this activity is below

ImageDetailsActivity.java

package com.example.rajeev.viewpagercoverflow;



import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;



public class ImageDetailsActivity extends AppCompatActivity {



    private ImageView imageView;

    private Button button;

    private static final String DRAWABLE_RESOURE = "resource";

    @Override

    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_full_image);

        imageView = (ImageView)findViewById(R.id.img);
        button = (Button)findViewById(R.id.btnClose);
        int drawbleResource = getIntent().getIntExtra(DRAWABLE_RESOURE, 0);
        imageView.setImageResource(drawbleResource);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                finish();
            }

        });

    }
    @Override

    public void onBackPressed() {

        finish();
    }

}

I hope you liked my Tutorial if you find it useful for you then share it with 

your friends and follow my page to get more new android tutorial “Learn More Grow More” 

Output:-