How to set a label position to border in Kivy?

Question

Hi i have problems with positioning of my labels in Kivy. I think pictures can describe my problem best.

How it looks like now...

How I want it looks like...

I want to bind the Label 3 to the right border. I have no Idea how to do this. My Code:

import kivy

from kivy.app import App
from kivy.uix.label import Label

from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder

root = Builder.load_string('''
Screen:
    BoxLayout:
        orientation:'vertical'
        Label:
            text: '1'
            font_size: self.height
            size_hint: (1.0, 0.17)
        Label:
            text: '2'
            font_size: self.height
            size_hint: (1.0, 0.83)
    Label:
        text: '3'
''')

class MyApp(App):
    def build(self):
        root.size_hint = (1.0, 1.0)
        return root

if __name__ == '__main__':
    MyApp().run()

score 4 · Accepted Answer · answered Apr 19 '18 at 14:45

For this type of cases there is AnchorLayout, which serves to align the widgets to a relative position.

import kivy

from kivy.app import App
from kivy.uix.label import Label

from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder

root = Builder.load_string('''
Screen:
    BoxLayout:
        orientation:'vertical'
        Label:
            text: '1'
            font_size: self.height
            size_hint: (1.0, 0.17)
        Label:
            text: '2'
            font_size: self.height
            size_hint: (1.0, 0.83)

    AnchorLayout:
        anchor_x: 'right'
        anchor_y: 'bottom'
        Label:
            text: '3'
            font_size: self.height
            size_hint: None, None
''')

class MyApp(App):
    def build(self):
        root.size_hint = (1.0, 1.0)
        return root

if __name__ == '__main__':
    MyApp().run()

ikolim · Answer 2 · 2018-04-19T21:44:39.183

You might want to use a FloatLayout. The following example use a FloatLayout without reducing the size of the labels ("2" - size_hint: 1, 0.83) and ("1" - size_hint: 1, 0.17).

Example

main.py

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

root = Builder.load_string('''
#:kivy 1.10.0

Screen:
    FloatLayout:
        Label:
            text: '1'
            font_size: self.height
            size_hint: (1, 0.17)
            pos_hint: {'x': 0, 'y': 0.8}

        Label:
            text: '2'
            font_size: self.height
            size_hint: (1.0, 0.83)

        Label:
            text: '3'
            font_size: self.height
            size_hint: (1, 0.17)
            pos_hint: {'x': 0.3, 'y': 0.1}
''')


class MyApp(App):

    def build(self):
        root.size_hint = (1.0, 1.0)
        return root


if __name__ == '__main__':
    MyApp().run()

Output

score 0 · Answer 3 · answered Apr 19 '18 at 14:43

The kivy way of creating an application is putting widgets in widgets. You should try as follows, and i'm sure you'll be able to get what you want with this.

root = Builder.load_string('''
Screen:
    BoxLayout:
        orientation:'vertical'
        Label:
            text: '1'
            font_size: self.height
            size_hint: (1.0, 0.17)
        BoxLayout:
            Orientation: 'horizontal'
            size_hint: (1.0, 0.83)
            Label:
                text: '2'
                font_size: self.height
                size_hint: (0.8, 1)
            Label:
                text: '3'
                size_hint: (0.2, 1)
''')

Like this your '3' will still be about in the middle of the screen. I think you could change that with halign, which should be somewhere in the kivy docs. You could also fix that by adding another BoxLayout, this time being vertical again.

Thank you for your answer, with your solution the '2' label isn't centered anymore. I think that I need a way to set the position of '3' unattached of the other labels. Is there a way to set label 3 to absolute position of bottom right corner? — Em Bryo, Apr 19 '18 at 14:53
You could do that as Eyllanesc described! An anchorlayout would be the way to go. — Superleggera, Apr 19 '18 at 14:58

How to set a label position to border in Kivy?

3 Answers3

Example

main.py

Output