Kivy Anchor and gridlayout centering

Question

I am using anchor layout to hold widgets, my widget is a gridlayout, the issue is, I want a compact login display UI, however, I am getting 3 contorls near, and logout button at end, all are not together (should not have much spacing) and should be centered in Anchor Layout.

I am getting it as which is not looking good:

Codes are as follows:

main.py:

from kivy.app import App
from formcontrol import FormControl

class MyApp(App):

    def build(self):
        self.title="sample App"
        self.formcontrol = FormControl()
        return self.formcontrol

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

FormControl.py:

from kivy.uix.boxlayout import BoxLayout
from kivy.uix.anchorlayout import AnchorLayout
from login.logincodes import LoginControl
from login.logincodes import AfterLogin

class FormControl(AnchorLayout):
    '''
    classdocs
    '''

    def __init__(self, **kwargs):
        '''
        Constructor
        '''
        super(FormControl,self).__init__(**kwargs)
        c= LoginControl()
        c.setparent(self)
        self.add_widget(c)

    def changewidget(self,to):
        if to == 'AfterLogin':
            self.clear_widgets()
            self.add_widget(AfterLogin())

logincodes.py:

from kivy.uix.gridlayout import GridLayout


class LoginControl(GridLayout):
    _parentwidget=None

    def __init__(self, **kwargs):
        super(LoginControl,self).__init__(**kwargs)
        self.userid.text='Welcome'

    def setparent(self,parent):
        self._parentwidget=parent

    def changewidget(self,to):
        self._parentwidget.changewidget(to)

    def login_pressed(self,button):
        print(button.text)
        print(self.userid.text)
        print(self.userpw.text)
        self.changewidget('AfterLogin')

    def close_pressed(self,button):
        print(button.text)
        exit()


class AfterLogin(GridLayout):

    def __init__(self,**kwargs):
        super(AfterLogin,self).__init__(**kwargs)

my.ky file:

<LoginControl>:
    rows: 3
    cols: 1

    userid: userid
    userpw: userpw

    BoxLayout:
        size_hint_y: None
        height: '32dp'
        Label:
            text: 'User ID'

        TextInput:
            id: userid
            text: 'some password'

    BoxLayout:
        size_hint_y: None
        height: '32dp'
        Label:
            text: 'Password'

        TextInput:
            id: userpw
            password: True
            text: 'some password'

    Button:
        text: 'Login'
        on_press: root.login_pressed(self)
        size_hint_y: None
        height: '32dp'

    Button:
        text: 'Close'
        on_press: root.close_pressed(self)
        size_hint_y: None
        height: '32dp'



<AfterLogin>:
    rows: 1
    Label:
        text: 'Logged In'

Please make me learn where I went wrong in configuring the UI and I dont want to use a float layout which is like using points to place widgets. I am new to both Python and Kivy. Your support and advices are valuable to me to improve,

Answer 1

On your GridLayout you specify rows = 3 and cols = 1, which means the layout has space for 3 children. When it gets to laying out the Close button, all the rows and cols have been used up so the Close button goes to the default position (0, 0). I would just specify cols and leave rows out - it will use as many rows as necessary to lay out the children.

Second, this isn't a problem, but there's a quicker way to set all of the children's height to 32dp. Rather than specifying size_hint and height on all of the children, you can instead set row_default_height and row_force_default on the GridLayout.

Finally, your GridLayout is still taking up all the space, which is why it's not centering in the AnchorLayout. This is easily solved with a GridLayout due to the minimum_height property - set height to minimum_height and size_hint_y to None, and it will center.

Putting it all together:

<LoginControl>:
    cols: 1
    row_force_default: True
    row_default_height: '32dp'
    size_hint_y: None
    height: self.minimum_height