Centering box layout in Kivy

Question

Need help centering a box layout in Kivy.

Here's the code:

import kivy
kivy.require('2.0.0')
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image
from kivy.uix.textinput import TextInput
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.button import Button


class WeatherApp(App):
    def build(self):
    # Background Image
    background = Image(source='weather_background.jpg', allow_stretch=True, keep_ratio=False)

    # Main Layout
    layout = BoxLayout(orientation='vertical', spacing=10, padding=50)

    # Group One: Name Input Field and Change Button
    group_one = BoxLayout(orientation='horizontal', spacing=10)
    name_input = TextInput(hint_text='Enter Your Name', multiline=False, size_hint=(0.5, None), size=(100, 32))
    name_button = Button(text='Change', size_hint=(None, None), size=(100, 32))
    group_one.add_widget(name_input)
    group_one.add_widget(name_button)
    layout.add_widget(group_one)

    # Group Two: Location Input Field and Change Button
    group_two = BoxLayout(orientation='horizontal', spacing=10)
    location_input = TextInput(hint_text='Enter Last Name', multiline=False, size_hint=(0.5, None), size=(100, 32))
    location_button = Button(text='Change', size_hint=(None, None), size=(100, 32))
    group_two.add_widget(location_input)
    group_two.add_widget(location_button)
    layout.add_widget(group_two)

    # Group Three: Temperature Unit Selection
    group_three = BoxLayout(orientation='horizontal', spacing=10)
    unit_button_c = ToggleButton(text='C', group='unit', size_hint=(0.5, None), height=32)
    unit_button_f = ToggleButton(text='F', group='unit', size_hint=(0.5, None), height=32)
    group_three.add_widget(unit_button_c)
    group_three.add_widget(unit_button_f)
    layout.add_widget(group_three)

    # Group Four: AI Tone Input Field and Change Button
    group_four = BoxLayout(orientation='horizontal', spacing=10)
    tone_input = TextInput(hint_text='Enter Location', multiline=False, size_hint=(0.5, None), size=(100, 32))
    tone_button = Button(text='Change', size_hint=(None, None), size=(100, 32))
    group_four.add_widget(tone_input)
    group_four.add_widget(tone_button)
    layout.add_widget(group_four)

    # Add background and layout to the root widget
    root = BoxLayout()
    root.add_widget(background)
    root.add_widget(layout)

    return root


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

I want it to look like this, the same padding on top and bottom: https://prnt.sc/PXluX-98RMpi To be centered in the middle. Tried a few things but I can't get it to work. What do you think I should do to make it centered?

Answer 1

I find it easier to do most layout positioning by using the kv language. Here is your code converted to using kv language:

import kivy
kivy.require('2.0.0')
from kivy.lang import Builder
from kivy.app import App

kv = '''
RelativeLayout:
    Image:
        source: 'weather_background.jpg'
        allow_stretch: True
        keep_ratio: False
    BoxLayout:
        orientation: 'vertical'
        spacing: 10
        padding: 50
        BoxLayout:
            orientation: 'horizontal'
            spacing: 10
            padding: 50
            TextInput:
                hint_text:'Enter Your Name'
                multiline: False
                size_hint: (0.5, None)
                size: (100, 32)
            Button:
                text: 'Change'
                size_hint: (None, None)
                size: (100, 32)
        BoxLayout:
            orientation: 'horizontal'
            spacing: 10
            padding: 50
            TextInput:
                hint_text:'Enter Last Name'
                multiline: False
                size_hint: (0.5, None)
                size: (100, 32)
            Button:
                text: 'Change'
                size_hint: (None, None)
                size: (100, 32)
        BoxLayout:
            orientation: 'horizontal'
            spacing: 10
            padding: 50
            ToggleButton:
                text: 'C'
                group: 'unit'
                size_hint: (0.5, None)
                height: 32
            ToggleButton:
                text: 'F'
                group: 'unit'
                size_hint: (0.5, None)
                height: 32
        BoxLayout:
            orientation: 'horizontal'
            spacing: 10
            padding: 50
            TextInput:
                hint_text:'Enter Location'
                multiline: False
                size_hint: (0.5, None)
                size: (100, 32)
            Button:
                text: 'Change'
                size_hint: (None, None)
                size: (100, 32)
'''


class WeatherApp(App):
    def build(self):
        return Builder.load_string(kv)


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