By the end of this tutorial, you will be able to build a screen like this.
Step 1: Screen Title
Firstly, we want to settle the screen title that we purposely leave empty in main.kv in the Tutorial 01. Go to main.kv, add the following code above the Navigation Layout. Note: you can also add right_action_items if you want to.
MDToolbar :
id: titlename
title : 'Sg Transport'
left_action_items : [["menu", lambda x : nav_drawer.toggle_nav_drawer()]]
md_bg_color: app.theme_cls.primary_color
elevation : 8
pos_hint: {"top": 1, "left": 1}
size_hint: 1, .1
Step 2: Add Navigation Drawer in main.kv
toggle_nav_drawer() will trigger the navigation drawer function inside the MDNavigationDrawer. We can add the MDNavigationDrawer under the NavigationLayout of main.kv, under the same level as Screen Manager.
MDNavigationDrawer :
id : nav_drawer
BoxLayout :
orientation : 'vertical'
spacing : '8dp'
padding : '8dp'
ImageButton:
id: profile
source: app.img_source_path
canvas.before:
Color:
rgb: app.theme_cls.primary_color if self.state == 'normal' else utils.get_color_from_hex("#6C5B7B")
Rectangle:
size: self.size
pos: self.pos
on_release:
nav_drawer.toggle_nav_drawer()
app.change_screen("profilephoto_screen", direction='right', mode='push')
MDLabel :
text : 'Profile Picture'
font_style : 'Subtitle1'
size_hint_y : None
height : self.texture_size[1]
MDLabel :
text : 'Welcome to My Singapore Transport Tracking App!'
font_style : 'Caption'
size_hint_y : None
height : self.texture_size[1]
ScrollView :
MDList :
OneLineIconListItem :
text : 'Change Theme'
on_release:
app.show_theme_picker()
nav_drawer.toggle_nav_drawer()
IconLeftWidget:
icon: 'pencil'
OneLineIconListItem :
text : 'Favourite'
on_release:
app.go_to_favourite_bus()
nav_drawer.toggle_nav_drawer()
IconLeftWidget:
icon: 'star'
Step 3: In order to use the hex color we have to import the following in the main.kv
#:import utils kivy.utils
Step 4: Add empty.jpg
You can download from my GitHub repository or look for a picture yourself. I am using size 500px X 400px JPG file.
https://github.com/MarcusChong123/MyTransportApp
Step 5: In the main.py, add os.path of image under MainApp
In Tutorial 28, we will create a profilephoto manager which allows you to select the profile image from your device and save the path of the image in a text file called “profile_source.txt”. For now we will just use empty.jpg.
if os.path.isfile("profile_source.txt"):
with open("profile_source.txt", "r") as f:
some_path = f.read()
if len(some_path) > 0:
img_source_path = some_path
else:
img_source_path = "empty.jpg"
else:
img_source_path = "empty.jpg"
Step 6: import os
import os
Youtube Video: