kivykivy-language

Canvas rectangle pos stuck at btm left of UI


I am trying to create a white backdrop for my grey background.But after successfully creating the background and backdrop i only managed to reposition the background to the desired location, tried to create a separate layout for the widget . added constraints and tried pos . However
nothing was successful. I tried to see if others experienced the same issue but none of their solution worked for me.

The light grey backdrop should be centered for the app, but its currently stuck at bottom left of the ui

.py file :

""" kivy modules """
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.image import Image
from kivy.metrics import *
from kivy.graphics import Color
from kivy.uix.popup import Popup
from kivy.graphics import *
from kivy.lang import Builder
from kivy.uix.widget import Widget
from kivy.graphics.instructions import Canvas
from kivy.graphics.vertex_instructions import Rectangle , Line
from kivy.core.window import Window

""" Kivy import """
Builder.load_file("menu_template.kv")

""" Changing directory """
Dir_Code = os.path.dirname(__file__)
Dir_Logo = os.path.relpath('..\\images\logo.png',Dir_Code)
Dir_Arright = os.path.relpath('..\\images\arrow_right.png',Dir_Code)

class Menu_Template(Widget):
    pass
    
class MyMainApp(App):
    def build(self):
        return Menu_Template()
        
    



if __name__ == "__main__":
    MyMainApp().run()

.Kv file :

<Menu_Template>:
    FloatLayout:    
        size : (337.5,753.75)
        id : Template
        
        # 
        Image:
            source : "..\images\logo.png"
            width : sp(.25)
            pos_hint : {'center_y':.5,'center_x':.5}
        
        
        # Grey BG
        Widget: 
            size_hint : (1,1)
            canvas:
                Color : 
                    rgba : .5, .5, .5, .5
                Rectangle : 
                    size: self.size
                    
        # White semiopq playarea
            Widget: 
                opacity : .15
                size_hint : (.9,1)
                pos_hint : {'center_y':.5,'center_x':.5}
                
                canvas:
                    Color : 
                        rgba : .5, .5, .5, 1
                    Rectangle : 
                        size: self.size     

Solution

  • Your White semiopq playarea Widget is indented from the Grey BG Widget. This makes it a child of the Grey BG Widget, however, simple Widgets are not designed to be containers and they do not support things like pos_hint or size_hint. Try unindenting that Widget by one level to make it a child of the FloatLayout. I suspect you will also need to add pos: self.pos to the Rectangle graphics instruction for that Widget.