CODEWITHSUNDEEP
kivy
user14041421
user14041421

Reputation:

How can I make border to the text in the label?

I'm still learning kivy language . please can you tell me how to add a border to a text in a label in the kv file and thanks

Upvotes: 1

Views: 4072

Answers (3)

Nerdy Ayubi
Nerdy Ayubi

Reputation: 96

    GridLayout:
      cols: 1
      size: root.width, root.height
      padding: "30sp"
      spacing: "12sp"

      Label:
        canvas:
          Line:
            # value (30) here is equal to padding of parent(padding: "30sp")
            # rectangle: (x, y, width, height), change x, and width together to change size of rectangle
            rectangle: (30, root.height - self.height - 30, self.width, self.height)

I figured it out this way. It will create a rectangle at Label position.

Upvotes: 0

John Anderson
John Anderson

Reputation: 38937

In the kivy language documentation, you can redefine a widget's style by adding a - to the beginning of the kv rule. So, in the kv you can define a new widget like this:

<-LabelWithBorder@Label>:
    border_width: 0
    border_color: [1,1,1,1]
    # draw the border
    canvas.before:
        Color:
            rgba: root.border_color if root.border_width > 0 else [0,0,0,1]
        Rectangle:
            size: self.size
            pos: self.pos
        Color:
            rgba: 0, 0, 0, 1
        Rectangle:
            size: self.width - 2*root.border_width, self.height - 2*root.border_width
            pos: int(self.center_x - (self.width - 2*root.border_width)/2.), int(self.center_y - (self.height - 2*root.border_width)/2.)
    # modified from Label
    canvas:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            texture: self.texture
            size: self.texture_size[0] - 2*root.border_width, self.texture_size[1] - 2*root.border_width
            pos: int(self.center_x - self.width/2.) + root.border_width, int(self.center_y - self.height/2.) + root.border_width

The canvas.before is the section that draws the border, and the canvas section is the normal Label style with slight modifications to account for the border.

This can be used, for example, like this:

FloatLayout:
    LabelWithBorder:
        text: 'Hello, World'
        font_size: 50
        border_width: 10
        border_color: [1,0,0,1]
        size_hint: None, None
        size: self.texture_size
        pos_hint: {'center_x':0.5, 'center_y':0.5}

Upvotes: 1

voryzen
voryzen

Reputation: 1

I believe you are looking for 'outline'

This is the docs link for it Label Outline - Kivy Docs

Here's some example code (color defaults to black .. 0, 0, 0, 1):

Label:
        id: label_StackOverflowSample
        pos_hint: {"x": 0.25, "y": 0.18}
        size_hint: 0.6, 0.365
        font_size: 18
        text_size: self.size
        halign: 'left'
        italic: True
        outline_width: 10
        outline_colour: (0, 0, 0, 1)
        text:
            '''
            long long long 
            long long long
            long long long 
            long long long
            long long long
            textt
            '''

And this is a picture showing its example: sorry, not enough reputation to post pictures yet

Hope this helps

Upvotes: 0

Related Questions