Introduction To GUI With Tkinter In Python

In this tutorial, you are going to learn how to create GUI apps in Python. You’ll also learn about all the elements needed to develop GUI apps 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

1. What Is A Graphical User Interface(GUI)

2. What Is Tkinter

3. Introduction To Tkinter

4. Tkinter Widgets

5. Geometry Management

6. Organizing Layout And Widgets

6.1 Grid

7. Binding Functions

8. Mouse Clicking Events

9. Classes

10. Drop-Down Menus

11. Alert Boxes

12. Simple Shapes

13. Images And Icons

14. Creating Calculator

15. EndNote

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.

Note:-

  • I am going to use Python 3.6 version. So, kindly update Python if you’re using below versions.
  • To install the latest version of Python in Windows go to Python Official Website then, download and install the exe file.
  • 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!.

    Steps:-

    • 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.

      Steps:-

      • 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.

      6.1. Grid

      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.