How to make gallery app using view pager in android studio

Introduction

In this article we will learn how to make  gallery app using view pager. You can make a lots of app using only 1 template. View pager mostly used for swipe screen animation, in this app we will used for image swiping. View pager is layout manager that allow the user to swipe left and right of fragment.

Steps:

  1. Put Viewpager widget in your xml code. I put widget in acticvity_main.xml
  2. Create assets folder and paste images in asset folder these images are used in app.
  3. Create an adapter of images handling.
  4. Copy and paste the code
  5. In PageAdapter, we will access images from drawabale folder so you can replace the images name.

Code

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

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

    </android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>
PageAdapter.java
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;


public class PageAdapter extends PagerAdapter {


    Context mcontext;
    private  int[]images=new int[]{R.drawable.image1,R.drawable.image2};
    public PageAdapter(Context mcontext) {
        this.mcontext = mcontext;
    }

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

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView imageView= new ImageView ( mcontext );
        imageView.setScaleType ( ImageView.ScaleType.CENTER_CROP );
        imageView.setImageResource ( images[position] );
        container.addView ( imageView,0 );
        return  imageView;
    }

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

        container.removeView ( (ImageView)object );
    }
}
MainActivity.java
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        ViewPager viewPager= findViewById ( R.id.viewpager );
        PagerAdapter pagerAdapter=new PageAdapter ( this );
        viewPager.setAdapter ( pagerAdapter );
    }
}

Conclusion

In this article we lean about viewpager, this article is very help full. and we can easily understand how to use viewpager in our app.

Notice

I was upload video on youtube in which i can explain about viewpager so kindly watch that video.

Youtube Video: Its my channel video must watch friends.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *