How to group two sets of buttons on each top corner of the screen using Tkinter?

Question

I am trying to program a GUI that will display three buttons on the top left corner and four buttons on the top right corner of the window. I attempted to do this by creating different frames: A "left" frame where i place the first of the group of buttons and where i will later add more buttons underneath. A "TopLeft corner" frame where i add the remaining two buttons of the first group. A "Topright corner" frame where i fit the first three buttons of the second group. And finally a "right" frame where i fit the final button and where i will later add more buttons as shown in the image attached.

But the problem is that the topleft and topright frames conflict and stack on top of each other, and additionally the topright frame stacks on top of the right frame, does anyone has a fix for this?

This is the current GUI:

This is what I would like to achieve:

from tkinter import *
import tkinter as tk
from tkinter import messagebox

win = tk.Tk()
width_value = win.winfo_screenwidth()
height_value = win.winfo_screenheight()
win.geometry(f"{width_value}x{height_value}+0+0")
win.resizable(False, True)
win.title("Test GUI")

leftFrame = tk.Frame(win)
leftFrame.pack(side=LEFT, anchor=N)

homeImg = PhotoImage(file="home_icon.png")
homeb = Button(leftFrame, image=homeImg, command=homeMenu, height=100, 
width=100).pack(padx=10, pady=10)

topLeftFrame = tk.Frame(win, width=200, height=100)
topLeftFrame.pack(side=TOP, anchor=W)

rgbmenuImg = PhotoImage(file="rgb_icon.png")
rgbmenub = Button(topLeftFrame, image=rgbmenuImg, command=rgbmenu, height=100, width=100)

thermalmenuImg = PhotoImage(file="thermal_icon.png")
cameraImg = PhotoImage(file="camera_icon.png")
thermalmenub = Button(topLeftFrame, image=thermalmenuImg, command=thermalmenu, height=100, width=100)

rgbmenub.grid(row=0, column=2, padx=10, pady=10)
thermalmenub.grid(row=0, column=3, padx=10, pady=10)

topRightFrame = tk.Frame(win, width=300, height=100)
topRightFrame.pack(side=TOP, anchor=E)

settImg = PhotoImage(file="settings_icon.png")
settingb = Button(topRightFrame, image=settImg, command=settings, height=100, width=100)

infoImg = PhotoImage(file="copyright_icon.png")
infob = Button(topRightFrame, image=infoImg, command=copyright, height=100, width=100)

loginImg = PhotoImage(file="login_icon.png")
loginb = Button(topRightFrame, image=loginImg, command=login, height=100, width=100)

settingb.grid(row=0, column=1, padx=10, pady=10)
infob.grid(row=0, column=2, padx=10, pady=10)
loginb.grid(row=0, column=3,padx=10, pady=10)

rightFrame = tk.Frame(win)
rightFrame.pack(side=RIGHT, anchor=N)

exitImg = PhotoImage(file="exit_icon.png")
exitb = Button(rightFrame, image=exitImg, command=quit, height=100, width=100).pack(padx=10, pady=10)

dema = Button(rightFrame, text="DEMA Intranet", command=dema_intranet).pack(padx=10, pady=10)

win.mainloop()

Answer 1

It will be much better if you use grid() geometry manager as you have much finer control over your positioning of widgets. With pack() you can mess up things pretty easily. Note that I have drawn the borders for you to realise that I have changed things a bit. You can see the Frames clearly in the picture.

import tkinter as tk
from tkinter import messagebox

win = tk.Tk()
width_value = win.winfo_screenwidth()
height_value = win.winfo_screenheight()
win.geometry(f"{width_value}x{height_value}+0+0")
win.resizable(False, True)
win.title("Test GUI")

win.grid_columnconfigure(0, weight=1)
win.grid_columnconfigure(1, weight=1)

topLeftFrame = tk.Frame(win, relief='solid', bd=2)
topLeftFrame.grid(row=0, column=0, padx=10, sticky="w")

homeImg = tk.PhotoImage(file="ex1.png")
homeb = tk.Button(topLeftFrame, image=homeImg, height=100, width=100).grid(row=0, column=0, padx=10, pady=10)

rgbmenuImg = tk.PhotoImage(file="ex1.png")
rgbmenub = tk.Button(topLeftFrame, image=rgbmenuImg, height=100, width=100)

thermalmenuImg = tk.PhotoImage(file="ex1.png")
cameraImg = tk.PhotoImage(file="ex1.png")
thermalmenub = tk.Button(topLeftFrame, image=thermalmenuImg, height=100, width=100)

rgbmenub.grid(row=0, column=1, padx=10, pady=10)
thermalmenub.grid(row=0, column=2, padx=10, pady=10)

topRightFrame = tk.Frame(win, relief='solid', bd=2)
topRightFrame.grid(row=0, column=1, padx=10, sticky="e")

settImg = tk.PhotoImage(file="ex1.png")
settingb = tk.Button(topRightFrame, image=settImg, height=100, width=100)

infoImg = tk.PhotoImage(file="ex1.png")
infob = tk.Button(topRightFrame, image=infoImg, height=100, width=100)

loginImg = tk.PhotoImage(file="ex1.png")
loginb = tk.Button(topRightFrame, image=loginImg, height=100, width=100)

settingb.grid(row=0, column=0, padx=10, pady=10)
infob.grid(row=0, column=1, padx=10, pady=10)
loginb.grid(row=0, column=2,padx=10, pady=10)

exitImg = tk.PhotoImage(file="ex1.png")
exitb = tk.Button(topRightFrame, image=exitImg, command=quit, height=100, width=100).grid(row=0, column=3, padx=10, pady=10)

leftFrame = tk.Frame(win, relief='solid', bd=2)
leftFrame.grid(row=1, column=0, padx=10, pady=10, sticky="nw")
tk.Button(leftFrame, text="Example 1").grid(row=1, column=0, pady=5)
tk.Button(leftFrame, text="Example 2").grid(row=2, column=0, pady=5)
tk.Button(leftFrame, text="Example 3").grid(row=3, column=0, pady=5)

rightFrame = tk.Frame(win, relief='solid', bd=2)
rightFrame.grid(row=1, column=1, padx=10, pady=10, sticky="ne")

dema = tk.Button(rightFrame, text="DEMA Intranet")
dema.grid(row=0, column=0, pady=5)
tk.Button(rightFrame, text="Example 4").grid(row=1, column=0, pady=5)
tk.Button(rightFrame, text="Example 5").grid(row=2, column=0, pady=5)
tk.Button(rightFrame, text="Example 6").grid(row=3, column=0, pady=5)

win.mainloop()

P.S. I had just one 50x50 "home" icon.