Login UI with Red Huli logo, blue background. Example UI created with Tkinter and Python
Login UI created using Tkinter and Python.

In today’s post, we will take a look at how to make a login UI just like the one above. Today’s tutorial will focus on how to build the UI using Tkinter and Python and how to use the pack layout manager.

Designing the UI

What is a layout manager? When you create graphical interfaces the widgets in the window must have a way to be arranged relative to each other. For example, placing widgets can be accomplished using their relative positions to other widgets or by defining their positions by specifying pixel locations. In Tkinter there are three types of layout managers – pack, place, and grid. Each manager uses a different method to help us arrange widgets. To find out more about the differences between the three methods, please check out this post.

Layout for login UI, turquoise background
Layout of login UI created in this tutorial using Tkinter.

Login UI is everywhere, on your phone, computer, at the bank, and more. It is essential to gather users’ information and check if the input matches data which is already in the system.

Take a look at the image of the login UI above. We’ll need to create a label to display the text “Login”. Then, add the user’s personal image. Next are the fields where they can enter their username, password and check a box if they want they want the computer to remember their information for the next time. Since it is beyond the scope of this tutorial, the Forgot password link is simply a placeholder.

Pack Layout Manager

So what is pack? The simplest way to think about it is that the pack method turns each individual widget into a block. Each widget has its own size and the pack manager fits them all together just like you would do with real blocks.

Each widget already has its own size and parameters. Of course, you can change these to better fit your needs. Once every widget’s size is determined, the manager does its job to arrange them in the window.


Let’s take a moment to learn some of the basics of the pack layout manager. With pack, the manager stacks widgets on top of each other vertically like blocks. Of course, you can also achieve a horizontal layout by changing the side parameter to left or right. You can also change the height, width, and locations of the widgets. Some of pack‘s more useful parameters are listed below:

  • side – specify the general location of the widget in the window, arguments are top, bottom, left, right (default is top).
  • fill – which directions you want the widget to fill in the parent window, can choose xy directions, or both
  • 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
  • expand – set to True if you want the widget to stretch if the parent window expands. Default is False
  • anchor – where the widget is placed in the parent widget, specified by  n, s, e, w, or some combination of them. Default is center.

Create a Simple UI with Pack

Pack is very useful for general case GUIs. Below is a simple example of how to create a UI and arrange widgets in the window.

First, let’s import the Tkinter module and create the main root window in lines 2 – 8.

Example of how pack can arrange widgets.

In lines 10 – 11, we create the first Button widget. Notice how the widget is arranged on the left of the window using the side=”left” parameter in line 11. Next let’s see what happens if we want to place widgets on the right (lines 14 – 17). Here we arrange two Labels using side=”right”. Notice how we place label2 to the right of label1. In order to place label2 under label1 you would need to create a Frame widget to contain them. Keep in mind that if you use pack with a complex GUI your code can get more complex, as well. An example of this can be seen below with the login UI.

Finally, let’s look at the Checkbutton on the bottom. Pack automatically centers widgets in their respective areas. Changing the anchor value to ‘w’ can help to move the checkbox to the left a little bit.


Creating the Login UI

Now let’s get to the login UI! The following is the entire code for the GUI.

Pack works best for simple layouts. The login UI consists mostly of a few vertical widgets stacked on top of each other. So this is a perfect opportunity to experiment with pack.

Begin by setting up the root window, its size and background color. Then the first two widgets, the login Label and user image, are created and placed in root. These two are the easiest since they are simply two widgets arranged vertically.

For the username, password and Remember me areas, these are a little more complex. Because they are each two different widgets set horizontally from one another, AND because we already have the login and image widgets arranged vertically, we need to create a Frame widget for each one. These Frames will also be stacked under the widgets we already created. Each Frame will hold two widgets.

Let’s take a look at the first one. In line 39, we create the username_frame that will contain both the ‘username’ text and the Entry widget for usernames to type in their name which we create in lines 42 – 44. Notice how the side parameters are ‘left’ and ‘right’ to arrange them horizontally in username_frame. The other two areas we create in a similar fashion. I won’t include their description here since it is similar.

After the user types in their information and clicks the GO! button, we call checkInput (lines 19 – 31) to check if the information entered by the user matches what is already stored in our program on lines 21 and 22. If they match, then window closes by calling root.destroy().

Summary

In this tutorial, we look at how to use the pack method by creating two separate UIs. We also look at the how to arrange widgets in both simple and slightly more complex layouts.

Of course there are still tons of ways to improve the look and functionality of this UI. For one thing, you could actually allow the user to create their own username and password, and write that information to an output file. Another thing you could do is allow the UI to store the user’s information using the Remember me checkButton. Also, you could change the Forgot password Label into a link that redirects the user to a new page. Furthermore, you could let the user select their own image for their profile by searching for a file on their computer.

Twitter
Visit Us
Facebook
LinkedIn

Leave a Reply

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