expandable-text

Light-weighted, convenient implementation of expandable text view that supports expanding & collapsing animations for Android projects.

Why expandable-text?

When the text is too long, a designer reasonably asks if it is possible to truncate the text by having a certain line count limitation. In addition, an expanding call-to-action (ie. "Read more") should be shown at the end of the text. When user taps the text, it expands to show the full content. ExpandableTextView helps creating such behaviour easily.

Demonstration

Normal	RTL	With drawable
normal.mp4	rtl.mp4	drawable.mp4

maxLines when expand	Width changes at runtime
maxLines.mp4	width.mp4

Install

Step 1. Add the JitPack repository to your build file

repositories {
    ...
    maven { url = uri("https://jitpack.io") }
}

Step 2. Add the dependency

// build.gradle (module level)
dependencies {
    // use both view and compose variants
    implementation 'com.github.giangpham96:expandable-text:2.0.0'
    // use only view variant
    implementation 'com.github.giangpham96.expandable-text:expandable_textview:2.0.0'
    // use only compose variant
    implementation 'com.github.giangpham96.expandable-text:expandable_text_compose:2.0.0'
}

Usage

XML

<io.github.giangpham96.expandable_textview.ExpandableTextView 
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:background="@color/purple_100"
    android:padding="16dp"
    android:maxLines="10" 
    app:expandAction="More" 
    app:limitedMaxLines="2"
    app:expandActionColor="@color/blue_500" 
    app:originalText="@string/long_text" />

Attributes

Attributes	Type	Description	Default value
app:limitedMaxLines	Int	The maximum line counts when the text is collapsed	3
app:expandAction	String	The action at the end of truncated text such as "View more"	"" (Nothing will be shown at the end of truncated text)
app:expandActionColor	Color	The color of expand action	#ffaa66cc
app:originalText	String	The text to be displayed on this text view	""

Public functions

• limitedMaxLines public getter & setter for the maximum line counts when the text is collapsed.
• expandAction public getter & setter for the action at the end of truncated text such as "View more".
• expandActionColor public getter & setter for the color of expand action.
• originalText public getter & setter for the text to be displayed on this text view.
• collapsed public getter to determine if the text is being collapsed
• expanded public getter to determine if the text is being expanded
• toggle function that makes the text changes its state from collapsed to expanded & vice versa. It also adds animation transition during the state change.

Notes

• DO NOT directly use android:text or setText in this view. Use app:originalText or originalText instead. Attempting to use android:text or setText will lead to unexpected behaviour.
• At any time, limitedMaxLines MUST always be less than or equal to maxLines. Otherwise, an exception will be thrown.
• This view only supports TextUtils.TruncateAt.END.

Compose

var expand by remember { mutableStateOf(false) }

ExpandableText(
    originalText = "a very long text that will be truncated at some points",
    expandAction = "See more",
    expand = expand,
    expandActionColor = Color.Blue,
    limitedMaxLines = 2,
    animationSpec = spring(),
    modifier = Modifier
        .clickable { expand = !expand },
)

Recomposition and skip count

Demonstration
Screen.Recording.2023-01-04.at.9.48.44.mov

Details

The approach for the library is discussed here in one of my blogpost