Kivy: Top or Bottom navigation bar

Question

For some reasons only bottom bar is shown (independently of is_mobile state). How can it be fixed?

BoxLayout:
    orientation: 'vertical'
    ActionBar:
        hidden: app.is_mobile
        size_hint_y: 0 if app.is_mobile else None
        ActionView:
            use_separator: True
            ActionPrevious:
                with_previous: True
                on_release: app.next_screen('main')
            ActionButton:
                text: 'Shuffle 1'
            ActionButton:
                text: 'Check'
            ActionButton:
                text: 'Next'
    Accordion:
        AccordionItem:
            title: '...'
            Label:
                text: '...'
        AccordionItem:
            title: '...'
            Label:
                text: '...'
    ActionBar:
        hidden: False if app.is_mobile else True
        size_hint_y: None if app.is_mobile else 0
        ActionView:
            use_separator: True
            ActionPrevious:
                with_previous: True
                on_release: app.next_screen('main')
            ActionButton:
                text: 'Shuffle'
            ActionButton:
                text: 'Check'
            ActionButton:
                text: 'Next'

where app_mobile is calsulated as:

from kivy.utils import platform

class MainApp(App):
    is_mobile = BooleanProperty(False)

    def build(self):
        if platform in ['android', 'ios']:
            self.is_mobile = True

Answer 1

The ActionBar and its children ActionButton, ... have predefined sizes in the kivy style.kv file. You can get what I believe are your desired results by working with those predefined properties. Try changing your kv to:

BoxLayout:
    orientation: 'vertical'
    ActionBar:
        hidden: app.is_mobile
        # size_hint_y: 0 if app.is_mobile else None
        opacity: 1.0 if not app.is_mobile else 0
        height: '48dp' if not app.is_mobile else 0  # `480dp` is the default height from style.kv
        ActionView:
            use_separator: True
            ActionPrevious:
                with_previous: True
                on_release: app.next_screen('main')
            ActionButton:
                text: 'Shuffle 1'
            ActionButton:
                text: 'Check'
            ActionButton:
                text: 'Next'
    Accordion:
        AccordionItem:
            title: '...'
            Label:
                text: '...'
        AccordionItem:
            title: '...'
            Label:
                text: '...'
    ActionBar:
        id: ab
        hidden: False if app.is_mobile else True
        # size_hint_y: None if app.is_mobile else 0
        opacity: 1.0 if app.is_mobile else 0
        height: '48dp' if app.is_mobile else 0  # `480dp` is the default height from style.kv
        ActionView:
            use_separator: True
            ActionPrevious:
                with_previous: True
                on_release: app.next_screen('main')
            ActionButton:
                text: 'Shuffle'
            ActionButton:
                text: 'Check'
            ActionButton:
                text: 'Next'

The height property generally makes the ActionBar visible or not. The opacity property is used to make its children visible or not, because those children also have predefined sizes and will appear even if the ActionBar has zero height.