Is it possible to add padding and margin to each widgets in kivy?

Question

I want to apply margin and padding to each widgets is that possible in kivy?

Here is the exact image I need; I want to apply padding and margin to each button:

![1][1]

I applied one method in kivy, put the widget in 2 layouts but the problem is without adding margin, padding there is space between the widgets. How can we set the 2 layout size according to widget size? Here is my code:

kv file

<Demoproject>:
    Screen:
        name:"screen_2917"
        canvas.before:
            Color:
                rgba:(1.0,1.0,1.0,1.0)
            Rectangle:

                pos:self.pos
                size:self.size
                #source:""

        BoxLayout:
            orientation:"vertical"



            BoxLayout:
                orientation:"vertical"
                padding:dp(0),dp(0),dp(0),dp(0)
                color:(1,0,0,1)
                canvas:
                    Color:
                        rgb: [.10, .10, .10]
                    Rectangle:
                        pos: self.pos
                        size: self.size
                GridLayout:
                    cols:1
                    padding:dp(0),dp(0),dp(0),dp(0)
                    canvas:
                        Color:
                            rgb: [.6, .6, .6]
                        Rectangle:
                            pos: self.pos
                            size: self.size
                    Button:
                        text:"close"
                        size:(200,100)
                        size_hint:(None,None)



            BoxLayout:
                orientation:"vertical"
                padding:dp(0),dp(0),dp(0),dp(0)
                color:(1,0,0,1)

                canvas:
                    Color:
                        rgb: [.10, .10, .10]
                    Rectangle:
                        pos: self.pos
                        size: self.size
                GridLayout:
                    cols:1
                    padding:dp(0),dp(0),dp(0),dp(0)
                    canvas:
                        Color:
                            rgb: [.6, .6, .6]
                        Rectangle:
                            pos:self.pos
                            size:self.size
                    Button:
                        text:"close"
                        size:(200,100)
                        size_hint:(None,None)

Answer 1

I think you can simplify your kv file and just use padding and spacing. Like this:

<Demoproject>:
    Screen:
        name:"screen_2917"
        canvas.before:
            Color:
                rgba:(1.0,1.0,1.0,1.0)
            Rectangle:
                pos:self.pos
                size:self.size
                #source:""

        BoxLayout:
            orientation:"vertical"
            size_hint: None, None
            size: self.minimum_size
            pos_hint: {'top': 1}
            padding: 5  # between Boxlayout edges and Buttons
            spacing: 5  # between Buttons
            Button:
                text:"close"
                size:(200,100)
                size_hint:(None,None)
            Button:
                text:"close"
                size:(200,100)
                size_hint:(None,None)

Padding can only be applied by a few of the Layout classes. So if you want different padding for each Button, you must use separate Layouts. Here is another version of your kv that uses AnchorLayout to apply different padding for each Button:

<Demoproject>:
    Screen:
        name:"screen_2917"
        canvas.before:
            Color:
                rgba:(1.0,1.0,1.0,1.0)
            Rectangle:
                pos:self.pos
                size:self.size
                #source:""

        BoxLayout:
            orientation:"vertical"
            size_hint: None, None
            size: self.minimum_size
            pos_hint: {'top': 1}
            canvas.before:
                Color:
                    rgba:(0,1,0,1)
                Rectangle:
                    pos:self.pos
                    size:self.size
            AnchorLayout:
                size_hint: None, None
                size: butt1.width + self.padding[0] + self.padding[2], butt1.height + self.padding[1] + self.padding[3]
                padding: 20
                canvas.before:
                    Color:
                        rgba: 1,0,0,1
                    Rectangle:
                        pos: self.pos
                        size: self.size
                Button:
                    id: butt1
                    text:"close"
                    size:(200,100)
                    size_hint:(None,None)
            AnchorLayout:
                size_hint: None, None
                size: butt2.width + self.padding[0] + self.padding[2], butt2.height + self.padding[1] + self.padding[3]
                padding: 5, 10, 15, 20
                canvas.before:
                    Color:
                        rgba: 0,0,1,1
                    Rectangle:
                        pos: self.pos
                        size: self.size
                Button:
                    id: butt2
                    text:"close"
                    size:(200,100)
                    size_hint:(None,None)

The canvas instructions are just to more easily visualize what is happening. The AnchorLayout sizes are calculated to just fit the Button with the specified padding.