Introduction To GUI With Tkinter In Python
Hi, Welcome to your first Graphical User Interface(GUI) tutorial with Tkinter in Python. In this tutorial, you will learn how to create GUI apps in Python using the Tkinter module.
You should be familiar with the Python to learn Tkinter. If you don’t know how to code in Python, I recommend you to take this free Datacamp Python Course.
You can also read the Python Official Documentation if you want.
Table Of Contents
10. Drop-Down Menus
11. Alert Boxes
12. Simple Shapes
13. Images And Icons
1. What Is A Graphical User Interface(GUI)
GUI is a desktop app which helps you to interact with the computers. They are used to perform different tasks in the desktops, laptops, other electronic devices, etc.., Here, we mainly talking about the laptops and desktops.
- GUI apps like Text-Editors are used to create, read, update and delete different types of files.
- GUI apps like Sudoku, Chess, Solitaire, etc.., are games which you can play.
- GUI apps like Chrome, Firefox, Microsoft Edge, etc.., are used to surf the Internet.
They are some different types of GUI apps which we daily use on the laptops or desktops. We are going to learn how to create those type of apps.
As this is an Introduction to GUI, we will create a simple Calculator GUI app.
2. What Is Tkinter
Tkinter is an inbuilt Python module used to create simple GUI apps. It is the most commonly used module for GUI apps in the Python.
You don’t need to worry about installation of the Tkinter module as it comes with Python default.
- I am going to use Python 3.6 version. So, kindly update Python if you’re using below versions.
- To install Python 3.6 Ubuntu follow this link Install Python 3.6 in Ubuntu
- To install the latest version of Python in Windows go to Python Official Website then, download and install the exe file.
- Go to Python Official Download Page, download Mac OS X and install in your machine.
- Follow this tutorial along with the practice so, that you can understand it very quickly.
- Don’t copy the code. Try to write by modifying it as you like.
3. Introduction To Tkinter
Run the following code to create a simple window with the text Hello World!.
- import the module tkinter.
- Initialize the window manager with the tkinter.Tk() method and assign it to a variable window. This method creates a blank window with close, maximize and minimize buttons.
- Rename the title of the window as you like with the window.title(title_of_the_window).
- Label is used to insert some objects into the window. Here, we are adding a Label with some text.
- pack() attribute of the widget is used to display the widget in a size it requires.
- Finally, the mainloop() method to display the window until you manually close it.
import tkinter window = tkinter.Tk() # to rename the title of the window window.title("GUI") # pack is used to show the object in the window label = tkinter.Label(window, text = "Hello World!").pack() window.mainloop() That's a basic program to create a simple GUI interface. You will see a similar window like this.
4. Tkinter Widgets
Widgets are something like elements in the HTML. You will find different types of widgets to the different types of elements in the Tkinter.
Let’s see the brief introduction to all of these widgets in the Tkinter.
- Button:- Button widget is used to place the buttons in the tkinter.
- Canvas:- Canvas is used to draw shapes in your GUI.
- Checkbutton:- Checkbutton is used to create the check buttons in your application. You can select more than one option at a time.
- Entry:- Entry widget is used to create input fields in the GUI.
- Frame:- Frame is used as containers in the tkinter.
- Label:- Label is used to create a single line widgets like text, images, etc..,
- Menu:- Menu is used to create menus in the GUI.
I mentioned only some of the widgets that are present in Tkinter. You can find the complete list of widgets at official Python documentation.
5. Geometry Management
All widgets in the tkinter will have some geometry measurements. These measurements give you to organize the widgets and their parent frames, windows, etc..,
Tkinter has the following three Geometry Manager classes.
- pack():- It organizes the widgets in the block, which mean it occupies the entire available width. It’s a standard method to show the widgets in the window
- grid():- It organizes the widgets in table-like structure. You will see details about grid later in this tutorial.
- place():- It’s used to place the widgets at a specific position you want
6. Organizing Layout And Widgets
To arrange the layout in the window, we will use Frame, class. Let’s create a simple program to see how the Frame works.
- Frame is used to create the divisions in the window. You can align the frames as you like with side parameter of pack() method.
- Button is used to create a button in the window. It takes several parameters like text(Value of the Button), fg(Color of the text), bg(Background color), etc..,
Note:- The parameter of any widget method must be where to place the widget. In the below code, we use to place in the window, top_frame, bottom_frame.
import tkinter window = tkinter.Tk() window.title("GUI") # creating 2 frames TOP and BOTTOM top_frame = tkinter.Frame(window).pack() bottom_frame = tkinter.Frame(window).pack(side = "bottom") # now, create some widgets in the top_frame and bottom_frame btn1 = tkinter.Button(top_frame, text = "Button1", fg = "red").pack()# 'fg - foreground' is used to color the contents btn2 = tkinter.Button(top_frame, text = "Button2", fg = "green").pack()# 'text' is used to write the text on the Button btn3 = tkinter.Button(bottom_frame, text = "Button2", fg = "purple").pack(side = "left")# 'side' is used to align the widgets btn4 = tkinter.Button(bottom_frame, text = "Button2", fg = "orange").pack(side = "left") window.mainloop()If you run the above code, you will get the output something similar to the following.
Grid is another way to organize the widgets. It uses the Matrix row column concepts. Something like this.
2 x 2 Matrix
0 0 0 1 1 0 1 1
See the below example to get an idea of how it works.
import tkinter window = tkinter.Tk() window.title("GUI") # creating 2 text labels and input labels tkinter.Label(window, text = "Username").grid(row = 0) # this is placed in 0 0 # 'Entry' is used to display the input-field tkinter.Entry(window).grid(row = 0, column = 1) # this is placed in 0 1 tkinter.Label(window, text = "Password").grid(row = 1) # this is placed in 1 0 tkinter.Entry(window).grid(row = 1, column = 1) # this is placed in 1 1 # 'Checkbutton' is used to create the check buttons tkinter.Checkbutton(window, text = "Keep Me Logged In").grid(columnspan = 2) # 'columnspan' tells to take the width of 2 columns # you can also use 'rowspan' in the similar manner window.mainloop()You will get the following output.