Today we are going to take a more detailed look at creating UI in Tkinter and Python and understanding how to arrange widgets with the grid layout manager.

In previous tutorials we talk about designing your UI layout. If you are interested, check out:

So for this post, I really want to just jump right and help you to see more examples of designing UI with Tkinter.

Grid Layout Manager

I personally think that using the grid layout manager is the easiest manager out of the three managers that Tkinter has. The reason is because it works similar to a matrix, with rows and columns. The upper left-most corner has row value 0 and column value 0. So moving around the grid and placing widgets is quite simple. If you want to place widgets in a horizontal row, then the row value stays the same and the column value increases by 1 for each widget. It is similar if you want to move down a column, with the column value staying the same. Check out the image below for a visual example.

Graph showing how the grid layout manager works in Tkinter.
How the grid layout manager works in Tkinter.

Notice above how each widget can be positioned within ‘cells’ by specifying their row and column values. Widgets can also span across multiple rows or columns.

Grid Parameters

Now let’s look at some of the main parameters that can help you arrange widgets using the grid layout manager.

  • row, column – the row and column values for the location of the widget. Both start from 0.
  • columnspan, rowspan – Specify how many columns or rows a widget will be in. This is very useful to help get the spacing right for your widgets.
  • padx, pady – the number of pixels surrounding the widget to create a padding between other widgets, for horizontal or vertical padding.
  • ipadx, ipady – how many pixels to use for padding inside the widget, also for horizontal or vertical padding.
  • sticky – specify a value of s, n, e, w, or a combination of them, e.g. nw, ne, sw, or se. The parameter tells which side of the ‘cell’ the widget will ‘stick’ to . If you use ‘w’+’e’+’n’+’s’, then the widget will fill up the ‘cell’. Default is to center the widget within the ‘cell’.

Simple Example Using Grid

The following is just a simple example to see how to set up our window and use grid. In the following GUI, we combine Label, Checkbutton, and Button widgets to survey which of the colors people like.

Example Tkinter UI using grid 
Survey that asks which colors do you like?

Let’s see what the code looks like:

First we start off by importing Tkinter and setting up the root window in lines 2 – 6. The display_checked function is used with the Checkbuttons to see which boxes have been selected. The get() function checks if the boxes have been selected, and if so, they return the value of ‘1’ for selected, if not ‘0’. We create a Label to display our question in line 20. Notice how in line 21 grid is used to place the label in the window. The row parameter is set to 0, but is not necessary, in this case, for the first widget. This is because the default values for grid are row=0, column=0. Also, I don’t include the column parameter because we only have one column in this UI.

Then, we set about creating the four Checkbuttons for each color from lines 24 – 31. And finally the last two Buttons, Tally and End. The tally Button calls the display_checked function and prints which colors you selected to the terminal. Notice how for each widget the row value increases by 1 in order to place it in the next row and under the previous widget.

Output for Tkinter UI, shows which colors the user selected.
Output of display_checked function if yellow and green are checked.

Let’s take a look at another UI that is a bit more difficult.

Profile Entry UI with Grid

Whenever you create a new account it is very important to enter your personal information so that the system can keep track of you. For the next GUI, we will focus on using grid to create an interface for the user to enter some of their personal data. The following UI uses Label, Entry, and Menu widgets.

Profile Entry UI using Grid and Tkinter. Includes user image, name, gender, eye color, height and weight entry fields.
Fill out your personal information.

Since this tutorial focuses on creating UI in Tkinter with grid, the widgets in the above window are not completely functional. I wanted to focus on helping you to understand how to layout your widgets. You could add more functionality by allowing the user to select an image, or saving the user’s information after they finish entering it.

We start again by loading the Tkinter module, creating the root window, and creating a Label widget to hold the profile image of the user. Let’s look at line 14 to see how to set up the image in the root window. The image is located in row=0, column=0, but it does not appear to be arranged in the top left-most corner. This is due to the next parameter, rowspan, that allows the widget to spread across multiple rows. This can help to better align widgets. Here rowspan=6 because all of the data entry widgets on the right span across six rows.

In lines 17 and 18, we create a Label widget to let the user know what to do in this window. The enter_info widget is still in row=0, but notice how we have moved over one column by setting column equal to 1. This widget also spans four columns using columnspan=4.

I won’t go over all the widgets, but instead leave them to you to see how you can use grid to arrange widgets.

Summary

In today’s tutorial we take a more detailed look at using the grid layout manager to create UI in Tkinter. First, we looked at a few of the parameters that can help to manipulate the layout of our GUI. Then we built two GUIs to help practice the concepts of layout management with grid.

If you have any comments or questions, please drop a line in the comments section. Also, if you have any ideas for future tutorials using Tkinter or Python, please let me know. I would love to help!

Twitter
Visit Us
Facebook
LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *