Jetpack Compose text background with indent - text

Question

I'm new to jetpack compose and i wanat to know if this is possible to achive with jetpack compose. Giving a background to text is very easy with compose but if you want to give indent to background according to text position i don't know where to start an achive this effect.
Text background with indent

Answer 1

I did that:
#Composable
fun IBgText(
text: String,
modifier: Modifier = Modifier,
iBgStrokeWidth: Float? = null,
iBgStrokeColor: Color = Color.DarkGray,
iBgVerticalPadding: Dp = 0.dp,
iBgHorizontalPadding: Dp = 0.dp,
iBgCornerRadius: Dp = 0.dp,
iBgColor: Color = Color.Gray,
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,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
style: TextStyle = LocalTextStyle.current
) {
val vSpace = with(LocalDensity.current) { iBgVerticalPadding.toPx() }
val hSpace = with(LocalDensity.current) { iBgHorizontalPadding.toPx() }
val corner = with(LocalDensity.current) { iBgCornerRadius.toPx() }
var path by remember { mutableStateOf(Path()) }
fun computePath(layoutResult: TextLayoutResult): Path {
fun isInnerCorner(
lr: TextLayoutResult,
i: Int,
top: Boolean = false,
right: Boolean
): Boolean {
if (top && i == 0) return false
if (!top && i == lr.lineCount - 1) return false
if (top && right) return lr.getLineRight(i - 1) > lr.getLineRight(i)
if (!top && right) return lr.getLineRight(i + 1) > lr.getLineRight(i)
if (top && !right) return lr.getLineLeft(i - 1) < lr.getLineLeft(i)
return lr.getLineLeft(i + 1) < lr.getLineLeft(i)
}
val nbLines = layoutResult.lineCount
for (i in 0 until nbLines) {
var top = layoutResult.getLineTop(i)
var bottom = layoutResult.getLineBottom(i)
val right = layoutResult.getLineRight(i) + hSpace
val topInner = isInnerCorner(layoutResult, i, top = true, right = true)
val bottomInner = isInnerCorner(layoutResult, i, top = false, right = true)
if (topInner) top += vSpace else top -= vSpace
if (bottomInner) bottom -= vSpace else bottom += vSpace
path.apply {
if (i == 0) {
moveTo(right - corner, top)
} else {
if (topInner) {
lineTo(right + corner, top)
} else {
lineTo(right - corner, top)
}
}
quadraticBezierTo(right, top, right, top + corner)
lineTo(right, bottom - corner)
if (bottomInner) {
quadraticBezierTo(right, bottom, right + corner, bottom)
} else {
quadraticBezierTo(right, bottom, right - corner, bottom)
}
}
}
for (i in (nbLines - 1) downTo 0) {
var top = layoutResult.getLineTop(i)
var bottom = layoutResult.getLineBottom(i)
val left = layoutResult.getLineLeft(i) - hSpace
val topInner = isInnerCorner(layoutResult, i, top = true, right = false)
val bottomInner = isInnerCorner(layoutResult, i, top = false, right = false)
if (topInner) top += vSpace else top -= vSpace
if (bottomInner) bottom -= vSpace else bottom += vSpace
path.apply {
if (bottomInner) {
lineTo(left - corner, bottom)
} else {
lineTo(left + corner, bottom)
}
quadraticBezierTo(left, bottom, left, bottom - corner)
lineTo(left, top + corner)
if (topInner) {
quadraticBezierTo(left, top, left - corner, top)
} else {
quadraticBezierTo(left, top, left + corner, top)
}
}
}
path.close()
return path
}
Text(
text,
onTextLayout = { layoutResult ->
path = computePath(layoutResult = layoutResult)
},
modifier = modifier.drawBehind {
drawPath(path, style = Fill, color = iBgColor)
if (iBgStrokeWidth != null) {
drawPath(path, style = Stroke(width = iBgStrokeWidth), color = iBgStrokeColor)
}
},
color = color,
fontSize = fontSize,
fontStyle = fontStyle,
fontWeight = fontWeight,
fontFamily = fontFamily,
letterSpacing = letterSpacing,
textDecoration = textDecoration,
textAlign = textAlign,
lineHeight = lineHeight,
overflow = overflow,
softWrap = softWrap,
maxLines = maxLines,
style = style
)
}
Usage:
#Preview
#Composable
fun Preview() {
Column (modifier = Modifier.fillMaxSize().background(Color.Black)){
IBgText(
text = "test\ntest test\ntest\ntest test",
textAlign = TextAlign.Center,
modifier = Modifier.padding(top = 6.dp, start = 10.dp, end = 10.dp, bottom = 6.dp),
iBgColor = Color.Blue.copy(alpha = .4f),
iBgStrokeWidth = 3f,
iBgCornerRadius = 2.dp,
iBgHorizontalPadding = 5.dp,
iBgStrokeColor = Color.Red,
iBgVerticalPadding = 1.dp,
color = Color.White
)
IBgText(
text = "This is a sample\ntext",
textAlign = TextAlign.Center,
modifier = Modifier.padding(20.dp, bottom = 6.dp).rotate(-15f),
iBgColor = Color(0xFFFFFFFF),
iBgCornerRadius = 2.dp,
iBgHorizontalPadding = 8.dp,
iBgVerticalPadding = 5.dp
)
IBgText(
text = "line 1\n-- line 2 --",
textAlign = TextAlign.End,
modifier = Modifier.padding(10.dp)
)
}
}
Result:
It is not pretty, but i guess it does the job.
onTextLayout = { layoutResult -> gives the boundaries of each line.
left, top, bottom, right
Then you can make a path going through each line.
I did a loop from the top right corner (1st line end) to the bottom right corner (last line end)
Then another loop from the bottom left (last line start) to the top left (first line start).
Then I added some rounded corners to match the picture.
Ps: I started Kotlin and Jetpack compose this week and spend all my Sunday on your question 😅