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

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.1'
    // use only view variant
    implementation 'com.github.giangpham96.expandable-text:expandable_textview:2.0.1'
    // use only compose variant
    implementation 'com.github.giangpham96.expandable-text:expandable_text_compose:2.0.1'
}

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

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

Details

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