CODEWITHSUNDEEP
user-interfacekivy
Tyler Channer
Tyler Channer

Reputation: 79

Is there a way to put a border around kivy BoxLayouts?

I am designing a main menu for an app that i am creating, but i cant seem to figure out how to border a boxlayout in kivy, is there a way to do this? If so could someone help. I have tried to use a canvas.before and bordering the rectangle but that doesn't work.

<MainMenuWindow>:
    id: Main_Menu_window  ## setting the id to Login_window

    BoxLayout: ## whole screen
        orientation: 'horizontal'

        BoxLayout: ## left hand side 1/3
            canvas.before:
                Color:
                    rgba: 0, 0, 0, 1
                Line:
                    width:
                    rectangle: self.x, self.y, self.width, self.height

            orientation: 'vertical' ## setting orientation of the screen to vertical
            size_hint_x: 1/3 ## setting size of box to 1/3 of the screen
            canvas.before:
                Color: ## just for debugging reasons
                    rgba: (255/255,255/255,255/255, 1)  ## setting colour
                Rectangle:
                    size: self.size  ## setting size to the size of the box layout
                    pos: self.pos  ## setting position to the position of the box layout

Upvotes: 6

Views: 4814

Answers (1)

John Anderson
John Anderson

Reputation: 39107

A BoxLayout tries to use all its available space by allocating a share to each child. Since your inside BoxLayout is the only child of the outside BoxLayout, it will be allocated the entire space of the outside BoxLayout. So, you can control the size of your inner BoxLayout either by adjusting the size of the outer BoxLayout, or by explicitly setting the size of the inner BoxLayout (with size_hint: None, None).

So, here is one way to get the inner BoxLayout to one third the screen width:

<MainMenuWindow>:
    id: Main_Menu_window  ## setting the id to Login_window

    BoxLayout: ## whole screen
        orientation: 'horizontal'

        BoxLayout: ## left hand side 1/3
            canvas.before:
                Color:
                    rgba: 1, 0, 0, 1
                Line:
                    width: 20
                    rectangle: self.x, self.y, self.width, self.height

            orientation: 'vertical' ## setting orientation of the screen to vertical
        Label:  ## middle third
            text: 'Abba'
        Label:  ## right third
            text: 'Dabba'

Upvotes: 5

Related Questions