Python series part 15: Mastering Widget Placement with Tkinter’s place Method

[Jarret B]

In this article, we will cover another method to place objects in a window called ‘place’.

Using ‘place’, we can specify where we place an object in the window.

There are two methods to do this:

1. Absolute
2. Relative

Absolute

We use X and Y coordinates to place a widget in a specific spot. The X axis is horizontal while the Y axis is vertical. The top left of the window, not counting the title bar, is position ‘0,0’.

So the code to do this is:

from tkinter import *
root = Tk()
root.title('Place Method')
root.geometry("400x500")

l1 = Label(text="Label1").place(x=100,y=75)

root.mainloop()

In this example, shown in Figure 1, we have a window that has a size of ‘400x500’ and we place a label at the position ‘100,75’.

FIGURE 1

Instead of using the method ‘pack’, we use ‘place’ and specify the x and y coordinates. By resizing the window, the objects do not move.

In this method, it is possible to overlap objects, so you need to check placement.

Relative

With relative positioning, we can specify the placement of an object by the window itself.

The code is:

from tkinter import *
root = Tk()
root.title('Place Relative Method')
root.geometry("400x500")

l1 = Label(text="Label1").place(relx=.75,rely=.75)

root.mainloop()

Here, we are placing the label at a position that is 75% along the x axis and 75% along the y axis for the size of the window.

If you resize the window, the label stays in the relative position of 75% in both axes.

The values are ‘0.00’ to ‘1.00’, but at ‘1.00’ the object will be at the bottom right corner of the screen and not visible.

Width and Height

When using ‘pack’, we saw the Label object has a height and width of the text within it.

l1 = Label(text="Label1", bg="blue").place(x=100, y=100, width=70, height=50)

I added the background (bg) color of blue to make the label more visible. You can see the output in Figure 2.

FIGURE 2

For a Label object, this may not be too useful, but other objects have a more defined outline and will be more visible and useful.

As we saw before, we can set a position as absolute or relative. With ‘height’ and ‘width’, we can do the same.

Relative Width and Height

We can set the ‘relative height’ and ‘relative width’ of an object according to its parent container. In the examples we’ve used, this has been the whole window.

So, let’s try:

from tkinter import *
root = Tk()
root.title('Place Relative Width-Height Method')
root.geometry("400x500")

l1 = Label(text="Label1", bg="blue").place(x=100, y=100, relwidth=.70, relheight=.50)

root.mainloop()

In Figure 3, you can see the output.

FIGURE 3

You should be able to see that the top left corner of the label is at ‘100,100’ and the width of the label is 70% of the window. The height of the label is half of the window’s height.

When using relative measurements, the values are from ‘0.00’ to ‘1.00’. Using ‘0.00’ would be of no size and ‘1.00’ would be the full size of the window for either height or width.

Anchor​

We can anchor an object to the cell based on a compass:

The positions are based on the compass and there are nine positions:

1. n - North (top center)
2. s - South (bottom center)
3. e - East (right center)
4. w - West (left center)
5. ne - North East (top right center)
6. nw - North West (top left center)
7. se - South East (bottom right center)
8. sw - South West (bottom left center)
9. center - center of the screen

Unlike in ‘pack’, the ‘place’ method will allow cells in the same row. Whenever we use the ‘place’ method, we must specify either ‘x’, ‘y’ or ‘relx’, ‘rely’. The code is as follows:

from tkinter import *
root = Tk()
root.title('Place Anchor')
root.geometry("400x500")

l1 = Label(text="NW").place(relx=0,rely=0,anchor=NW)
l2 = Label(text="North").place(relx=.5,rely=0,anchor=N)
l3 = Label(text="NE").place(relx=1,rely=0,anchor=NE)
l4 = Label(text="West").place(relx=0,rely=.5,anchor=W)
l5 = Label(text="Center").place(relx=.5,rely=.5,anchor=CENTER)
l6 = Label(text="East").place(relx=1,rely=.5,anchor=E)
l7 = Label(text="SW").place(relx=0,rely=1,anchor=SW)
l8 = Label(text="South").place(relx=.5,rely=1,anchor=S)
l9 = Label(text="SE").place(relx=1,rely=1,anchor=SE)

root.mainloop()

The output is shown in Figure 4.

FIGURE 4

As when using relative positioning, you can resize the window and the labels will remain in their place.

You may have noticed that placing the label is by the ‘relx’ and ‘rely’ parameters and not specifically by using the ‘anchor’ parameter. The anchor is placing the object within the cell. This will be more apparent in the article for ‘grid’.

Conclusion

You should be able to see how the ‘Place’ method is a little better than the ‘Pack’ method for placing objects.

Using ‘Place’ gives you a finer change of locations of ‘cells’ so you can make your Graphical User Interface (GUI) much nicer looking.