Material Design pagination guidelines in Android

Question

I have a RecycleView with over 200 rows of data and I want to implement a pagination mechanism.

What is the correct way to implement this using the Material Design best practices? It seems that Google forgot about this important factor.

Can you guide me with some examples of code or design ?

Answer 1

You can take some pagination material design guidelines from Google's " Data Tables ":

Here is the corrsponding xml pagination layout:

<?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"
  xmlns:tools = "http://schemas.android.com/tools"
  android:layout_width = "match_parent"
  android:layout_height = "56dp"
  android:background = "@color/white"
  android:gravity = "center_vertical|end"
  android:orientation = "vertical">

  <LinearLayout
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:layout_marginBottom = "1dp"
    android:gravity = "center_vertical|end"
    android:orientation = "horizontal">

    <TextView
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:layout_marginEnd = "40dp"
      android:text = "@string/rows_per_page"
      android:textColor = "@color/discreet_dark"
      android:textSize = "12sp"/>

    <TextView
      android:id = "@+id/paginationSize"
      android:layout_width = "24dp"
      android:layout_height = "wrap_content"
      android:text = "50"
      android:textAlignment = "textEnd"
      android:textColor = "@color/discreet_dark"
      android:textSize = "12sp"/>

    <ImageView
      android:id = "@+id/paginationDropdown"
      android:layout_width = "24dp"
      android:layout_height = "24dp"
      android:layout_marginEnd = "32dp"
      android:contentDescription = "@string/dropdown"
      app:srcCompat = "@drawable/dropdown_discreet_dark"
      tools:src = "@drawable/dropdown_discreet_dark"/>

    <TextView
      android:id = "@+id/paginationDisplayed"
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:layout_marginEnd = "32dp"
      android:text = "1-50 из 100"
      android:textAlignment = "textEnd"
      android:textColor = "@color/discreet_dark"
      android:textSize = "12sp"/>

    <ImageView
      android:id = "@+id/paginationPrevious"
      android:layout_width = "24dp"
      android:layout_height = "24dp"
      android:layout_marginEnd = "24dp"
      android:contentDescription = "@string/pagination_previous"
      app:srcCompat = "@drawable/pagination_previous_discreet_dark"
      tools:src = "@drawable/pagination_previous_discreet_dark"/>

    <ImageView
      android:id = "@+id/paginationNext"
      android:layout_width = "24dp"
      android:layout_height = "24dp"
      android:layout_marginEnd = "14dp"
      android:contentDescription = "@string/pagination_next"
      app:srcCompat = "@drawable/pagination_next_discreet_dark"
      tools:src = "@drawable/pagination_next_discreet_dark"/>

  </LinearLayout>

  <View
    android:layout_width = "match_parent"
    android:layout_height = "1dp"
    android:layout_gravity = "bottom"
    android:layout_marginBottom="1dp"
    android:background = "@color/discreet_dark"/>

</LinearLayout>