Custom ViewPager without Fragments

Happen to create a custom viewpager for my project . Thought of sharing it in my blog.

  • Approach is without using fragments.
  • Use Pageadapter to achieve the result.

Layout:

<RelativeLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <au.com.auspost.android.common.view.MiniSlideViewer
        android:id="@+id/mini_slide"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

MinisliderViewer.java

public class MiniSlideViewer extends RelativeLayout {

    ViewPager viewPager;
    CirclePageIndicator pageIndicator;
    Animation slideUpAnimation;
    SplashScreenPrefs splashScreenPrefs;

    private static final float thresholdOffset = 0.5f;
    private boolean scrollStarted, checkDirection;

    public MiniSlideViewer(Context context) { // passing listview instance just to achieve the animation effect.
        this(context, null);
    }

    public MiniSlideViewer(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    void init(Context context) {

        inflate(context, R.layout.slide_view_pager, this);
        viewPager = (ViewPager) findViewById(R.id.pager);
        pageIndicator = (CirclePageIndicator) findViewById(R.id.pageIndicator);
        splashScreenPrefs = SplashScreenPrefs.getInstance();
    }

    /**
     * setPageIndicatorFillColor - set page indicator fill color
     *
     * @param fillColor
     */
    public void setPageIndicatorFillColor(int fillColor) {
        pageIndicator.setFillColor(fillColor);
    }

    /**
     * setPageIndicatorPageColor - set Page indicator page color
     *
     * @param pageColor
     */
    public void setPageIndicatorPageColor(int pageColor) {
        pageIndicator.setPageColor(pageColor);
    }

    public void setViewPagerAdapter(MiniSlideAdapter viewPagerAdapter) {
        viewPager.setAdapter(viewPagerAdapter);
        pageIndicator.setViewPager(viewPager);
        TrackingHelper.omnitureDeliveryAddressSlidePageLoad(getContext(), viewPager.getCurrentItem());
    }
}

MiniSlideAdapter.java

public class MiniSlideAdapter extends PagerAdapter {

    private final Context context;
    private static int[] miniViewerBgResources;
    private static int[] miniViewerImageResources;
    private static String[] miniViewerStringResources;

    HideMiniSlidesListener miniSlidesListener;

    /**
     * Callback for Skip click in dae slides .
     */
    public interface HideMiniSlidesListener {
        void onMiniSliderSkipClick();
    }

    public MiniSlideAdapter(Context context, int[] bgResources, int[] imgResources, String[] stringResources) {
        this.context = context;
        miniViewerBgResources = bgResources;
        miniViewerImageResources = imgResources;
        miniViewerStringResources = stringResources;
        miniSlidesListener = (HideMiniSlidesListener) context;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

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

        ImageView daeImage = (ImageView) view.findViewById(R.id.slide_image);
        TextView daeInfoText = (TextView) view.findViewById(R.id.slide_label);
        View daeSlide = view.findViewById(R.id.content);
        Button daeSkip = (Button) view.findViewById(R.id.skip);

        //show the skip button only in the last slide.
        if (position == getCount() - 1) {
            daeSkip.setVisibility(View.VISIBLE);
        }

        daeSkip.setOnClickListener(view1 -> miniSlidesListener.onMiniSliderSkipClick());

        daeImage.setImageResource(miniViewerImageResources[position]);
        daeInfoText.setText(miniViewerStringResources[position]);
        daeSlide.setBackgroundColor(ContextCompat.getColor(context, miniViewerBgResources[position]));

        (container).addView(view);

        return view;
    }

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

 

All good Now, just invoke in the activity;

final MiniSlideAdapter miniSlideAdapter = new MiniSlideAdapter(this, daeBgResources, daeImageResources, daeStringResources);
miniSlideViewer.setViewPagerAdapter(miniSlideAdapter);

I have passed the array of Images and Strings. Just modify the code as per your needs.

Note: For Page Indicator, I have used PageIndicator library. Refer here

Happy coding 🙂

One thought on “Custom ViewPager without Fragments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s