How To Create Images Slider In Android

Hello everyone, in this post I will discuss about how to create a "Images Slider" program in Android Studio which is accompanied by an indicator. Programs like this are often seen in applications that are global like Instagram. Okay, first open Android Studio and create a new project.





When finished, we need two layouts (activity_main and slide) and two class (MainActivity and MyAdapter). Before that enter some Dependencies needed as follows

dependencies {
   compile fileTree(dir: 'libs', include: ['*.jar'])
   testCompile 'junit:junit:4.12'
   compile 'com.android.support:appcompat-v7:25.3.1'
   compile 'com.android.support:design:25.3.1'
   compile 'me.relex:circle'
}

When finished, prepare several images and save them to the drawable folder on your project.

Now, open slide.xml and enter the following code

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

    <ImageView
        android:id="@+id/image"
        android:adjustViewBounds="true"
        android:layout_gravity="center"
        android:src="@drawable/one"
        android:scaleType="centerCrop"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</FrameLayout>

Continue to the activity_main.xml layout and enter the following code

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

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_alignParentTop="true"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
        <me.relex.circleindicator.CircleIndicator
            android:id="@+id/indicator"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="48dp"/>
    </RelativeLayout>

</LinearLayout>

When it's finished, we move to the class section, then open MyAdapter and enter the following code

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.ArrayList;

public class MyAdapter extends PagerAdapter {

    private ArrayList<Integer> images;
    private LayoutInflater inflater;
    private Context context;

    public MyAdapter(Context context, ArrayList<Integer> images){
        this.context = context;
        this.images = images;
        inflater = LayoutInflater.from(context);
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object){
        container.removeView((View)object);
    }


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

    @Override
    public Object instantiateItem(ViewGroup view, int position){
        View myImageLayout  = inflater.inflate(R.layout.slide, view, false);
        ImageView myImage = (ImageView) myImageLayout.findViewById(R.id.image);   
        myImage.setImageResource(images.get(position));
        view.addView(myImageLayout, 0);
        return myImageLayout;
    }

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

And finally open Main_Activity and enter the following code

import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;
import me.relex.circleindicator.CircleIndicator;

public class MainActivity extends AppCompatActivity {

    private static ViewPager mPager;
    private static int currentPage = 0;
    private static final Integer[] img = {R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.four,R.drawable.five,R.drawable.six};   
    private ArrayList<Integer>  ImgArray = new ArrayList<Integer>();

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

    private void init (){
        for (int i=0; i<img.length; i++)
            ImgArray.add(img[i]);

            mPager = (ViewPager) findViewById(R.id.pager);
            mPager.setAdapter(new MyAdapter(MainActivity.this, ImgArray));
            CircleIndicator indicator = (CircleIndicator)findViewById(R.id.indicator);
            indicator.setViewPager(mPager);

            final Handler handler = new Handler();
            final Runnable Update = new Runnable() {
                @Override
                public void run() {
                    if (currentPage == img.length){
                        currentPage = 0;
                    }
                    mPager.setCurrentItem(currentPage++, true);
                }
            };
            //Auto start
            Timer swipeTimer = new Timer();
            swipeTimer.schedule(new TimerTask() {
                @Override
                public void run() {
                    handler.post(Update);
                }
            }, 2500, 2500);
        }
}

If there is no error here, the program is ready to run. You need to know that this program will display images automatically, if you want to make it not automatic, you just delete the code in the Auto start section.