How to Create Tkinter Progress Bar and DropDown

In this article I will show you step by step how you can add a progress bar and a dropdown widget to you user interface developed using Tkinter. This article has two parts. First I will explain you how to create a window and add the dropdown. And how to add a callback, so the interface reacts if the user changes the dropdown. In the second part, I will demonstrate how to add a progress bar using Tkinter. Let’s get started.

Check out the youtube video tutorial for this article

Install Tkinter

The Tkinter module is a built-in module, therefore you don’t need to install it. You can just import the module in your python file and use it.

Create a Tkinter Window

First I will create an empty window. Here is the code to create a window of size 200 by 200:

from tkinter import Tk

class App(Tk):
    def __init__(self):
        super().__init__()  # Create the window
        self.geometry('200x200') #Resize

app = App()
app.mainloop()

What is this code exactly doing? I have created a class that inherit from Tk. The Tk class contains all the graphical functionality to create a window. In the constructor method, __init__ I will call the constructor of the super class. That will create the window.

Then I have resized the window to 200 by 200 using the .geometry() method.

You can paste this code into IDLE or PyCharm, run it, and you will get your window created. Let’s move on to the next step, adding a dropdown.

Add Tkinter DropDown

Now I m gonna show you how to add a dropdown like the one below. The dropdown allows you to select the gender, Male or Female. You can change these options to anything, and add as many options as you like.

Here is the code to add the dropdown widget. I have placed the new piece of code between ##, just to mark the new piece of code added.

from tkinter import Tk, OptionMenu,StringVar

class App(Tk):
    def __init__(self):
        super().__init__()
        self.geometry('200x200')

        #NEW: Adding the dropdown ##
        self.gender_selected = StringVar()
        self.gender_selected.set("Select Gender")
        self.dropdown = OptionMenu(self, self.gender_selected, *["Male", "Female"])
        self.dropdown.grid(row=0,column=1)
        ###########################

app = App()
app.mainloop()

Code Explanation

What is this code doing? First I have created a variable that will hold the value selected in the dropdown, called gender_selected, see lines 9 and 10. If you select a different dropdown value, it will be saved in this variable.

Next, I have created the dropdown widget using the OptionMenu class. Lines 11 and 12. Please note that you need to import this class to use it, otherwise you will get a syntax error when trying to run the program. The OptionMenu class takes three parameters: the window that will contain the widget, the variable that holds the widget value, and a list with the dropdown option.

Next I have specified where in the window I want to place the dropdown, using the .grid() method. This is an important step, if I forget to add this, the widget won’t be displayed.

Find out how to trigger an action when the dropdown selected value changes

Add tkinter progess bar to your app

I hope you enjoy the tutorial and thank you so much for reading! Happy Coding! :)