CODEWITHSUNDEEP
kivykivy-languagekivymd
AXLD
AXLD

Reputation: 3

BeReal UI in KivyMD

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?

Upvotes: 0

Views: 66

Answers (2)

MST
MST

Reputation: 721

Something like this?

Screen:
    FitImage:
        source: "Image1.jpg"

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

Upvotes: 0

Givver
Givver

Reputation: 473

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

Upvotes: 1

Related Questions