How to place a label or drop-down widget just below the action bar

[Shoumik Das]

Hi, I have built a screen with nested box layouts in vertical orientation. The parent box layout has a size_hint of 1, 1 thereby fitting the entire screen. Inside, the first box layout has a size_hint of 1, 0.1 and house the Kivy ActionBar widget. The remaining space consists of another box layout with size_hint of 1, 0.9. I am aware the ActionBar has a default minimum width of 90 px which remains constant irrespective of the screen (window) size. I ran the code with the inspector tool and this is what I see. The action bar fits within the first boxlayout and actually falls a bit short on the width, which is fine in this case since the lower box layout does not have any widget yet.

If I reduce the window/screen size to simulate a mobile phone, the action bar spills over to the boxlayout underneath as it has a fixed minimum width of 90 px. Naturally, if I place a widget at the topmost border of the bottom-most box layout, it would ride over the action bar and overlap it.

How do I contain the action bar within its box layout (top-most child box layout)? If automatic resizing of the action bar's width is not possible, is there a way I can place a widget (label or dropdown) relative to the base of the action bar? I would simply like to prevent the overlap of the widget onto the action bar and vice versa.

Would a relative layout help in this case? Maybe convert the bottom-most child box layout into a relative layout whose upper boundary would always be at the base of the action bar? I have never used one. Any pointers would really help.

Kivy file:

<SivaStatusScreen>:
    name: 'status_screen'
    canvas.before:
        Color:
            rgba: 255/255, 255/255, 255/255, 1
        Rectangle:
            pos: self.pos
            size: self.size
    AnchorLayout:
        id: status_add
        anchor_x: 'right'
        anchor_y: 'bottom'
        ImageButton:
            id: status_addbtn
            source: {'normal': 'images/plus-96.png', 'down': 'images/plusblue-96.png'} [self.state]
            size_hint: 0.2, 0.2
            on_release: root.new_status_entry()
    BoxLayout:
        id: status_layout
        size_hint: 1, 1
        orientation: 'vertical'
        BoxLayout:
            id: actionbar_layout
            size_hint: 1, 0.1
            ActionBar:
                id: status_actionbar
                pos_hint: {'top': 1}
                background_image: ''
                background_color: 195/255, 60/255, 35/255, 1
                ActionView:
                    use_separator: True
                    ActionPrevious:
                        title: 'SIVA'
                        with_previous: False
                    ActionOverflow:
                    CustomActionButton:
                        id: status-button
                        important: True
                        source: {'normal': 'images/communicationgreen-48.png', 'down': 'images/communication-48.png'} [self.state]
                        on_release: root.to_statusscreen()
                    CustomActionButton:
                        id: accounts-button
                        important: True
                        source: {'normal': 'images/key-48.png', 'down': 'images/keygreen-48.png'} [self.state]
                        on_release: root.to_accountsscreen()
                    CustomActionButton:
                        id: bot-button
                        important: True
                        source: {'normal': 'images/bot-48.png', 'down': 'images/botgreen-48.png'} [self.state]
                        on_release: root.to_botscreen()
                    CustomActionButton:
                        id: logout-button
                        important: True
                        source: {'normal': 'images/shutdown-48.png', 'down': 'images/shutdowngreen-48.png'} [self.state]
                        on_release: root.to_logout()
        BoxLayout:
            id: status_display
            size_hint: 1, 0.9

Python file:

class SivaStatusScreen(Screen):
        pass

[Elliot Garbus]

Great to see you using the inspector.  A wonderful tool to see what is going on especially with Layouts.

If you size the element you want fixed, the BoxLayout will do the rest.

 

I created a standalone example from your code.  Relevant changes highlighted.

 

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


kv = """
<SivaStatusScreen@Screen>:

    name: 'status_screen'
    canvas.before:
        Color:
            rgba: 255/255, 255/255, 255/255, 1
        Rectangle:
            pos: self.pos
            size: self.size
    AnchorLayout:
        id: status_add
        anchor_x: 'right'
        anchor_y: 'bottom'

        Button:
            id: status_addbtn
            text: 'button in anchor layout'
            # source: {'normal': 'images/plus-96.png', 'down': 'images/plusblue-96.png'} [self.state]

            size_hint: 0.2, 0.2
            on_release: root.new_status_entry()
    BoxLayout:
        id: status_layout

        #size_hint: 1, 1  # This is the default, not required.

        orientation: 'vertical'
        BoxLayout:
            id: actionbar_layout

            size_hint_y: None  # Size this BoxLayout to contain the ActionBar.
            height: 48

            ActionBar:
                id: status_actionbar
                pos_hint: {'top': 1}
                background_image: ''
                background_color: 195/255, 60/255, 35/255, 1
                ActionView:
                    use_separator: True
                    ActionPrevious:
                        title: 'SIVA'
                        with_previous: False
                    ActionOverflow:

                    ActionButton:
                        id: status-button
                        important: True
                        source: {'normal': 'images/communicationgreen-48.png', 'down': 'images/communication-48.png'} [self.state]
                        on_release: root.to_statusscreen()

                    ActionButton:
                        id: accounts-button
                        important: True
                        source: {'normal': 'images/key-48.png', 'down': 'images/keygreen-48.png'} [self.state]
                        on_release: root.to_accountsscreen()

                    ActionButton:
                        id: bot-button
                        important: True
                        source: {'normal': 'images/bot-48.png', 'down': 'images/botgreen-48.png'} [self.state]
                        on_release: root.to_botscreen()

                    ActionButton:
                        id: logout-button
                        important: True
                        source: {'normal': 'images/shutdown-48.png', 'down': 'images/shutdowngreen-48.png'} [self.state]
                        on_release: root.to_logout()
        BoxLayout:
            id: status_display

            #size_hint: 1, 0.9   

            # This Layout shares the space with the BoxLayout that has a fixed y size, it will grow to fill the space

BoxLayout:
    ScreenManager:
        SivaStatusScreen:
        
"""


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

BarLayoutTestApp().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/62afd2d8-74c4-4395-bc01-9a9dbf96c3ce%40googlegroups.com.

 

[Shoumik Das]

Thanks, Eliott. That solved my problem and also gave me a better understanding of how layouts work. Getting the concepts clear is very important for a sound design. I have been using the inspector tool ever since you suggested this to me a few weeks ago. Thank you very much for that. The inspector tool helps to accurately design layouts and identify widget boundaries, thereby enabling a clean and solid foundation for any app.

Much appreciated. I have been encouraging a lot of my friends, acquaintances and colleagues to adopt Kivy. This is such a wonderful framework.

Thanks

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-...@googlegroups.com.

[Elliot Garbus]

😀

Sent from my iPad

On May 28, 2020, at 1:57 AM, Shoumik Das <shoum...@gmail.com> wrote:



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/50f4ecb5-2e87-4672-b165-1afdd7c9237b%40googlegroups.com.