-1

I am trying to build a note taking app using Jetpack Compose. I want a custom TextField which contains parallel horizontal lines just like a real notepad.
How can I achieve this?

(I know basics of compose Canvas but an not able to figure out how to begin)

This is what I am trying to make: Lined Edit Text

Arpit Shukla
  • 9,612
  • 1
  • 14
  • 40

1 Answers1

0

Ok since your question explicitly states that you wish to know the method to help you draw parallel horizontal lines, this implementation might be helpful:-

@Preview
@Composable
fun LeafPad() {
    val textSize = 25.sp

    Box(
        Modifier
            .fillMaxSize()
            .background(Color(0xFFFEFCB5))) {
        Canvas(modifier = Modifier.fillMaxSize()) {
            var yCord = 0f
            repeat(40) {
                drawLine(
                    Color(0xFFB2B461),
                    Offset(0f, yCord),
                    Offset(size.width, yCord),
                    strokeWidth = 2f
                )
                yCord += 1.8f * textSize.toPx()
            }
        }

        var value by remember { mutableStateOf("") }
        TextField(
            modifier = Modifier.fillMaxSize(),
            value = value,
            onValueChange = { value = it },
            textStyle = TextStyle(fontSize = textSize, color = Color.Black, lineHeight = (1.8f * textSize.value).sp)
        )
    }
}

Honestly, looking at your use case, you might want to consider using Pagination instead which features stuff like infinite scrolling, because I assume that for a Text Editor, you would want to scroll down when the user reaches the end of the page, but of course it solely depends on your design and implementation.

Richard Onslow Roper
  • 5,477
  • 2
  • 11
  • 42
  • 1
    The same can be done with `Modifier.drawWithCache`, but it is also not a complete solution - the lines are static when scrolling. – vitidev Oct 11 '21 at 12:39
  • Yes, I had thought of this solution but as @vitidev mentioned that the lines are static and don't move when textfield is scrolled which results in text cutting these lines. – Arpit Shukla Oct 11 '21 at 13:15
  • What you are asking is apparently a entire codebase, because if built by basic blocks, the Composable would be HUGE!! So, usually on Stack Overflow, when we ask questions like that, we usually ask for a particular Component of the solution, which is what I thought you were asking. That is why I did refer to pagination because I knew that this would not probably help you implement what you wish, but that's what you asked for (refer to the statement in your question). I mean if you ask for a way to build an Annotation Processor so that you can build a painting app, we would give you the processr – Richard Onslow Roper Oct 11 '21 at 15:24
  • What I mean, it is none of our business to see what you do with the implementation we provide you. If you asked for a way of creating horizontal lines, nobody is going to share a scrolling editor paginator. A good start would have been if you had asked for a way to implement your screen shot instead. Then you should have posted new questions for wherever you stumbled upon afterwards. You must be careful with your words, since you cannot read the mind of the person when you are interacting online. – Richard Onslow Roper Oct 11 '21 at 15:26