Expandable Text in Android using Jetpack Compose
Last Updated :
06 Mar, 2025
Many applications display tons of textual data in the form of passages and have the feature of expanding or contracting it. Generally, 2-3 out of n lines of a passage are displayed along with "View More", "Read More", and "..." at the end. These appear like hyperlinks that upon click expand the text to full. In this article, we will show you how you could create an expandable text in Android using Jetpack Compose. Follow the below steps once the IDE is ready.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.
Note: Select Kotlin as the programming language.
Step 2: Create Long text in strings.xml
Navigate app > res > values > strings.xml and the following string or any other long string of your choice in the strings.xml file.
<resources>
...
<string name="long_text">A computer science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.</string>
</resources>
Step 2: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
MainActivity.kt:
Kotlin
package com.geeksforgeeks.demo
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.*
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.*
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.geeksforgeeks.demo.ui.theme.*
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
DemoTheme(dynamicColor = false, darkTheme = false) {
Surface(color = Color.White) {
ExpandableText()
}
}
}
}
}
@Composable
fun ExpandableText(modifier: Modifier = Modifier) {
Column(Modifier.fillMaxSize(), horizontalAlignment =
Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
// Creating a boolean value for storing expanded state
var showMore by remember { mutableStateOf(false) }
// Access long text from strings.xml
val text = stringResource(R.string.long_text)
Column(modifier = Modifier.padding(20.dp)) {
// Creating a clickable modifier that consists text
Column(modifier = Modifier
.animateContentSize(animationSpec = tween(100))
.clickable(
interactionSource = remember { MutableInteractionSource() },
indication = null
) { showMore = !showMore }) {
// if showMore is true, the Text will expand
// Else Text will be restricted to 3 Lines of display
if (showMore) {
Text(text = text)
} else {
Text(text = text, maxLines = 3, overflow = TextOverflow.Ellipsis)
}
}
}
}
}
Output:
Similar Reads
Text in Android using Jetpack Compose Jetpack Compose is a new toolkit provided by Google. This is useful for designing beautiful UI designs. Android Text is a simple view in Android which is used to display text inside our App. In this article, we will take a look at the implementation of Text in Android using Jetpack Compose. Importan
5 min read
Curved Text in Android using Jetpack Compose In Android, there are no inbuilt schemes to implement designed text like the word art, which is available in applications like MS Word. We can always refer to or download such schemes like designed font faces to implement designed text. However, it is also possible to natively build (building from s
3 min read
Date Picker in Android using Jetpack Compose In Android, a Date Picker is a widget used to select a date from the calendar. When a Date Picker is implemented in an application, the user can select a year, a month, and a day, combining to form date from a calendar-like-looking box. This data is generally needed and collected in applications tha
2 min read
Text Clock in Android using Jetpack Compose Text Clock is a UI widget in android which is used to display the current time in android applications. This widget displays the current time in a simple text view. The text clock widget displays a time in 12 and 24 hours format. In this article, we will take a look at How to use the TextClock widge
2 min read
Implement Markdown Text in Android using Jetpack Compose Markdown is a third-party git library that can be used to identify particular types of regex (Regular Expressions) that specifies a search pattern in the text. For example, if you write a passage and mention a website and a telephone number in it, Markdown Text would detect these patterns and create
3 min read