CODEWITHSUNDEEP
pythonkivy
Malik Brahimi
Malik Brahimi

Reputation: 16721

Specific Layout in Kivy

I'm trying to make a menu in Kivy but I am having a few issues with layouts. I've tried GridLayout and FloatLayout but I want to combine their functionality so that I can center the menu on screen.

------------------------------------------
|                                        |
|                                        |
|                                        |
|                Play Game               |
|                                        |
|                 Scores                 |
|                                        |
|                 About                  |
|                                        |
|                                        |
------------------------------------------

For some reason, I can not space my buttons and use position hints to place the menu in the center of the screen. Does anyone have any ideas about what I can do to solve this issue?

<Button>:
    font_name: 'fonts/Roboto.ttf'
    font_size: 15
    size_hint: 0.3, 0.1

<MainMenu>
    rows: 3
    cols: 1

    Button:
        text: 'Play Game'

    Button:
        text: 'Scores'

    Button:
        text: 'About'

Upvotes: 0

Views: 236

Answers (3)

rawinput
rawinput

Reputation: 132

you can use padding

<Button>:
    font_name: 'fonts/Roboto.ttf'
    font_size: 15
    size_hint: 0.3, 0.1

<MainMenu>
    rows: 3
    cols: 1
    padding:  root.size[0] * 0.7 ,root.size[1] * 0.7,root.size[0] * 0.7,root.size[1] * 0.7  # 0.7 is percentage of width or height of layout [padding_left, padding_top, padding_right, padding_bottom ]

    Button:
        text: 'Play Game'

    Button:
        text: 'Scores'

    Button:
        text: 'About'

Upvotes: 0

Malik Brahimi
Malik Brahimi

Reputation: 16721

<MainMenu>:

    FloatLayout:
        size: root.size

        GridLayout:
            size_hint: 0.3, 0.3
            spacing: 20

            rows: 3
            cols: 1

            pos_hint: {'center_x': 0.5, 'center_y': 0.5}

            Button:
                text: 'Play Game'

            Button:
                text: 'Scores'

            Button:
                text: 'About'

Upvotes: 1

MadeOfAir
MadeOfAir

Reputation: 3193

You could try surrounding the buttons in a layout with padding widgets, which are empty widgets that just take some space:

<MainMenu>:

  BoxLayout:

    Widget:
      # empty spacer widget

    BoxLayout:
      orientation: "vertical"

      Button:
        text: 'Play Game'

      Button:
        text: 'Scores'

      Button:
        text: 'About'

    Widget:
      # empty spacer widget

Upvotes: 1

Related Questions