Skip to content

Instantly share code, notes, and snippets.

@kord123
Created July 26, 2023 02:30
Show Gist options
  • Save kord123/51da25ed57de8200f1ce6107ca92dd02 to your computer and use it in GitHub Desktop.
Save kord123/51da25ed57de8200f1ce6107ca92dd02 to your computer and use it in GitHub Desktop.
Android Compose expandable text
package <package>
import androidx.compose.foundation.clickable
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme.colorScheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextLayoutResult
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.TextUnit
@Composable
fun ExpandableText(
text: String,
maxLinesCollapsed: Int = 2,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
softWrap: Boolean = true,
maxLinesExpanded: Int = Int.MAX_VALUE,
onTextLayout: (TextLayoutResult) -> Unit = {},
style: TextStyle = LocalTextStyle.current
) {
var showMore by remember { mutableStateOf(false) }
var isEllipsized by remember { mutableStateOf(false) }
val expandCollapseColor = colorScheme.secondary
if (showMore) {
Text(
text = text,
modifier = modifier,
color = color,
fontSize = fontSize,
fontStyle = fontStyle,
fontWeight = fontWeight,
fontFamily = fontFamily,
letterSpacing = letterSpacing,
textDecoration = textDecoration,
textAlign = textAlign,
lineHeight = lineHeight,
overflow = TextOverflow.Visible,
softWrap = softWrap,
maxLines = maxLinesExpanded,
style = style
)
if (isEllipsized) {
Text(
text = "Show less",
modifier = modifier.clickable { showMore = false },
color = expandCollapseColor,
fontSize = fontSize,
fontStyle = fontStyle,
fontWeight = fontWeight,
fontFamily = fontFamily,
letterSpacing = letterSpacing,
textDecoration = textDecoration,
textAlign = textAlign,
lineHeight = lineHeight,
overflow = TextOverflow.Visible,
softWrap = softWrap,
maxLines = maxLinesExpanded,
onTextLayout = onTextLayout,
style = style
)
}
} else {
Text(
text = text,
maxLines = maxLinesCollapsed,
overflow = TextOverflow.Ellipsis,
modifier = modifier,
color = color,
fontSize = fontSize,
fontStyle = fontStyle,
fontWeight = fontWeight,
fontFamily = fontFamily,
letterSpacing = letterSpacing,
textDecoration = textDecoration,
textAlign = textAlign,
lineHeight = lineHeight,
softWrap = softWrap,
onTextLayout = {
isEllipsized =
it.lineCount == maxLinesCollapsed && it.isLineEllipsized(maxLinesCollapsed - 1)
onTextLayout(it)
},
style = style,
)
if (isEllipsized) {
Text(
text = "Show more",
modifier = modifier.clickable { showMore = true },
color = expandCollapseColor,
fontSize = fontSize,
fontStyle = fontStyle,
fontWeight = fontWeight,
fontFamily = fontFamily,
letterSpacing = letterSpacing,
textDecoration = textDecoration,
textAlign = textAlign,
lineHeight = lineHeight,
overflow = TextOverflow.Visible,
softWrap = softWrap,
maxLines = maxLinesExpanded,
onTextLayout = onTextLayout,
style = style
)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment