Kivy button position and label background color

Question

I setup a grid layout in Kivy with 3 button and a text area. The three button do not start in 0,0 and label background color is not applied.

Here is my main code

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

Builder.load_file('exceltoolui.kv')

class checker_ui(GridLayout):
    pass


class Checker(App):
    def build(self):
        return checker_ui()

if __name__ == '__main__':
    Checker().run()

Here is my .kv file code

<checker_ui>:
    rows:2
    cols:1
    padding: 10
    spacing: 10
    BoxLayout:
        Button:
            id:this_week_btn
            text: 'This Week Report'
            size_hint:(None,None)
            size: root.width/3,root.height/12
        Button:
            id:last_week_btn
            text: 'Last Week Report'
            size_hint:(None,None)
            size: root.width/3,root.height/12
        Button:
            id:confirm_btn
            text: 'Start Checking'
            size_hint:(None,None)
            size: root.width/3,root.height/12
    BoxLayout:
        Label:
            id:entry
            text:'test'
            font_size:18
            multiline:True
            background_color:1,50,0,1

My current output have a big black space above the button and label don't have a background color. My expected output is to have button start at the top instead of center of the screen.

Answer 1

When setting the widgets within a layout and not setting a size_hint for the widgets, the layout will set an equidistant size, so note that both BoxLayout occupy half of the window. The solution is to set None to size_hint_y so that it is placed at the top, and the height is the minimum.

On the other hand if you want to set a background color you must use the canvas. Besides the components of rgba are in the range of 0 to 1.

In the case of the buttons, the width must be established by the layout, if you set it and it is larger than allowed by the layout you will see inadequate designs as shown by the third button in the image that your samples do not respond to padding.

<checker_ui>:
    rows:2
    cols:1
    padding: 10
    spacing: 10
    BoxLayout:
        size_hint_y: None
        height: self.minimum_height
        Button:
            id:this_week_btn
            text: 'This Week Report'
            size_hint:(1, None)
            height: root.height/12
        Button:
            id:last_week_btn
            text: 'Last Week Report'
            size_hint:(1, None)
            height: root.height/12
        Button:
            id:confirm_btn
            text: 'Start Checking'
            size_hint:(1, None)
            height: root.height/12
    BoxLayout:
        Label:
            id:entry
            text:'test\nTEST'
            font_size:18
            multiline:True
            canvas.before:
                Color:
                    rgba: 1, .5, 0, 1
                Rectangle:
                    pos: self.pos
                    size: self.size