Question

I’ve noticed that when you make buttons using the grid layout in Kivy they are created at (0,0) and move over a number of spaces depending on the length and width of previous buttons.
However, I’d like to have a 3×4 grid in the middle of the bottom of the screen.

I have this so far:

import kivy
from kivy.uix.gridlayout import GridLayout
from kivy.app import App
from kivy.uix.button import Button

class CalcApp(App):
    def build(self):
        layout = GridLayout(cols=3, row_force_default=True, row_default_height=50)
        layout.add_widget(Button(text='1', size_hint_x=None, width=100))
        layout.add_widget(Button(text='2', size_hint_x=None, width=100))
        layout.add_widget(Button(text='3', size_hint_x=None, width=100))
        layout.add_widget(Button(text='4', size_hint_x=None, width=100))
        layout.add_widget(Button(text='5', size_hint_x=None, width=100))
        layout.add_widget(Button(text='2', size_hint_x=None, width=100))
        layout.add_widget(Button(text='6', size_hint_x=None, width=100))
        layout.add_widget(Button(text='7', size_hint_x=None, width=100))
        layout.add_widget(Button(text='8', size_hint_x=None, width=100))
        layout.add_widget(Button(text='9', size_hint_x=None, width=100))
        layout.add_widget(Button(text='0', size_hint_x=None, width=100))
        layout.add_widget(Button(text='Enter', size_hint_x=None, width=100))
        return layout

CalcApp().run()

So, how do I shift the position?

Answer 1

import kivy
from kivy.uix.gridlayout import GridLayout
from kivy.app import App
from kivy.uix.button import Button

class CalcApp(App):
    def build(self):
        layout = GridLayout(cols=3, row_force_default=True, row_default_height=50,
            pos_hint={'center_x':.5} , size_hint=(None, None))
            # ^ position grid in mid horizontally, ^ make grid use custom
            # size.
        # Bind the size of the gridlayout of to it's minimum_size(calculated
        # by children size)
        layout.bind(minimum_size = layout.setter('size'))
        # bind the top of the grid to it's height'
        layout.bind(height = layout.setter('top'))
        for x in (1, 2, 3, 4, 5, 2, 6, 7, 8, 9, 0):
            layout.add_widget(Button(text=str(x), size_hint_x=None, width=100))
        layout.add_widget(Button(text='Enter', size_hint_x=None, width=100))
        return layout

CalcApp().run()

The same code using kv lang::

import kivy

from kivy.uix.gridlayout import GridLayout
from kivy.app import App
from kivy.lang import Builder

Builder.load_string('''
# a template Butt of type Button
[Butt@Button]
    # ctx.'attribute_name' is used to access the 
    # attributes defined in the instance of Butt.
    text: ctx.text
    # below vars are constant for every instance of Butt
    size_hint_x: None
    width: 100

<CalcApp>:
    cols: 3
    row_force_default: True
    row_default_height: 50
    pos_hint: {'center_x':.5}
    size_hint: (None, None)
    # size is updated whenever minimum_size is.
    size: self.minimum_size
    # top is updated whenever height is.
    top: self.height
    Butt:
        text: '1'
    Butt:
        text: '2'
    Butt:
        text: '3'
    Butt:
        text: '4'
    Butt:
        text: '5'
    Butt:
        text: '2'
    Butt:
        text: '6'
    Butt:
        text: '7'
    Butt:
        text: '8'
    Butt:
        text: '9'
    Butt:
        text: '0'
    Butt:
        text: 'Enter'
''')

class CalcApp(App, GridLayout):

    def build(self):
        return self

CalcApp().run()