Customizing your Navigation Drawer in Kivy & KivyMD

Kivy is an open source, cross-platform Python framework for the development of applications that makes use of innovative, multi-touch user interfaces.

KivyMD is a collection of Material Design compliant widgets for use with Kivy.

Prerequisites

This tutorial is meant for those who have a little or good familiarity with Kivy but don’t know how to move forward with implementing their own widgets or for those who don’t find Kivy visually attractive.

Some really cool resources for you:

• FlatKivy
• ThemingKivy
• KivyMD
• List of Kivy Projects

Content

• KivyMD’s Navigation Drawer.
• Modify the Navigation Drawer by replacing the Title with a Circular image

Structure

Before you start, make sure that you have this file structure.
Download the files from here.

- navigationdrawer
    - __init__.py # our modified navigarion drawer.
- kivymd
    - ...
    - navigationdrawer.py
    - ...
- images # contains the image
    - me.jpg
    - main.py

Before we start let’s see how our main.py looks like.

- NavigateApp class
    - Navigator’s object
    - Theme class’s object
- Navigator class
    - NavigationDrawerIconButton

And we also have:

main.py

Now that we have seen how the Navigation Drawer looks like, let’s look at its source code.

kivymd/navigationdrawer.py

Now, NavigationDrawer class has a widget NavDrawerToolbar containing Title property. We want to add a Circular Image there.

How to achieve this? The answer is my modifying the NavigationDrawer class.

Modification in the kv lang.

Original:

Modified:

Modification on the Python side.

navigationdrawer/__init__.py

Now that we have modified our Navigation Drawer let’s test it. but before let’s make the following changes:

• Uncomment NavigationDrawer from the navigationdrawer folder
• Comment out the NavigationDrawer from the kivymd in the main.py file.

# from kivymd.navigationdrawer import NavigationDrawer
from navigationdrawer import NavigationDrawer

And here it is. Our Navigation Drawer with a circular image.

Conslusion

Thank you for reading this post — I hope you found this helpful. You can find me on GitHub, LinkedIn and CodeMentor and here. If you have any questions, feel free to reach out to me!

Want to read more?

Beginner Kivy Tutorial: Basic Crash Course for Apps in Kivy

Plyer: Platform independent compatibility layer

Texture management in Kivy using atlas

Originally published at www.codementor.io.