Today’s tutorial might be a short, but very important, one when it comes to making a GUI: the layout. Previously, we talked about the basics of getting started with Tkinter – creating the window, and creating a Label to display text or images. However, I found that the layout of the window needed some work as boxes and images didn’t look very organized.

So rather than teaching about Buttons or other widgets just yet, let’s get started with thinking about our interface and where things will be.

By the end of this tutorial you will learn how to create a simple and structured layout using the Frame widget, Tkinter and Python 3.


Of course, if you just want to play around with the functions in Tkinter, that’s cool. But if you have a project that you really want to make, then having a plan for where things go in the window will be more helpful in the long run.

Plan the Layout

Below is a simple idea for what kind of window we will make in this tutorial. Planning before we get started can help us think about where our widgets and frames will go.

Example of how to sketch out a GUI before trying to code.
Basic design for the photo editor. The left displays various tools and on the right is the image.

Since I am designing a photo editor, I want a large area of the GUI to be devoted to the photo. On the left, I want to create a portion to see what the original image looked like for reference. Underneath that is a menu to select the basic tools or filters to edit the image.

Frame Widget

Organizing the GUI is made possible and easier with the Frame widget. I like to think of frames as mini-windows within the parent window – they each contain their own grids so adding widgets to them is super easy. Nesting frames is even an option if you need.

Here we import Tkinter and all its functions, and set up the root window in lines 4-6. To add a frame into the root window, call the Frame widget in line 9. Let’s look at the Frame parameters. We set left_frame as part of the root window. Then, specify the height and width. It is important to not that the frames will resize to whatever has been put inside of them. For example, if I display a small label inside the frame, then the frame will adjust to the label’s size.

Next, we place left_frame in the main window using grid. Grid is another function in Tkinter to help organize widgets. You can think about grid like an Excel spreadsheet. Each “cell” has a row number and a column number. We can assign different widgets in the window by specifying the values. So the frame up above is in (row 0, column 0). The other two parameters, padx and pady, specify the amount of padding around the widget in pixels. Check out the next tutorial if you are interested to learn more.

Congrats! You have just created a simple frame. The background of the root window (sky blue) has been changed in line 6 in order to see the new frame (white). Of course, you can also change the color of the Frame widget.

Example of a frame widget in root window.
All of the white is the frame. The sky blue is the root window.

Frame in Frame

Now, let’s take a quick look at adding a frame within the larger frame. Be sure to focus on the row numbers below and see if their order makes sense.

Window that shows a frame in another frame.
Example of how to use frames.

A Few Other Features

The Frame widget also has a few other parameters that we will go over. Listed below are a few of the ones I found useful, but there are also others.

  1. bg – change the background color.
  2. bd – adjust the width of the border.
  3. cursor – change the type of cursor that appears over the frame, ‘arrow’, ‘dot’, ‘circle’.

Create a Simple GUI Layout

Of course, we want to add other frames and widgets into our window. The following is a simple example of a better organized GUI with label widgets. While it is not aesthetically pleasing yet, it is functioning properly.

The code above has been commented to make things clearer. Take a look at the pictures below and you will notice how the frame is scaled by the size of the widgets within it.

A few things to note: to use a different image to display, change the file name in line 19. The subsample function in line 20 reduces the scale of the image by only using every x and y number of pixels. So, it will reduce the image by skipping pixels.

Example of GUI with forest image.
Example of GUI with forest image.
Example of GUI with Pikachu image.
Example of GUI with Pikachu image.

Summary

Using the Frame widget is a great way to establish a layout for our GUI. When creating the layout, you should be aware of which geometry manager you want to use – pack, grid, or place. In the next tutorial, we will go over these three methods and understand when to use them. We will also learn about a new widget – Buttons.

References

The Tkinter Frame Widget – Good site to begin learning basics of Tkinter

Leave a Reply

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