In this example we shall see how to implement a simple Next/Previous type of pagination in xamarin android.C# is our language of course.We generate data dynamically and page/paginate data.

If we reach the last page of course teh next button is disabled while if we are in the first page the previous button is disabled.

Intro

  • We page/paginate data in our GridView.
  • We fill the gridview with data that we generate.
  • If you click next we push you to the next page,while if you click previous we take you to the previous page.
  • If we reach the last page,the next button is disabled so you can move forward.We do the same with the first page with the previous button.
  • We use GridView as our component.
  • We’ve used Visual Studio as our IDE.
  • The code is well commented for easier understanding.

Common Questions we answer

With this simple example we explore the following :

  • How to page/paginate data.
  • Xamarin android pagination.
  • Next/Previous pagination example in android xamarin.
  • C# xamarin GridView tutorial.
  • How to paginate an arraylist.
  • Using Xamarin Android with GridView.

Tools Used

  • IDE : Visual Studio 2013
  • OS : Windows 8.1

Source Code

Lets start.

MainActivity Class

  • Our MainActivity,launcher activity.
  • First we reference views here,our GridView as well as next and previous buttons.
  • We initialize a counter variable to track the current page.
  • We increment or decrement this variable depending on the button the user clicks.
using Android.App;
using Android.Widget;
using Android.OS;

namespace GridView_Pagination
{
    [Activity(Label = "GridView_Pagination", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
    private GridView gv;
        private Button nextBtn,prevBtn;
        private readonly Paginator p = new Paginator();
        private const int totalPages = Paginator.TOTAL_NUM_ITEMS/Paginator.ITEMS_PER_PAGE;
        private int currentPage=0;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            // Set our view from the "main" layout resource
             SetContentView (Resource.Layout.Main);

            this.initializeViews();

            //BIND FIRST PAGE
            gv.Adapter=new ArrayAdapter(this,Android.Resource.Layout.SimpleListItem1,p.generatePage(currentPage));
        }

        /*
         * 1. INITIALIZE VIEWS : GridView,Buttons
         * 2. HANDLE ITEMCLICKS
         */
        private void initializeViews()
        {
            //REFERENCE VIEWS
            gv = FindViewById<GridView>(Resource.Id.gv);
            nextBtn = FindViewById<Button>(Resource.Id.nextBtn);
            prevBtn = FindViewById<Button>(Resource.Id.prevBtn);

            prevBtn.Enabled=false;

            //BUTTON CLICKS
            nextBtn.Click += nextBtn_Click;
            prevBtn.Click += prevBtn_Click;
        }

        /*
         * PREVIOUS BUTTON CLICKED
         */
        void prevBtn_Click(object sender, System.EventArgs e)
        {
             currentPage-=1;
             gv.Adapter=new ArrayAdapter(this,Android.Resource.Layout.SimpleListItem1,p.generatePage(currentPage));
             toggleButtons();

        }

        /*
         * NEXT BUTTON CLICKED
         */
        void nextBtn_Click(object sender, System.EventArgs e)
        {

       currentPage+=1;
            gv.Adapter=new ArrayAdapter(this,Android.Resource.Layout.SimpleListItem1,p.generatePage(currentPage));
            toggleButtons();
        }

        /*
         * TOGGLE BUTTON STATES
         */
        private void toggleButtons()
        {
            if (currentPage == totalPages)
            {
                nextBtn.Enabled=false;
                prevBtn.Enabled=true;
            }
            else
                if (currentPage == 0)
                {
                    prevBtn.Enabled=false;
                    nextBtn.Enabled=true;
                }
                else
                    if (currentPage >= 1 && currentPage <= 5)
                    {
                        nextBtn.Enabled=true;
                        prevBtn.Enabled=true;
                    }

        }
    }
}

Paginator Class

  • This class pages/paginates our arraylist,returning the current page.
  • Its also responsible for generating dummy data.
  • We also hold the constants that determine how we page our data.
using System;
using System.Collections;

namespace GridView_Pagination
{
    class Paginator
    {
    //CONSTANTS
    public const int TOTAL_NUM_ITEMS=52;
    public const int ITEMS_PER_PAGE=10;
    public const int ITEMS_REMAINING=TOTAL_NUM_ITEMS % ITEMS_PER_PAGE;
    public const int LAST_PAGE = TOTAL_NUM_ITEMS / ITEMS_PER_PAGE;

    /*
     * GENERATE A SINGLE PAGE DATA
     * PASS US THE CURRENT PAGE POSITION THEN WE GENERATE NECEASSARY DATA
     */
    public ArrayList generatePage(int currentPage)
    {
        int startItem=currentPage*ITEMS_PER_PAGE+1;
        const int numOfData = ITEMS_PER_PAGE;

        ArrayList pageData=new ArrayList();

        if (currentPage==LAST_PAGE && ITEMS_REMAINING>0)
        {
            for (int i=startItem;i<startItem+ITEMS_REMAINING;i++)
            {
                pageData.Add("Number "+i);
            }
        }else
        {
            for (int i=startItem;i<startItem+numOfData;i++)
            {
                pageData.Add("Number "+i);
            }
        }

        return pageData;
    }
    }
}

Main.axml Layout

  • Main Layout.
  • We specify Views and widgets xml code here.
  • This layout shall get inflated into our MainActivity interface.
  • We have a GridView,and two buttons : next and previous.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
  android:background="#d3d3d3"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <GridView
            android:id="@+id/gv"
      android:textColor="#f38630"
      android:background="#009968"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numColumns="2" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <Button
                android:text="Previous"
                android:id="@+id/prevBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <Button
                android:text="Next"
                android:id="@+id/nextBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>

Result

  • Here’s what we get when we run the project.

Xamarin GridView Pagination Page One
Xamarin Android GridView Last Past Page

How To Run

  • Download the project above.
  • You’ll get a zipped file,extract it.
  • Open the Visual Studio.
  • Now close, already open project
  • Import the project.

More

YouTube

  • Visit our channel for more examples like these.

Facebook

 

Categorized in:

Xamarin Android