How to always keep an image on top of other canvases/widgets?

[Mario]

See the video below and you'll quickly understand the problem I'm trying to solve.

I have written a simple program that animates an image up and down when clicked on and then the Image is removed and added to the correct layout.

https://www.loom.com/share/3b928cdc73bb4e24ba650c54e2f5e22c

How do I keep the image to still be visible on the way down?

.kv code:

<MainWidget>:

    orientation: "vertical"

    BoxLayout:

        size_hint_y: .25

        canvas.before:

            Color:

                rgba: 1,1,1,1

            Rectangle:

                size: self.size

                pos: self.pos

        BoxLayout:

            AnchorLayout:

                id: earth_top

                ancher_x: 'center'

                ancher_y: 'center'

                # The image is added here when at the top.

        BoxLayout:

        BoxLayout:

    BoxLayout:

        size_hint_y: .5

        canvas.before:

            Color:

                rgba: 0,0,0,1

            Rectangle:

                size: self.size

                pos: self.pos

    BoxLayout:

        size_hint_y: .25

        canvas.before:

            Color:

                rgba: 1,1,1,1

            Rectangle:

                size: self.size

                pos: self.pos

        BoxLayout:

            AnchorLayout:

                id: earth_bottom

                ancher_x: 'center'

                ancher_y: 'center'

                Image:

                    id: earth

                    source: 'images/earth.png'

                    size_hint: None, None

                    size: 100, 100

        BoxLayout:

        BoxLayout:

[Elliot Garbus]

But the object you want to be on top at the bottom of the widgets… it is at the end fo the widget tree… on top of things that came before it.  Here is an example:

 

from kivy.app import App
from kivy.lang import Builder
from kivy.animation import Animation

kv = """
BoxLayout:
    orientation: 'vertical'
    BoxLayout:
        canvas:
            Color:
                rgba: 1, 1, 1, 1
            Rectangle:
                pos: self.pos
                size: self.size
    BoxLayout:
        canvas:
            Color:
                rgba: .5, .5, .5, 1
            Rectangle:
                pos: self.pos
                size: self.size
        FloatLayout:
            Button:
                id: button_middle
                size_hint: None, None
                size: 200, 48
                text: 'button_middle'
                x: 400
    BoxLayout:
        canvas:
            Color:
                rgba: 0, 0, 0, 1
            Rectangle:
                pos: self.pos
                size: self.size
        FloatLayout:
            Button:
                id: button_top
                size_hint: None, None
                size: 200, 48
                text: 'button_top'

"""

class ZStackApp(App):
    def build(self):
        return Builder.load_string(kv)

    def on_start(self):
        up_down = Animation(y=600) + Animation(y=0)
        up_down.repeat = True
        up_down.start(self.root.ids.button_top)
        up_down.start(self.root.ids.button_middle)


ZStackApp().run()

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/9ae21917-c0bb-4e8b-aede-172bf0049707n%40googlegroups.com.

 

[Elliot Garbus]

But Put the object you want to be on top at the bottom of the widgets… it is at the end fo the widget tree… on top of things that came before it.

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/619d6d12.1c69fb81.4f377.5878SMTPIN_ADDED_MISSING%40gmr-mx.google.com.

 

[Mario]

Alright, so there isn't a function like Image.after or something?

[Elliot Garbus]

There is canvas, canvas.after, and canvas.before, but this for layering images within a widget.  The z-oder of the widgets is determined by their position in the widget tree.

 

See:

https://kivy.org/doc/master/guide/widgets.html#widgets-z-index

https://kivy.org/doc/master/api-kivy.uix.widget.html#kivy.uix.widget.Widget.add_widget

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/34ae59d9-8273-4359-9f92-f8889c750d54n%40googlegroups.com.

 

[Mario]

Okay, thanks! :)