BeReal UI in KivyMD

Question

I'm trying to create a UI similar to BeReal's where there's a large image and then a smaller image in the top left corner of the larger image.

I've tried this solution:

MDBoxLayout:
  size_hint: None, None
  size: root.size
  orientation: "vertical"

  canvas:
    Rectangle:
      src: "Image1.jpg"
  
  FitImage:
    source: "Image2.jpg"
    size_hint: .2, .3
    pos_hint: {"center_x": .3, "center_y": .7}

I'm using the canvas to display the larger image as a background image and then adding the smaller one to the BoxLayout. This doesn't work, however, as the background image doesn't take up the entire screen and seems to be colliding with the smaller image.

Is there any way to replicate BeReals UI in Kivy?

Answer 1

Use a MDFloatLayout instead of a MDBoxLayout. ie.

MDFloatLayout:
    FitImage:
        source: 'image_cover.jpg'
        pos: 0, 0
        size_hint: 1, 1

    FitImage:
        source: 'top_left_image.jpg'
        pos_hint: {'x': 0.01, 'top': 0.99}
        size_hint: 0.45, 0.45
        radius: 36, 36, 36, 36