Skip to content

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

License

Notifications You must be signed in to change notification settings

giangpham96/expandable-text

Repository files navigation

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.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

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