Android Dynamic ViewPager for Image with ImageZoom

Last updated on April 3rd, 2019 at 03:19 pm

In this post I will explain how we can create custom image slider using ViewPager and also implement image zoom in it. This post really helpful if you want to implement a custom image slider with zoom effect and load images from WebAPI. So without wasting time lets start building an application.

Step 1. Create a new application in your Android Studio.

Step 2. Now open your AndroidManifest.xml and add Internet permission.

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

Step 3. Now open project build.gradle file and add repositories as shown below

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        google()
        jcenter()
        
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.1'
        
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
        
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Step 4. Now open app build.gradle and add required dependencies.

dependencies {
    /* Other dependencies...*/
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
    implementation 'com.github.chrisbanes:PhotoView:2.0.0'
}

I am using Glide to load the image from URL and PhotoView library to add a zoom effect on Images.

Step 5. Now we can create a class ImageModel.java basically getter setter which holds our data.

package com.dynamicviewpager;

public class ImageModel {
    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    String imageUrl;
    int id;
}

Step 6. Now we can create a Layout file for our adapter. Create a new file (pager_item.xml) in res -> layout directory.

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

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

Step 7. Now create our adapter class Pager which extends PagerAdapter.

package com.dynamicviewpager;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.github.chrisbanes.photoview.PhotoView;

import com.bumptech.glide.Glide;

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

public class Pager extends PagerAdapter {

    Context mContext;
    LayoutInflater mLayoutInflater;
    private List<ImageModel> imageModelList;

    public Pager(Context context, ArrayList<ImageModel> feedItemList) {
        this.mContext = context;
        mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        this.imageModelList = feedItemList;
    }

    @Override
    public int getCount() {
        return (null != imageModelList ? imageModelList.size() : 0);
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);

        ImageModel get = imageModelList.get(position);

        PhotoView photoView = (PhotoView) itemView.findViewById(R.id.image);
        Glide
                .with(this.mContext)
                .load(get.getImageUrl())
                .into(photoView);

        container.addView(itemView);
        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((LinearLayout) object);
    }
}

Step 8. Now open activity_main.xml file and call ViewPager in the file as shown below.

<?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:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</RelativeLayout>

Step 9. Now we can call or Adapter and load images and create our viewpager.

package com.dynamicviewpager;

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

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

public class MainActivity extends AppCompatActivity {

    ViewPager viewPager;
    Pager pager;
    ArrayList<ImageModel> imageModelsArray;

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

        viewPager = (ViewPager) findViewById(R.id.pager);

        imageModelsArray =  new ArrayList<>();
        ImageModel imageModel = new ImageModel();
        imageModel.setId(0);
        imageModel.setImageUrl("https://images.wholesalecatalogsurat.com/images/300/12879.jpg");
        imageModelsArray.add(imageModel);

        ImageModel imageModel1 = new ImageModel();
        imageModel1.setId(1);
        imageModel1.setImageUrl("https://images.wholesalecatalogsurat.com/images/300/12880.jpg");
        imageModelsArray.add(imageModel1);

        ImageModel imageModel2 = new ImageModel();
        imageModel2.setId(2);
        imageModel2.setImageUrl("https://images.wholesalecatalogsurat.com/images/300/12881.jpg");
        imageModelsArray.add(imageModel2);

        ImageModel imageModel3 = new ImageModel();
        imageModel3.setId(3);
        imageModel3.setImageUrl("https://images.wholesalecatalogsurat.com/images/300/12882.jpg");
        imageModelsArray.add(imageModel3);

        pager = new Pager(this, imageModelsArray);
        viewPager.setAdapter(pager);

    }
}

That’s it. In the above code, there is nothing complex to understand, we simply create ArrayList and create an object of our ImageModel and save that object in ArrayList and later we can pass that array to Adapter(Pager). Hope this post helps you.