Explanation on the tkinter layout settings to use to position to buttons side by side properly

user_8324480 0
Viewed 54

For the first time, I need to use tkinter for a very small and simple GUI. I am trying to create a window with 2 buttons placed side by side. If I was to use matplotlib widgets, I would do:

from matplotlib import pyplot as plt
from matplotlib.widgets import Button

fig = plt.figure(figsize=(5, 2))

# Start button
start_button_ax = fig.add_axes([0.1, 0.2, 0.3, 0.6])
start_button = Button(start_button_ax, 'Start MML', color='lightgoldenrodyellow', hovercolor='0.975')
def start_button_on_clicked(mouse_event):
    pass
start_button.on_clicked(start_button_on_clicked)

# Stop button
stop_button_ax = fig.add_axes([0.6, 0.2, 0.3, 0.6])
stop_button = Button(stop_button_ax, 'Stop MML', color='lightgoldenrodyellow', hovercolor='0.975')
def stop_button_on_clicked(mouse_event):
    pass
stop_button.on_clicked(stop_button_on_clicked)

Result:

Matplotlib GUI

Very simple stuff. With tkinter, I have been struggling for the past hour trying to move around and resize the 2 buttons. Here is my current code:

import tkinter as tk

def start():
    global running
    running = True

def stop():
    global running
    running = False
    
windowWidth = 200
windowHeight = 100
    
root = tk.Tk()
root.title("Minimum Masking Level")
root.geometry(f'{windowWidth}x{windowHeight}+{int(root.winfo_screenwidth()/2 - windowWidth/2)}+{int(root.winfo_screenheight()/3 - windowHeight/2)}')

start = tk.Button(root, text="Start counting", command=start)
start.place(x=20, y=20)
stop = tk.Button(root, text="Stop counting", command=stop)
stop.place(x=110, y=20)
root.mainloop()

I tried using .config(width=, height=) to resize the button.. but that was clearly not the way to go. Could someone help me produce the desired output and explain a bit how the Tkinter coordinate system/positioning/resizing of widgets work?

Edit following comments: Trying to add width and height at the creation of the button:

start = tk.Button(root, text="Start counting", command=start, width=70, height=60)
start.place(x=20, y=20)

Output:

bad output

Yet the window should have a width of 200 and height of 100. 20 + 70 should easily fit.

python-3.x tkinter user-interface python
2 Answers

Look at this:

import tkinter as tk

def start():
    global running
    running = True

def stop():
    global running
    running = False
    
windowWidth = 200
windowHeight = 100
    
root = tk.Tk()
root.title("Minimum Masking Level")
root.geometry(f'{windowWidth}x{windowHeight}+{int(root.winfo_screenwidth()/2 - windowWidth/2)}+{int(root.winfo_screenheight()/3 - windowHeight/2)}')

start = tk.Button(root, text="Start counting", command=start)
start.pack(expand=True, fill="both", padx=5, pady=10, side="left")
stop = tk.Button(root, text="Stop counting", command=stop, width=50, height=2)
stop.pack(expand=True, fill="both", padx=5, pady=10, side="right")
root.mainloop()

Also try changing the values for padx/pady. The documentation is here. You can change the size of the text inside the button by putting font=("", <size as in>) inside the button definition.

user_111068010

Take a look here, because using grid() is more accurate, because if you have more than one widget, it will get hard to understand what to do. With grid its just rows and columns:

start_b = tk.Button(root, text="Start counting",command=start)
start_b.grid(row=0,column=0,padx=20)

stop_b = tk.Button(root, text="Stop counting", command=stop)
stop_b.grid(row=0,column=1,padx=20)

If you are wondering why some of the button is cut out, it is because you are setting your own geometry to window and it is smaller than that of the buttons. Anyway notice that I renamed your buttons to not be as same as the function name, as it might cause issues later. padx adds some space to both the sides along x axis to the widget. Similary, there is pady too. Also there is ipady and ipadx which is to give space inside the widget or make it grow in size.

user_133820000
Related