title: Kivy. Checkbox on top of background image
body: <p>My goal is to set the checkbox on top of the image in below class. I'm struggling to find a layout in which I can position one layout above another. The only way I could think of at the moment is to show the image as the background image of RelativeLayout not as AsyncImage but I believe there is a clean way to achieve this.</p>
  <p><strong>Class</strong></p>
  <pre><code>&lt;FriendTile&gt;
      orientation: 'vertical'
      size_hint: None, None
      height: pic.height + username.height
      width: pic.width
      background_color: app.alert_color
      active_color: app.main_bcolor
      unactive_color: app.main_bcolor
  
      canvas.before:
          Color:
              rgba: (0, 0, 1, 1)  if self.background_color is None else self.background_color
          Rectangle:
              pos: self.pos
              size: self.size
  
      RelativeLayout:
          id: pic
          size_hint: None, None
          size: 100, 100
  
          CheckBox:
              size_hint: .1, .1
              pos_hint: {'top': 1, 'right': 1}
              canvas.after:
                  Color:
                      rgba: (0, 1, 0, 1)
                  Rectangle:
                      pos: self.pos
                      size: self.size
  
          AsyncImage:
              id: image
              size_hint: .9, .9
              pos_hint: {'center_x': .5, 'center_y': .5}
              source: root.avatar
              canvas.before:
                  Color:
                      rgba: (0, 1, 1, 1) # if root.background_color is None else root.background_color
                  Rectangle:
                      pos: self.pos
                      size: self.size
  </code></pre>
  <p><strong>Expectations</strong></p>
  <p><a href="https://i.stack.imgur.com/fMCTa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fMCTa.jpg" alt="enter image description here" /></a></p>
  <p><strong>Reality</strong></p>
  <p><a href="https://i.stack.imgur.com/dnyDh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dnyDh.png" alt="enter image description here" /></a></p>