CODEWITHSUNDEEP
pythonpython-3.xkivykivy-language
NoItem
NoItem

Reputation: 45

Kivy How to make a border around a TextInput

How would I make a simple box around a text input. I would like it to look something like this:

enter image description here

However I am struggling to do so, especially as the systems for creating rectangles the position it taken from the bottom left point while for TextInputs it is taken from the centre (I think). There seems to be something in kivy called BorderImage however I have not been able to find any sort of explanation on how to use it... Is there a simple way to do this or will I have to manually work out by trial and error by placing a rectangle behind the text input so that they align well? Here is an example code of what I am currently trying using FloatLayout...

Canvas:
    Color:
        rgba: 0.7,0.8,0.5,1
    Rectangle:
        pos: root.width*0.5, root.height*0.5
        size: root.width*0.8, root.height*0.02
TextInput:
    pos_hint: {'x':0.5, 'top': 0.5}
    size_hint: 0.75, 0.015

Here I am trying to use the same position of the TextInput for the rectangle (which will be the border) and I am using a size just 0.05 of the screen larger, so that the border will be seen. However they do not at all line up...

So, in summary is there an easier way to make a border around a TextInput (or Label etc.) or an easier way to align the rectangle and the widget using Float Layout.

Thank you very much for helping!

Upvotes: 0

Views: 2270

Answers (1)

Ne1zvestnyj
Ne1zvestnyj

Reputation: 1397

You can use my example below. Or this good example. Also there are many different text fields in the KivyMD library, you can use them.

from kivy.app import App
from kivy.lang import Builder

KV = ('''
BoxLayout:
    id: box
    padding: 50
    TextInput:
        id: ti
        line_width: 2
        canvas.after:
            Color:
                rgba: 0, 1, 0, 1
            Line:
                width: self.line_width
                rectangle: self.line_width + box.padding[0] - 2.5, self.line_width + box.padding[0] - 2.5, \
                ti.width-4 + 5, ti.height-4 + 5
''')


class MyApp(App):
    def build(self):
        return Builder.load_string(KV)


MyApp().run()

Upvotes: 0

Related Questions