Home > Software design >  Text in Border using Jetpack Compose
Text in Border using Jetpack Compose

Time:11-19

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?

CodePudding user response:

You can use OutlinedText with a label

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

CodePudding user response:

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)

                    }
  • Related