Bottom Navigation

See also

Material Design spec, Bottom navigation

Bottom navigation bars allow movement between primary destinations in an app:

Usage

<Root>>:

    MDBottomNavigation:

        MDBottomNavigationItem:
            name: "screen 1"

            YourContent:

        MDBottomNavigationItem:
            name: "screen 2"

            YourContent:

        MDBottomNavigationItem:
            name: "screen 3"

            YourContent:

For ease of understanding, this code works like this:

<Root>>:

    ScreenManager:

        Screen:
            name: "screen 1"

            YourContent:

        Screen:
            name: "screen 2"

            YourContent:

        Screen:
            name: "screen 3"

            YourContent:

Example

from kivymd.app import MDApp
from kivy.lang import Builder


class Test(MDApp):

    def build(self):
        self.theme_cls.primary_palette = "Gray"
        return Builder.load_string(
            '''
BoxLayout:
    orientation:'vertical'

    MDToolbar:
        title: 'Bottom navigation'
        md_bg_color: .2, .2, .2, 1
        specific_text_color: 1, 1, 1, 1

    MDBottomNavigation:
        panel_color: .2, .2, .2, 1

        MDBottomNavigationItem:
            name: 'screen 1'
            text: 'Python'
            icon: 'language-python'

            MDLabel:
                text: 'Python'
                halign: 'center'

        MDBottomNavigationItem:
            name: 'screen 2'
            text: 'C++'
            icon: 'language-cpp'

            MDLabel:
                text: 'I programming of C++'
                halign: 'center'

        MDBottomNavigationItem:
            name: 'screen 3'
            text: 'JS'
            icon: 'language-javascript'

            MDLabel:
                text: 'JS'
                halign: 'center'
'''
        )


Test().run()

MDBottomNavigationItem provides the following events for use:

__events__ = (
    "on_tab_touch_down",
    "on_tab_touch_move",
    "on_tab_touch_up",
    "on_tab_press",
    "on_tab_release",
)

See also

See __events__

Root:

    MDBottomNavigation:

        MDBottomNavigationItem:
            on_tab_touch_down: print("on_tab_touch_down")
            on_tab_touch_move: print("on_tab_touch_move")
            on_tab_touch_up: print("on_tab_touch_up")
            on_tab_press: print("on_tab_press")
            on_tab_release: print("on_tab_release")

            YourContent:

How to automatically switch a tab?

Use method switch_tab which takes as argument the name of the tab you want to switch to.

How to change icon color?

MDBottomNavigation:
    text_color_active: 1, 0, 1, 1

MDBottomNavigation:
    text_color_normal: 1, 0, 1, 1

See also

See Tab auto switch example

See full example

API - kivymd.uix.bottomnavigation

class kivymd.uix.bottomnavigation.MDTab(**kwargs)

A tab is simply a screen with meta information that defines the content that goes in the tab header.

text

Tab header text.

text is an StringProperty and defaults to ‘’.

icon

Tab header icon.

icon is an StringProperty and defaults to ‘checkbox-blank-circle’.

on_tab_touch_down(self, *args)

on_tab_touch_move(self, *args)

on_tab_touch_up(self, *args)

on_tab_press(self, *args)

on_tab_release(self, *args)

class kivymd.uix.bottomnavigation.MDBottomNavigationItem(**kwargs)

A tab is simply a screen with meta information that defines the content that goes in the tab header.

header

header is an MDBottomNavigationHeader and defaults to None.

on_tab_press(self, *args)

on_leave(self, *args)

class kivymd.uix.bottomnavigation.TabbedPanelBase(**kwargs)

A class that contains all variables a TabPannel must have. It is here so I (zingballyhoo) don’t get mad about the TabbedPannels not being DRY.

current

Current tab name.

current is an StringProperty and defaults to None.

previous_tab

previous_tab is an MDTab and defaults to None.

panel_color

Panel color of bottom navigation.

panel_color is an ListProperty and defaults to [].

tabs

class kivymd.uix.bottomnavigation.MDBottomNavigation(**kwargs)

A bottom navigation that is implemented by delegating all items to a ScreenManager.

first_widget

first_widget is an MDBottomNavigationItem and defaults to None.

tab_header

tab_header is an MDBottomNavigationHeader and defaults to None.

text_color_normal

Text color of the label when it is not selected.

text_color_normal is an ListProperty and defaults to [1, 1, 1, 1].

text_color_active

Text color of the label when it is selected.

text_color_active is an ListProperty and defaults to [1, 1, 1, 1].

on_panel_color(self, instance, value)

on_text_color_normal(self, instance, value)

on_text_color_active(self, instance, value)

switch_tab(self, name_tab)

Switching the tab by name.

refresh_tabs(self)

Refresh all tabs.

on_size(self, *args)

on_resize(self, instance=None, width=None, do_again=True)

Called when the application window is resized.

add_widget(self, widget, **kwargs)

Add a new widget as a child of this widget.

Parameters

widget: Widget

Widget to add to our list of children.

index: int, defaults to 0

Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.

New in version 1.0.5.

canvas: str, defaults to None

Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.

New in version 1.9.0.

>>> from kivy.uix.button import Button
>>> from kivy.uix.slider import Slider
>>> root = Widget()
>>> root.add_widget(Button())
>>> slider = Slider()
>>> root.add_widget(slider)

remove_widget(self, widget)

Remove a widget from the children of this widget.

Parameters

widget: Widget

Widget to remove from our children list.

>>> from kivy.uix.button import Button
>>> root = Widget()
>>> button = Button()
>>> root.add_widget(button)
>>> root.remove_widget(button)