kivy TextInput change font color add background lines

Question

I am developping a simple Notes App. This is how my screen for adding a Note looks right now.

I would like to achieve two things:

1. Change the font color of my TextInput to white.

2. Add lines to my TextInput as seen in the picture

The lines should always be visible even if the TextInput is empty.

Extract from my python script:

class NewNoteView(ModalView):
    pass

Extract from my kv file

<NewNoteView>:
    BoxLayout:
        orientation: 'vertical'

        BoxLayout:
            size_hint_y: 0.2
            canvas.before:
                Color:
                    rgb: 33/255, 41/255, 55/255
                Rectangle:
                    pos: self.pos
                    size: self.size
            orientation: 'vertical'
            BoxLayout:
                Button:
                    size_hint_x:0.1
                    text: 'x'
                    font_size: self.height*0.5
                    background_color: 0, 0, 0, 0
                    on_press: root.dismiss()
                Label:
                    text: 'New Label'

                Button:
                    size_hint_x:0.1
                    text:'+'
                    font_size: self.height*0.5
                    background_color: 0, 0, 0, 0
                    on_press: app.root.notifyP()

                Button:
                    size_hint_x:0.1
                    text: 'L'
                    font_size: self.height*0.5
                    background_color: 0, 0, 0, 0

            BoxLayout:
                TextInput:
                    font_size: self.height*0.5
                    background_color: 0, 0, 0, 0
                    cursor_color: 1, 1, 1, 1

                    hint_text: 'Heading'
                    multiline: False
                    padding_x: [30,30]

                Button:
                    size_hint_x: 0.2
        BoxLayout:
            canvas.before:
                Color:
                    rgba: [38/255, 49/255, 70/255,1]
                Rectangle:
                    pos: self.pos
                    size: self.size
            TextInput:
                background_color: 0, 0, 0, 0
                cursor_color: 1, 1, 1, 1
                color: 1, 1, 1, 1
                hint_text: 'Body'
                padding_x: [30,30]

Asked By: PalimPalim

||

Source

Answer 1

Your question is very clearly structured (thanks!) but you didn’t really do your research properly, did you? At least regarding the first question.

The answer is simple: use foreground_color attribute and set it to 1, 1, 1, 1; from the docs:

(fore_ground color is the) current color of the foreground, in (r, g,
b, a) format. Defaults to black.

Now this one is a bit more interesting and complicated. The straight-forward solution is to use the Line in your canvas. Something like this will add a white line to the bottom of the widget in the .kv file:

canvas.before: Color: rgba: 1, 1, 1, 1 Line: points: self.x + 20, self.y, self.x + self.width - 20, self.y width: 1

And it looks like this when I changed your app to use two TextInputs:

But, as I understand, you only want to have one TextInput in a note. So you have to figure out the line heights and draw a line every x pixels. Here’s what I found. You need to either use minimum_height or line_height plus the line_spacing. Also, I don’t think you can do this in .kv, I think you’ll need to write a method for it in Python.

I would recommend using my method with extra TextInputs. You can bind “enter” to create a new TextInput every time so you can have infinite lines. I believe this will be easier, but you can do it either way.

Answered By: Edvardas Dlugauskas

Answer 2

use this syntax in .kv file.
foreground_color:1,1,1,1

Answered By: divyanhsu singh

kivy TextInput change font color add background lines

Question:

Answers: