How to create pagination text in Android using Kotlin?

Last updated Aug 26, 2020


If we have large text display in side screen with pages in Android, how could we show Text as pages.

Android doesn't have any widget to show text as pages. We need to create a customized textview to display text as pages.

This Customized Textview we will pass the text on   ViewTreeObserver method of textview.

 

What is ViewTreeObserver class?

A view tree observer is used to register listeners that can be notified of global changes in the view tree

 

Below Example will show Display Large text as Pagination.

Let's get started

Step 1:  Create Android project

Step 2: Add below custom class Pagination.kt

package com.rrtutors.textpagination

import android.text.Layout
import android.text.StaticLayout
import android.text.TextPaint
import android.util.Log

class Pagination(text:CharSequence, pageW:Int, pageH:Int, paint: TextPaint, spacingMult:Float, spacingAdd:Float, inclidePad:Boolean) {
    private var mIncludePad:Boolean = false
    private var mWidth:Int = 0
    private var mHeight:Int = 0
    private var mSpacingMult:Float = 0.toFloat()
    private var mSpacingAdd:Float = 0.toFloat()
    private val mText:CharSequence
    private val mPaint:TextPaint
    private var mPages:MutableList
    init{
        this.mText = text
        this.mWidth = pageW
        this.mHeight = pageH
        this.mPaint = paint
        this.mSpacingMult = spacingMult
        this.mSpacingAdd = spacingAdd
        this.mIncludePad = inclidePad
        this.mPages = mutableListOf()
        layout()
    }
    private fun layout() {
        val layout = StaticLayout(mText, mPaint, mWidth, Layout.Alignment.ALIGN_NORMAL, mSpacingMult, mSpacingAdd, mIncludePad)
        val lines = layout.getLineCount()
        val text = layout.getText()
        var startOffset = 0
        var height = mHeight
        for (i in 0 until lines)
        {
            if (height < layout.getLineBottom(i))
            {
                // When the layout height has been exceeded
                addPage(text.subSequence(startOffset, layout.getLineStart(i)))
                startOffset = layout.getLineStart(i)
                height = layout.getLineTop(i) + mHeight
            }
            if (i == lines - 1)
            {
                // Put the rest of the text into the last page
                addPage(text.subSequence(startOffset, layout.getLineEnd(i)))
                return
            }
        }
    }
    private fun addPage(text:CharSequence) {

        mPages.add(text)
    }
    fun size():Int {
        return mPages.size
    }
    fun get(index:Int):CharSequence {
        return if ((index >= 0 && index < mPages.size)) mPages.get(index) else ""
    }
}

 

Step 3: Update xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:orientation="vertical"
    android:paddingRight="16dp"
    android:paddingBottom="16dp">

    <TextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:textColor="#D80F0F"
        android:textSize="20sp"
        android:lineSpacingExtra="15dp"
        android:layout_gravity="right"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:padding="10dp"
        android:background="@drawable/rectangle"
        >
        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:textColor="#000"
            android:textSize="20sp"
            android:lineSpacingExtra="15dp"
            android:layout_height="match_parent" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/rectangle"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/buttonBack"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:text="Prev"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:rotation="-90"
            android:tint="@color/colorPrimary"
            android:src="@android:drawable/arrow_up_float"
           />
        <ImageView
            android:id="@+id/buttonForward"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:rotation="90"
            android:tint="@color/colorPrimary"
            android:src="@android:drawable/arrow_up_float"
            />
    </LinearLayout>

</LinearLayout>

 

 

Step 4: Update MainActivity.kt with below code

package com.rrtutors.textpagination

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.text.Html
import android.text.SpannableString
import android.view.ViewTreeObserver
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    private var pagination: Pagination? = null
    private lateinit var charSequence: CharSequence
    private var currentIndex = 0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        val htmlString = Html.fromHtml(getString(R.string.html_string))
        charSequence= SpannableString(getString(R.string.long_string))


        textView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                //Log.v("text","text called 11 ")
                // Removing layout listener to avoid multiple calls
                textView.viewTreeObserver.removeOnGlobalLayoutListener(this)
                pagination = Pagination(
                        charSequence, textView.width,
                        textView.height,
                        textView.paint,
                        textView.lineSpacingMultiplier,
                        textView.lineSpacingExtra,
                        textView.includeFontPadding
                )
                update()
            }
        })
        buttonBack.setOnClickListener {
            currentIndex = if ((currentIndex > 0)) currentIndex - 1 else 0
            update()
        }
        buttonForward.setOnClickListener {
            currentIndex = if ((currentIndex 
			

 

Step 5: Run Application

 

Text Pagination Android

 

Tags:  TextView Pagination, Android, TreeViewObserver, onLayoutChange


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

623 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions