Bottom Navigation (Python Programming)

Why This Matters

In this lesson, we will delve into creating a bottom navigation menu using Python and Tkinter, a widely-used graphical user interface (GUI) library for Python. Mastering this skill is essential for developing mobile-like applications with multiple screens or pages. By learning how to create a bottom navigation menu, you can improve the user experience of your applications by providing an intuitive and familiar interface.

Prerequisites

To follow along with this tutorial, it's important that you have a basic understanding of Python programming and are familiar with the Tkinter library. If you're new to Tkinter, we recommend going through our Python and Tkinter Tutorial before proceeding.

Core Concept

A bottom navigation menu is a common UI pattern found in mobile applications, where multiple screens or pages are accessible from the bottom of the screen. In this tutorial, we will create a simple bottom navigation menu with Tkinter that allows users to switch between different screens or tabs.

Creating the Main Window and Frames

First, let's set up the main window and frames for our application:

import tkinter as tk

def create_app():
root = tk.Tk()
root.title("Bottom Navigation Menu")
root.geometry("400x600")

container = tk.Frame(root)
container.pack(side="top", fill="both", expand=True)

menu_frame = tk.Frame(root, height=60, bg="#f5f5dc")
menu_frame.pack(side="bottom", fill="x")

return root, container, menu_frame

In the above code, we create a main window (root) and two frames: container, which will hold our content, and menu_frame, where our navigation buttons will be placed.

Creating Navigation Buttons

Next, let's add the navigation buttons to our menu frame:

def create_navigation(container):
nav_buttons = {}

for i in range(4):
button = tk.Button(menu_frame, text=f"Page {i+1}", font=("Arial", 16), command=lambda i=i: change_page(container, i))
button.pack(fill="x", expand=True)
nav_buttons[i] = button

return nav_buttons

In this function, we create four navigation buttons (you can modify the number of pages as needed). Each button is associated with a command that will change the displayed page when clicked.

Changing Pages

Now let's implement the change_page() function:

def change_page(container, page_num):
pages = {0: Page1, 1: Page2, 2: Page3, 3: Page4}
current_page = container.winfo_children()[0]

for frame in container.winfo_children():
frame.pack_forget()

page = pages[page_num]()
page.pack(fill="both", expand=True)

The change_page() function takes a page number and changes the displayed page by removing the current page from the container, creating a new page instance based on the given page number, and packing it into the container.

Creating Pages

Finally, let's create four simple pages (Page1, Page2, Page3, and Page4) that will be displayed when the user clicks on their corresponding navigation button:

class Page1(tk.Frame):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.pack(fill="both", expand=True)
label = tk.Label(self, text="Page 1")
label.pack(pady=50)

class Page2(tk.Frame):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.pack(fill="both", expand=True)
label = tk.Label(self, text="Page 2")
label.pack(pady=50)

class Page3(tk.Frame):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.pack(fill="both", expand=True)
label = tk.Label(self, text="Page 3")
label.pack(pady=50)

class Page4(tk.Frame):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.pack(fill="both", expand=True)
label = tk.Label(self, text="Page 4")
label.pack(pady=50)

Each page class inherits from tk.Frame and creates a simple label with the page number as its content.

Running the Application

Now that we have all the necessary components, let's run our application:

def main():
root, container, menu_frame = create_app()
nav_buttons = create_navigation(container)
change_page(container, 0)
root.mainloop()

if __name__ == "__main__":
main()

In the main() function, we create the application's components and start the main event loop with root.mainloop().

Worked Example

To illustrate how to create a bottom navigation menu using Python and Tkinter, let's build an example application with four pages:

1. Page 1 displays a simple message welcoming the user to the application.
2. Page 2 contains a text area where users can enter their name.
3. Page 3 shows a list of popular programming languages.
4. Page 4 provides information about the Tkinter library and its uses.

import tkinter as tk

class Page1(tk.Frame):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.pack(fill="both", expand=True)
label = tk.Label(self, text="Welcome to the Bottom Navigation Menu!")
label.pack(pady=50)

class Page2(tk.Frame):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.pack(fill="both", expand=True)
self.name_entry = tk.Entry(self, font=("Arial", 16))
self.name_entry.pack(pady=50)
submit_button = tk.Button(self, text="Submit", command=lambda: print(f"Hello, {self.name_entry.get()}!"))
submit_button.pack()

class Page3(tk.Frame):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.pack(fill="both", expand=True)
languages = ["Python", "Java", "JavaScript", "C++", "Ruby", "Swift"]
for language in languages:
label = tk.Label(self, text=language)
label.pack()

class Page4(tk.Frame):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.pack(fill="both", expand=True)
label = tk.Label(self, text="Tkinter is a popular GUI library for Python that allows developers to create graphical user interfaces easily.")
label.pack(pady=50)
other_uses = ["Data Visualization", "Scientific Computing", "Automating Tasks"]
for use in other_uses:
label = tk.Label(self, text=f"- {use}")
label.pack()

def create_app():
root = tk.Tk()
root.title("Bottom Navigation Menu")
root.geometry("400x600")

container = tk.Frame(root)
container.pack(side="top", fill="both", expand=True)

menu_frame = tk.Frame(root, height=60, bg="#f5f5dc")
menu_frame.pack(side="bottom", fill="x")

nav_buttons = {}

for i in range(4):
button = tk.Button(menu_frame, text=f"Page {i+1}", font=("Arial", 16), command=lambda i=i: change_page(container, i))
button.pack(fill="x", expand=True)
nav_buttons[i] = button

return root, container, menu_frame

def change_page(container, page_num):
pages = {0: Page1, 1: Page2, 2: Page3, 3: Page4}
current_page = container.winfo_children()[0]

for frame in container.winfo_children():
frame.pack_forget()

page = pages[page_num]()
page.pack(fill="both", expand=True)

def main():
root, container, menu_frame = create_app()
nav_buttons = create_navigation(container)
change_page(container, 0)
root.mainloop()

if __name__ == "__main__":
main()

Common Mistakes

1. Forgetting to import the Tkinter library at the beginning of the script.
2. Not defining the change_page() function correctly or not passing the appropriate arguments.
3. Failing to create page classes for each navigation button.
4. Not calling the main() function at the end of the script, preventing the application from running.
5. Incorrectly handling user input in the pages, such as forgetting to retrieve the entered name from the entry field on Page 2.
6. Forgetting to pack or grid the widgets inside the page classes, causing them not to be displayed.
7. Not properly formatting the application's layout, leading to overlapping or misaligned elements.
8. Using outdated versions of Tkinter that may cause compatibility issues with newer features or functions.
9. Ignoring best practices for writing clean and maintainable code, such as using meaningful variable names, commenting the code, and following a consistent coding style.
10. Not testing the application thoroughly to ensure it works correctly and provides a good user experience.

Practice Questions

1. Modify the example application to have five pages instead of four.
2. Change the color of the menu frame when a user clicks on a navigation button.
3. Add animations or transitions between pages when the user navigates through them.
4. Implement a method to save and load the current page number, so that the application remembers the last opened page upon restarting.
5. Add a feature to allow users to add their favorite programming languages to Page 3.
6. Create a search bar on Page 3 that filters the displayed languages based on user input.
7. Implement a function to validate the entered name on Page 2, ensuring it only contains alphabetic characters and is at least three characters long.
8. Add a help or about page to the bottom navigation menu that provides information about the application and its development team.
9. Create a settings page where users can customize the appearance of the application, such as changing the font, color scheme, or layout.
10. Implement a feature to allow users to save and load their data, like the entered name on Page 2, across multiple sessions.

FAQ

A: Yes, there are several GUI libraries available for Python, such as PyQt and wxPython. However, Tkinter is the most popular choice due to its simplicity and wide support.

Q: How can I customize the appearance of my bottom navigation menu?

A: You can change the font, color, size, and other properties of your navigation buttons by modifying the options passed when creating the tk.Button instances. Additionally, you can use external CSS files to style your application more extensively.

Q: How do I handle user input in each page of my bottom navigation menu?

A: Each page class can contain its own event handlers for user input events like clicks or key presses. You can define these event handlers as methods within the page classes and call them when the corresponding events occur.

Q: How do I create a search bar on Page 3 that filters the displayed languages based on user input?

A: To create a search bar, you can use a tk.Entry widget for user input and a function to filter