How to create Image gallery using ViewPager in Android?

Question

I want to create a Gallery using ViewPager and thumbnails below the ViewPager view exactly explained in this source code. But my problem is that, my class is a Fragment instead of Activity and the class extends DialogFragment. I am confused how to do this. I can't resolve this error:

The method getSupportFragmentManager() is undefined for the type Fragment

I know that i can't use getSupportFragmentManager() in Fragment but i cannot use getFragmentManager() either.How to fix this? Somebody please help.

My Adapter class:

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.List;

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

    private List<Integer> images;

    public ViewPagerAdapter(FragmentManager fm, List<Integer> imagesList) {
        super(fm);
        this.images = imagesList;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.getInstance(images.get(position));
    }

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

Adapter instantiation:

ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager(), images);
viewPager.setAdapter(adapter);

Answer 1

There is a library for creating an indicator for viewPager that shows a small preview for each images in the viewPager with ability to delete item in real time.

It's nice to take a look at: ThumbIndicator:

Answer 2

What i have done here is i have created a DummyFragment that extends DialogFragment and moved all code from MainActivity to that Fragment, you can check the files, the remaining files are same as in the Code link you gave

MainActivity

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {


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

    getSupportFragmentManager().beginTransaction().replace(R.id.container, DummyFragment.newInstance()).commit();

}

}

layout_dummy.xml

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

</FrameLayout>

DummyFragment // Your Dialog Fragment

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.DialogFragment;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;

/**
* Created by Satyen on 11/16/15.
*/
public class DummyFragment extends DialogFragment {

View view;

private ArrayList<Integer> images;
private BitmapFactory.Options options;
private ViewPager viewPager;
private View btnNext, btnPrev;
private FragmentStatePagerAdapter adapter;
private LinearLayout thumbnailsContainer;
private final static int[] resourceIDs = new int[]{R.mipmap.a, R.mipmap.b,
        R.mipmap.c, R.mipmap.d, R.mipmap.e, R.mipmap.f, R.mipmap.g};

public static DummyFragment newInstance() {
    DummyFragment dummyFragment = new DummyFragment();
    return dummyFragment;
}

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

    view = inflater.inflate(R.layout.activity_main, container, false);

    images = new ArrayList<>();

    //find view by id
    viewPager = (ViewPager) view.findViewById(R.id.view_pager);
    thumbnailsContainer = (LinearLayout) view.findViewById(R.id.container);
    btnNext = view.findViewById(R.id.next);
    btnPrev = view.findViewById(R.id.prev);

    btnPrev.setOnClickListener(onClickListener(0));
    btnNext.setOnClickListener(onClickListener(1));

    setImagesData();

    // init viewpager adapter and attach
    adapter = new ViewPagerAdapter(getChildFragmentManager(), images);
    viewPager.setAdapter(adapter);

    inflateThumbnails();
    return view;
}

private View.OnClickListener onClickListener(final int i) {
    return new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (i > 0) {
                //next page
                if (viewPager.getCurrentItem() < viewPager.getAdapter().getCount() - 1) {
                    viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                }
            } else {
                //previous page
                if (viewPager.getCurrentItem() > 0) {
                    viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);
                }
            }
        }
    };
}

private void setImagesData() {
    for (int i = 0; i < resourceIDs.length; i++) {
        images.add(resourceIDs[i]);
    }
}

private void inflateThumbnails() {
    for (int i = 0; i < images.size(); i++) {
        View imageLayout = getActivity().getLayoutInflater().inflate(R.layout.item_image, null);
        ImageView imageView = (ImageView) imageLayout.findViewById(R.id.img_thumb);
        imageView.setOnClickListener(onChagePageClickListener(i));
        options = new BitmapFactory.Options();
        options.inSampleSize = 3;
        options.inDither = false;
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), images.get(i), options );
        imageView.setImageBitmap(bitmap);
        //set to image view
        imageView.setImageBitmap(bitmap);
        //add imageview
        thumbnailsContainer.addView(imageLayout);
    }
}

private View.OnClickListener onChagePageClickListener(final int i) {
    return new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewPager.setCurrentItem(i);
        }
    };
}
}

Answer 3

You have more than one option. Not sure which exactly will be best for your case.

1). (Probably what you need) fragment.getChildFragmentManager() will return nested fragment manager for your fragment. Its usually used for adding/replacing fragments to other fragments, so paging is similar case.

2) getActivity().getFragmentManager() / getActivity().getSupportFragmentManager() will return fragment manager of Activity (same used for adding/replacing fragment directly on activity layout

Answer 4

my class is a Fragment instead of Activity and the class extends DialogFragment. I am confused how to do this. I can't resolve this error:

in this case you have to use getFragmentManager() directly. Android will return the support fragment manager if your Fragment is from the support package. In this case I think you probably want to use getChildFragmentManager().