Text in Border using Jetpack Compose

Question

I want to add text in the border as following. The border enclosing text has a icon in it

Can someone please suggest how to approach this?

Answer 1

You can use OutlinedText with a label

OutlinedTextField(
    value = textFieldValue,
    label = { Text("AAA") },
    onValueChange = { newValue ->
        textFieldValue= newValue
    }
)

Answer 2

You can use an OutlinedTextField with the label parameter where you can add an Icon instead of a Text:

OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    modifier = Modifier.width(100.dp),
    shape =  RoundedCornerShape(0.dp),
    label = {
        Icon(Icons.Filled.Add,"",tint = Color.Blue,
        modifier = Modifier.size(14.dp))
    }
)

You can also use an OutlinedTextField using as label a Text composable with the inlineContent parameter.
In this way you can define a map of tags that replaces certain ranges of the text with an Icon (or another Composable).

Something like:

val myId = "inlineContent"
val textLabel = buildAnnotatedString {
    // Append a placeholder string "[icon]" and attach an annotation "inlineContent" on it.
    appendInlineContent(myId, "[icon]")
}

val inlineContent = mapOf(
    Pair(
        // This tells the [CoreText] to replace the placeholder string "[icon]" by
        // the composable given in the [InlineTextContent] object.
        myId,
        InlineTextContent(
            // Placeholder tells text layout the expected size and vertical alignment of
            // children composable.
            Placeholder(
                width = 12.sp,
                height = 12.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
            )
        ) {
            // This Icon will fill maximum size, which is specified by the [Placeholder]
            // above. Notice the width and height in [Placeholder] are specified in TextUnit,
            // and are converted into pixel by text layout.

            Icon(Icons.Filled.Face,"",tint = Color.Red)
        }
    )
)


OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    modifier = Modifier.width(100.dp),
    shape =  RoundedCornerShape(0.dp),
    label = {
        Text(text = textLabel, inlineContent = inlineContent)
    }
)

Answer 3

Solved it.

This is a rough working code

                Column(modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth()
                        .drawWithContent {
                            drawContent()
                            clipRect { // Not needed if you do not care about painting half stroke outside
                                val strokeWidth = Stroke.DefaultMiter
                                val y = size.height // - strokeWidth
                                // if the whole line should be inside component

                                Log.i(Tag.Temp, "ClipRect ${size.width} ${size.height}")

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset(x = 0f, y = 12*density),
                                    end = Offset(x = 8*density, y = 12*density)
                                )

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset(x = 48*density, y = 12*density),
                                    end = Offset(x = size.width, y = 12*density)
                                )

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset.Zero.copy(y = 12*density),
                                    end = Offset.Zero.copy(y = size.height)
                                )

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset.Zero.copy(y = y),
                                    end = Offset(x = size.width, y = y)
                                )

                                drawLine(
                                    brush = SolidColor(Color.Red),
                                    strokeWidth = strokeWidth,
                                    cap = StrokeCap.Square,
                                    start = Offset(x = size.width, y = 12*density),
                                    end = Offset(x = size.width, y = size.height)
                                )


                            }
                        }
                    ) {

                        Row(modifier = Modifier.padding(start = 16.dp)) {
                            Icon(painter = painterResource(id = com.ap.cells.R.drawable.ic_quote),
                                contentDescription = null,
                                modifier = Modifier.size(24.dp),
                                tint = Color.Unspecified
                            )
                        }

                        Text(text= "This is a test quote", modifier = Modifier.padding(16.dp), fontSize = 48.sp)

                    }