Kivy & KivyMD Navigation Layout Design Tutorial | Part 4

Welcome to Part 4 of our tutorial series on Kivy & KivyMD Navigation Layout Design. In this tutorial, we will be creating a Weather Android App using Kivy and KivyMD.

Novfensec Inc. is excited to bring you this comprehensive tutorial to help you learn how to design beautiful and functional navigation layouts for your Kivy apps. Let’s get started!

Step 1: Setting Up the Project

Before we begin, make sure you have Kivy and KivyMD installed on your system. If you haven’t already done so, please refer to the previous parts of this tutorial series for installation instructions.

Once you have Kivy and KivyMD installed, create a new project folder and navigate to it in your terminal. Use the following command to create a new Kivy project:

kivy init weather_app

This will create a new Kivy project with the name “weather_app.” Navigate to the project folder and open it in your favorite code editor.

Step 2: Designing the Main Screen

Let’s start by designing the main screen of our Weather Android App. We will use the NavigationLayout widget from KivyMD to create a side menu for navigation.

First, create a new file called main_screen.kv and add the following code:


<NavigationLayout>
<ScreenManager>
<Screen name="main">
<BoxLayout orientation="vertical">
<AppBar title="Weather App" navigation_drawer="nav_drawer" />
<MDLabel text="This is the main screen" halign="center" font_style="H2"/>
</BoxLayout>
</Screen>

<Screen name="second">
<BoxLayout orientation="vertical">
<AppBar title="Second Screen" navigation_drawer="nav_drawer" />
<MDLabel text="This is the second screen" halign="center" font_style="H2"/>
</BoxLayout>
</Screen>
</ScreenManager>

<MDNavigationDrawer id="nav_drawer">
<BoxLayout orientation="vertical">
<MDList>
<OneLineListItem text="Main Screen" on_press="root.ids.sm.current = 'main'" />
<OneLineListItem text="Second Screen" on_press="root.ids.sm.current = 'second'" />
</MDList>
</BoxLayout>
</MDNavigationDrawer>
</NavigationLayout>


This code will create a main screen with an AppBar at the top and a navigation drawer on the side. The main screen will display a label with the text “This is the main screen.” We have also added a second screen with a similar layout for testing purposes.

Step 3: Running the App

To run the app, create a new file called main.py and add the following code:


from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class WeatherApp(App):
def build(self):
return BoxLayout()

if __name__ == '__main__':
WeatherApp().run()


Run the app using the following command:

python main.py

You should see the main screen of the Weather App with the navigation drawer on the side. Click on the items in the drawer to switch between screens.

Conclusion

Congratulations! You have successfully created a navigation layout for a Weather Android App using Kivy and KivyMD. In the next part of this tutorial series, we will add functionality to fetch weather data and display it on the main screen. Stay tuned for more exciting updates from Novfensec Inc.