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: ![enter image description
here](http://i.stack.imgur.com/LX7WT.png)

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: 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
    

![centered GridLayout example](http://i.stack.imgur.com/qsBsW.png)

