Horizontally aligning buttons in kivy

Question

This is how my program looks right now.

How can I position my button "Log in" to always be horizontally aligned with center ? I've tried looking on Stack Overflow about similar stuff but nothing worked for me... If anyone can help me, I would be really thankful.

Here's my python code:

from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.core.window import Window
from kivy.uix.gridlayout import GridLayout
import kivy.properties as kyprops
from kivy.uix.widget import Widget
from kivy.uix.image import Image

Builder.load_file("main.kv")
Window.clearcolor = (1,1,1,1)
# Declare both screens
class LoginScreen(Screen):
    #txt_inpt = kyprops.ObjectProperty(None)
    #def __init__(self):
    pass

class InfoScreen(Screen):
    pass

# Create the screen manager
sm = ScreenManager()
sm.add_widget(LoginScreen(name='Login'))
sm.add_widget(InfoScreen(name='Info'))

class TestApp(App):
    def build(self):
        return sm

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

Here is my.kv code:

#:import C kivy.utils.get_color_from_hex

<LoginScreen>:

    RelativeLayout:

        txt_inpt: txt_inpt

        canvas:
            Color:
                rgba: C('#336699')
            Line:
                width: 2
                rectangle: (0,self.height-50,self.width,0)
                id: linija
            Ellipse:
                pos: self.width- 35, self.height-15
                size: 7 , 7.0000000001
                angle_start: 0
                angle_end: 360
            Ellipse:
                pos: self.width- 35, self.height-27
                size: 7 , 7.0000000001
                angle_start: 0
                angle_end: 360
            Ellipse:
                pos: self.width- 35, self.height-39
                size: 7 , 7.0000000001
                angle_start: 0
                angle_end: 360

        TextInput:
            id: txt_inpt
            password: True
            multiline: False
            hint_text: 'Username'
            hint_text_color:  C('#b3ccff')
            size_hint_x: 0.9
            size_hint_y: None
            pos_hint: {"x":0.05, "top":0.8}
            background_color: (1,1,1,0.2)
            on_text_validate: root.manager.current = 'Info'
            height: 30
            pos: 300,60

        TextInput:
            id: txt_inpt
            password: True
            multiline: False
            hint_text: 'Password'
            hint_text_color:  C('#b3ccff')
            size_hint_x: 0.9
            size_hint_y: None
            pos_hint: {"x":0.05, "top":0.7}
            background_color: (1,1,1,0.2)
            on_text_validate: root.manager.current = 'Info'
            height: 30
            pos: 300,60

        BoxLayout:

            width: 1
            pos: self.parent.pos  # important!
            orientation: 'vertical'
            halign: 'center'

            Button:
                on_press: root.manager.current = 'Info'
                background_color: C('#336699')
                pos: self.pos
                size: self.size
                size: 80,30
                size_hint: None, None
                ## NOTE: pos_hint: {"x":0.45, "top":0.6}
                font_name: 'Droid.otf'
                text: 'Log in'

<InfoScreen>:
    BoxLayout:
        Button:
            text: 'My settings button'
        Button:
            text: 'Back to menu'
            on_press: root.manager.current = 'Login'

Answer 1

Your line in kv :

pos: self.parent.pos  # important!

is positioning the BoxLayout in the lower left corner of the RelativeLayout

You can center it by using pos_hint and minimum_width :

    BoxLayout:
        # width: 1
        # pos: self.parent.pos  # important!
        pos_hint: {'center_x':0.5, 'y':0}
        size_hint_x: None
        width: self.minimum_width
        orientation: 'vertical'