ViewPager with simple pages content (not Fragment)

    As usually, we use ViewPager with it's content are Fragments. The fact that, sometimes, the content seem very simple like only included an ImageView or a TextView,...In these cases, we mustn't make the code for each ViewPager's page too much complicated, it will affect the app performance.
   In this post, I will create a project with this condition, also using CirclePageIndicator (from ViewIndicator library) to make the ViewPager page indicator.
    By using PagerAdapter and overriding instantiateItem() method, we can "make a simple ViewPager quickly". For example, the "page content" only included a TextView like this:

item_viewpager.xml

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

    <TextView
        android:id="@+id/number"
        android:layout_centerInParent="true"
        android:textColor="#000000"
        android:textSize="50sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

    Back to ViewPager adapter, we must take attention in 3 methods:

• isViewFromObject(): Determines whether a page view is associated with a specific key object. Use return view == object in it's content.
• instantiateItem(): Create the page for the given position. Here, the page view will be inflated from the xml file above.
• destroyItem(): Remove a page for the given position. Use it to release the memory when a page is not visible (optional).

    Source code for the adapter:

SimplePagerAdapter.java

package info.devexchanges.viewpager;

import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class SimplePagerAdapter extends PagerAdapter {
    private Activity activity;

    public SimplePagerAdapter(Activity activity) {
        this.activity = activity;
    }

    @Override
    public int getCount() {
        return 5;
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        LayoutInflater inflater = (LayoutInflater) activity.getApplicationContext().getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(R.layout.item_viewpager, container, false);
        TextView textView = (TextView) itemView.findViewById(R.id.number);

        textView.setText(String.valueOf(position + 1));

        container.addView(itemView);

        return itemView;
    }

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

     In the Activity programmatically code, finding all views and create/set adapter for the ViewPager:

MainActivity.java

package info.devexchanges.viewpager;

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

import com.viewpagerindicator.CirclePageIndicator;

public class MainActivity extends AppCompatActivity {

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

        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        CirclePageIndicator indicator = (CirclePageIndicator) findViewById(R.id.indicator);

        PagerAdapter adapter = new SimplePagerAdapter(this);
        viewPager.setAdapter(adapter);
        indicator.setViewPager(viewPager);
    }
}

And it's layout:

activity_main.xml

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

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.85" />

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:fillColor="@color/colorPrimaryDark"
        app:snap="true" />

</LinearLayout>

    Running app, we have this result:

Final thoughts

    Through all steps above, I hope that readers can make a simple ViewPager with PagerAdapter. Moreover, please take a look at ViewPagerIndicator home page to understanding this powerful library and read this post to find out the way to import an external library as a module in Android Studio project.

View Project on Github

Author : Hong Thai

Share