infinite cycle view pager android github library
infinite cycle view pager android github library

In this tutorial i will show you how to make an Infinite Cycle View Pager with On Click Listner.

INFINITE CYCLE VIEW PAGER

Demo Screen Recorded

This Github Android Library  comes with with two-way orientation i.e Horizontal and Vertical Orientation and interactive effect.

In a normal ViewPager, you are allowed only  to scroll from the first page to second page until the last Page, from left-to-right. Once you reach the last page, your only option is to scroll backwards, right-to-left. In other words if we say from last page you cannot go back to first page directly, you need to scroll backwards until first page. Therefore I have found a infinite cycle ImageView Card ViewPager that solve the a problem.

Installation of Infinite Card ViewPager in project.

Let us now start adding required dependencies library into our android studio project.

Minimun SDK Version required for this library:

InfiniteCycleViewPager requires a minimum SDK version of 11.

Add Github Dependenices library in to Gradle (Module:app)

implementation 'com.github.devlight:infinitecycleviewpager:1.0.2'

Or Maven:

<dependency>
  <groupId>com.github.devlight</groupId>
  <artifactId>infinitecycleviewpager</artifactId>
  <version>1.0.2</version>
  <type>pom</type>
</dependency>

Library is now been successfully added into your project.

activity_main.xml

<!--<com.gigamole.infinitecycleviewpager.VerticalInfiniteCycleViewPager-->
<com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:icvp_interpolator="..."
    app:icvp_center_page_scale_offset="30dp"
    app:icvp_max_page_scale="0.8"
    app:icvp_medium_scaled="true"
    app:icvp_min_page_scale="0.5"
    app:icvp_min_page_scale_offset="5dp"
    app:icvp_scroll_duration="500"/>

Refer Official Github library

Implementation of Infinite Cycle ViewPager Github Android Library.

Create a new Project under Android Studio

File>New>New Project > Emply Project > Give name To the prject.

activity_Main.xml

Add the xml UI design code of  Horizontal Infinite Cycle ViewPager.

You can set vertical or horizontal infinite cycle ViewPager.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager
        android:id="@+id/horizontalcardviewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:icvp_interpolator="@android:anim/accelerate_decelerate_interpolator"
        app:icvp_center_page_scale_offset="30dp"
        app:icvp_max_page_scale="0.8"
        app:icvp_medium_scaled="true"
        app:icvp_min_page_scale="0.5"
        app:icvp_min_page_scale_offset="5dp"
        app:icvp_scroll_duration="500">
    </com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager>

</RelativeLayout>

Then, Create a new Layout xml file under Layout directory.

Right Click on Layout directory > New > Layout Resource File

I have name new layout xml file as card_item.xml

In card_item.xml file we will define the UI design.

Card_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:id="@+id/fragment"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/imageview"/>

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textColor="#F1EDED"
           android:id="@+id/textview1"
           android:text="HELLO WORLD"
           android:textSize="30sp"
           android:layout_margin="20dp"
           android:layout_gravity="bottom"
           />
    </FrameLayout>
</LinearLayout>

In the above lines of code i have 2 views that is  ImageView and a TextView which is inside FrameLayout

I have wrapped it into FrameLayout so that i can display a textview top of ImageView.

MyAdopter.java

package protocoderspoint.com.devlightinfinitecardviewpager;

import android.content.Context;
import android.provider.ContactsContract;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;

import java.util.List;

public class MyAdopter extends PagerAdapter {

    List<Integer> images;
    Context context;
    LayoutInflater layoutInflater;


    public MyAdopter(List<Integer> images, Context context) {
        this.images = images;
        this.context = context;
        layoutInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return images.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view.equals(object);
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {

        container.removeView((View)object);
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, final int position) {

        View view= layoutInflater.inflate(R.layout.card_item,container,false);
        ImageView imageView =(ImageView)view.findViewById(R.id.imageview);
        imageView.setImageResource(images.get(position));
        container.addView(view);

        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context,"Clicked image " +position,Toast.LENGTH_LONG ).show();
            }
        });
        return view;

    }
}

Create a new Java class and name it as MyAdopter.java and copy paste the below adopter code in that class.

MainActivty.java

package protocoderspoint.com.devlightinfinitecardviewpager;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.HorizontalScrollView;

import com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    List<Integer> images= new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        initData();

        HorizontalInfiniteCycleViewPager horizontalInfiniteCycleViewPager =(HorizontalInfiniteCycleViewPager)findViewById(R.id.horizontalcardviewpager);
        MyAdopter myAdopter = new MyAdopter(images,getBaseContext());
        horizontalInfiniteCycleViewPager.setAdapter(myAdopter);
       

    }

    private void initData() {
        images.add(R.drawable.card1a);
        images.add(R.drawable.card2a);
        images.add(R.drawable.card3a);
        images.add(R.drawable.card4a);
    }
}

MainActivity.java is a main launcher page that will load as soon as the app start.

List that holds arrayList of images from drawable directory.

images.add(R.drawable.card1a) is used to add images into arraylist.

Just Copy paste above code in Main_Activity.java

and all set the Infinite Cycle View Pager android project is ready to run.

RELATED ARTICLESMORE FROM AUTHOR

1 Comment