Last updated on August 28th, 2020 at 05:13 pm

In this tutorial, I can explain to you how we can add image slider in Android Application. For this tutorial, I am using an image slider plugin developed by Shivam Srivastava.

To implement image slider in your Android Application follow below simple steps. Implementation of image slider is very easy and also I am loading an image from the server using OKHTTP3. If you did not read my last post in which I explain how we can send and get data using OKHTTP3 you can read that from this link.

Step 1. Create a new Android project (In my case my project name is AndroidImageSlider).

Step 2. Add library OKHTTP3 and ImageSlider in your build.gradle(App) and add code in dependencies as shown below

dependencies {
    /* Other lib....*/
    implementation 'com.squareup.okhttp3:okhttp:3.11.0'
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
    implementation 'com.shivam.library:imageslider:[email protected]'

Step 3. Once we add our dependencies and synchronize our project we are ready to code our application. Now open your AndroidManifest.xml and add Internet permission.

<uses-permission android:name="android.permission.INTERNET" />

Step 4. Now we can create a Package name model in which we can create BannerModel(getter and setter) class which hold id and image URL which we load for the server using web API.

package com.imageslider.model;

public class BannerModel {
    public String getUrl() {
        return url;

    public void setUrl(String url) {
        this.url = url;

    String url;

Step 5. Now open the activity_main.xml file and we call our image slider view here as shown below


Step 6. Now in our class, we first find or our ImageSlider and after that, we can load data from API and set that data into Adapter and we also create Fragment inside or MainActivity Class as shown in below code.

package com.imageslider;

import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.imageslider.model.BannerModel;
import com.shivam.library.imageslider.ImageSlider;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;

import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;

public class MainActivity extends AppCompatActivity {

    ArrayList<BannerModel> bannerModelsArray;
    ImageSlider slider;

    protected void onCreate(Bundle savedInstanceState) {

        slider = (ImageSlider) findViewById(;

        try {
        } catch (IOException e) {

    public void getImages() throws IOException {

        String url = "";

        OkHttpClient client = new OkHttpClient();

        Request request = new Request.Builder()
                .header("Accept", "application/json")
                .header("Content-Type", "application/json")

        client.newCall(request).enqueue(new Callback() {
            public void onFailure(Call call, IOException e) {
                String mMessage = e.getMessage().toString();
                Log.w("failure Response", mMessage);

            public void onResponse(Call call, Response response) throws IOException {

                final String mMessage = response.body().string();

                Log.e("Response", String.valueOf(response.code()));

                MainActivity.this.runOnUiThread(new Runnable() {
                    public void run() {

                        bannerModelsArray = new ArrayList<>();

                        JSONObject parent = null;
                        try {
                            parent = new JSONObject(mMessage);

                            // Banners
                            JSONArray banners = parent.getJSONArray("banners");
                            for (int i = 0; i < banners.length(); i++){
                                JSONObject data = banners.getJSONObject(i);
                                BannerModel bannerModel = new BannerModel();

                            // Set banner
                            SectionsPagerAdapter  mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager(), bannerModelsArray.size());

                        } catch (JSONException e) {

    public class SectionsPagerAdapter extends FragmentPagerAdapter {   // adapter to set in ImageSlider

        int imageCount = 0;

        public SectionsPagerAdapter(FragmentManager fm, int count) {

            imageCount = count;

        public Fragment getItem(int position) {

            BannerModel banner = (BannerModel)bannerModelsArray.get(position);
            return PlaceholderFragment.newInstance(banner.getUrl());

        public int getCount() {

            return imageCount;

        public CharSequence getPageTitle(int position) {

            return null;

    // Image fragment
    public static class PlaceholderFragment extends Fragment {

        public PlaceholderFragment() {


        public static PlaceholderFragment newInstance(String pic) {

            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putString("index", pic);
            return fragment;

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

            View rootView = inflater.inflate(R.layout.fragment_main3, container, false);
            Bundle args = getArguments();
            String image = args.getString("index", "");
            ImageView imageView=(ImageView)rootView.findViewById(;

            return rootView;

Here is code for the fragment_main3.xml file which holds ImageView for Slider.

<RelativeLayout xmlns:android=""



You can download code from the above download link. Hope this post helps you.