0
0
Android Kotlinmobile~20 mins

Pagination basics in Android Kotlin - Mini App: Build & Ship

Choose your learning style9 modes available
Build: Simple Pagination List
This screen shows a list of items with pagination. It loads 10 items at a time and has buttons to go to the next or previous page.
Target UI
-------------------------
| Simple Pagination List |
-------------------------
| Item 1                |
| Item 2                |
| Item 3                |
| ...                   |
| Item 10               |
-------------------------
| < Prev       Next >   |
-------------------------
Display a vertical list of 10 items per page
Show current page items labeled 'Item X'
Add 'Prev' and 'Next' buttons at the bottom
'Prev' button disabled on first page
'Next' button disabled on last page (page 5)
Update list when buttons are tapped
Starter Code
Android Kotlin
package com.example.pagination

import android.os.Bundle
import android.widget.Button
import android.widget.ListView
import android.widget.ArrayAdapter
import androidx.appcompat.app.AppCompatActivity

class PaginationActivity : AppCompatActivity() {
    private lateinit var listView: ListView
    private lateinit var prevButton: Button
    private lateinit var nextButton: Button

    private val itemsPerPage = 10
    private val totalPages = 5
    private var currentPage = 1

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_pagination)

        listView = findViewById(R.id.listView)
        prevButton = findViewById(R.id.prevButton)
        nextButton = findViewById(R.id.nextButton)

        // TODO: Initialize list and buttons
    }

    // TODO: Add functions to update list and handle button clicks
}
Task 1
Task 2
Task 3
Task 4
Solution
Android Kotlin
package com.example.pagination

import android.os.Bundle
import android.widget.Button
import android.widget.ListView
import android.widget.ArrayAdapter
import androidx.appcompat.app.AppCompatActivity

class PaginationActivity : AppCompatActivity() {
    private lateinit var listView: ListView
    private lateinit var prevButton: Button
    private lateinit var nextButton: Button

    private val itemsPerPage = 10
    private val totalPages = 5
    private var currentPage = 1

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_pagination)

        listView = findViewById(R.id.listView)
        prevButton = findViewById(R.id.prevButton)
        nextButton = findViewById(R.id.nextButton)

        updateList()

        prevButton.setOnClickListener {
            if (currentPage > 1) {
                currentPage--
                updateList()
            }
        }

        nextButton.setOnClickListener {
            if (currentPage < totalPages) {
                currentPage++
                updateList()
            }
        }
    }

    private fun generateItemsForPage(page: Int): List<String> {
        val start = (page - 1) * itemsPerPage + 1
        val end = start + itemsPerPage - 1
        return (start..end).map { "Item $it" }
    }

    private fun updateList() {
        val items = generateItemsForPage(currentPage)
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, items)
        listView.adapter = adapter

        prevButton.isEnabled = currentPage > 1
        nextButton.isEnabled = currentPage < totalPages
    }
}

This solution creates a simple pagination screen in Android using Kotlin. It shows 10 items per page labeled "Item X".

We keep track of the current page with currentPage. The generateItemsForPage function creates the list of items for that page.

The updateList function updates the ListView with the current page's items and enables or disables the Prev and Next buttons depending on the page.

Click listeners on the buttons change the page number and refresh the list.

This approach is simple and easy to understand for beginners learning pagination basics.

Final Result
Completed Screen
-------------------------
| Simple Pagination List |
-------------------------
| Item 11               |
| Item 12               |
| Item 13               |
| Item 14               |
| Item 15               |
| Item 16               |
| Item 17               |
| Item 18               |
| Item 19               |
| Item 20               |
-------------------------
| < Prev       Next >   |
-------------------------
Tapping 'Next' loads the next 10 items and updates the list
Tapping 'Prev' loads the previous 10 items
'Prev' button is disabled on first page
'Next' button is disabled on last page
Stretch Goal
Add a TextView showing the current page number between the Prev and Next buttons.
💡 Hint
Add a TextView in the layout and update its text in updateList() to show 'Page X of Y'.