Custom Titlebar Hack! - Python Tkinter GUI Tutorial 188
HTML-код
- Опубликовано: 21 июл 2024
- In this video I'll show you a quick hack to customize your Titlebar in Tkinter with Python.
Tkinter doesn't come with the ability to customize your titlebar built into it. We'll have to get creative and hack around a bit to create a custom title bar.
We'll create a titlebar that we can change the color. We'll also add the ability to drag and drop the app to move it around the screen by clicking and dragging and dropping the titlebar.
#tkinter #codemy #JohnElder
Timecodes
0:00 - Introduction
1:10 - Remove The Windows Titlebar
2:01 - Create Close Button
3:13 - Create A Fake Titlebar
4:22 - Add Titlebar Label
6:04 - Drag Drop Binding On Titlebar
8:58 - Add Close X To Titlebar
10:43 - Add Border To X On Titlebar
11:25 - Bind X To Close App
12:10 - Conclusion
▶️ Watch Entire Tkinter Playlist ✅ Subscribe To My RUclips Channel:
bit.ly/2UFLKgj bit.ly/2IGzvOR
▶️ See More At: ✅ Join My Facebook Group:
Codemy.com bit.ly/2GFmOBz
▶️ Learn to Code at Codemy.com ✅ Buy a Codemy T-Shirt!
Take $30 off with coupon code: youtube1 bit.ly/2VC9WUN
▶️ Get The Code
bit.ly/3sIOfRp
Eagerly waited for this one 🔥
Nice!
I was looking for the option to change default logo of tkinter.. finally you solved my problem..
Thank you
You don't need this to do that, I literally change the icon in every video with one line of code
wow it's incredible... I really like these videos!!!
Glad you like them!
If you remove the title bar, can you still resize the windows of the app by click traging on the side of the app?
Hi John. Thank you very much for your tutorial. How can we prevent the overrideredirect window disappearing when it lost focus??
There is a way, make the main loop window invisible (wm_attributes('-alpha', 0)) then have your actual window be a Toplevel window. To make sure the toplevel is always shown when opening use grab_set() on the toplevel window.
The only thing missing here is controlling the alt-tab behaviour. With this method you have to alt-tab twice to switch to the next window
Thanks so much John!
Very welcome!
Could you please do a tutorial on how to make a custom minimise button as well? I know you cant do it with overrideredirect, but is there another way to do it so as to incorporate the minimise button?
maybe this funct closebtn = button(fake_title_bar_frame,text="X"width=12,height=10,command= root.destroy) closebtn.pack()
@@blacksaiko6309 bruther thats just closing the window again, he means minimalise like a the - in a regular window
A question ?
how to convert tkinter GUI wth database?
if i convert tkinter GUI in EXE file does it require database software to install?
i want to install it on difrent system which has no python no sql and want to use it for managing data of my daily work.
can u guide how to do it?
I became pure fan of you
Overrideredirect removes the application icon from the taskbar but I want to make the icon visible on the taskbar which would be easy for minimizing and restore. It would be helpful if there's a solution.
Yes same is happening with me don't know what to do...........
Yes, what should i do to make it shown 😭
Thanks you for this. Can you also teach us on custom scrollbar on tkinter?
Thanks John!
Sure thing
you diserve a big thumbs up
Thanks!
How would you code the minimize and maximize buttons (U+1F5D6 &U+1F5D5) you left the most important part out!!
Hello, Great Tutorial as ever, though i am wondering if there is any way for the window to move with the current mouse posistion and not from the top right corner?
You Want The Window To Move With The Mouse? If so yes there is a way. Respond and I will tell you.
@@tiffanyeubanks598 I wanna know
*i know*
first make an 'offset' variable set to (0, 0)
offset = (0, 0)
then make a new binding
root.bind('', set_offset)
then define 'set_offset' at the beginning of your code:
def set_offset(e):
global offset
offset = (e.x, e.y)
then modify 'move_app' to this:
def move_app(e):
root.geometry('+{e.x_root-offset[0]}+{e.y_root-offset[1]}')
@@epcg2media Thank you so much for this tutorial, I tried it and it works. just for anyone else who wants to use this method, for some reason it overrides the x button label made in the video and you will need to make the x into an actual button instead.
@@r.n.g.8587 yw
is it possible to bind the cursor to the center of the title bar? when i want to move the app around my cursor is placed at the top left corner.
Did You resolve it?
@@danico8210 I remember i did somehow fix it, but it was very laggy. i switched to another language etc now to get rid of these whole compromises. so sry i can‘t help you! 😓
@@yaaqez
SteppY asked above and got a working solution by @EPCG2 Media
i know i am a year late, but i fixed it by subtracting x by 250
def move_app(self, e):
self.root.geometry(f'+{e.x_root - 250}+{e.y_root}')
so let's say I want a custom menu bar with the custom title bar how would I do it? or should I just literally make one from scratch?
yeah scratch
Sir i had a question. What would you recommend me to learn kiwi or pyqt5?
Depends on why you need it.
In idle, in order to expand your frame u should set pack_propagte(False) so that it doesn't resize your frame to the size of its children.
BTW thanks for the video 🙏
Idle has nothing to do with it...
i love you john
Ha thanks!
thank you so much :)
welcome!
Wow, 100iq move there.
:-)
i lost on the most important part, the icon haha, can anyone please help using the same example of the video ?
Dear John,
Does Python program with Tkinter GUI framework support touch screen operation design ?
And, Can it support Android app(*.apk) conversion ?
Thanks.
No
@@Codemycom
Thanks for your reply.
My purpose is to support Android apk and touch screen operation.
Which GUI framework did you suggest to use ?
PyQt, or Kivy ? Cause you have their tutorial videos both.
Hope to have your advice, then follow your tutorial material.
Thanks again.
@@user-if1ql1do5k kivy is primarily used for android apps, it is touch screen by default
can you round the edges of the screen - and make images into buttons
for the image button - search up "tkinter PhotoImage buttons"
Useful 🎉🎉
Thank you 🙂
Thanks..... we are waiting for socket programming. (How to send data to MYSQL to a another pc as a server)
What if I have already created a window using pygame can I still use tkinter to customize the title bar
I might be too late for this, but how would you make it so that you can resize the window?
The code for that is root.geometry("size here x size here")
@@yndirahernandez7227 yes I know but what about the window edges at runtime
how do you make background cover the top bar?
You remove the top bar.
can you do a tutorial on any other gui package/module please? I'm getting bored with tkinter and need something which looks better! Thanks
LOL I do Tkinter just on Tuesday. On Monday I do Kivy, and on Thursday I do Pyqt5. They are gui packages.
What is the code for the minimize bc i get Error: can't iconify ".": override-redirect flag is set
Try this one:
root.update_idletasks()
root.overrideredirect(False)
root.state('iconic')
I exactly created this type of window today ! 😍👍 but i also created a minimize button in that frame
Not with overrideredirect you didn't.
Nice
You can't use
root.overrideredirect(True)
Followed by
root.display('iconic')
Give error, I tried before you had tried.
@@codeKeshav that's your problem bro in my case it's perfectly working 😎👍🏻
@@m_abhijit_ Impossible
Thank you 🙏
Welcome!
when i convert my app having overrideredirect to 1 into an exe file it doesnt appear in taskbar of windows. I need answer how can i make it appear. Tell me soon.
You can't really do that. The purpose of *overrideredirect* is to remove all things related to the window manager (such as titlebar, taskbar icon, Alt + F4, etc.)
@@rdbende there will be a way I'm sure.
Hello guys, could you please make video with Tkinter and Klib?
Very good video
can you tell me how to link two text box with one scrollbar
Hm, interesting idea...
@@Codemycom please make a video about that as soon
Thank you for the great videos, in this case I want to get the application icon back in the taskbar, what should I do? thank you!
window = Tk()
window.overrideredirect(True)
window.geometry("360x550")
window.title("NT-Sounds | Tiếng cười Livestream")
window.wm_attributes("-transparentcolor", "gray")
icon_path = relative_to_assets("icon.ico")
window.iconbitmap(default=str(icon_path))
canvas = Canvas(
window,
bg="gray",
height=550,
width=360,
bd=0,
highlightthickness=0,
relief="ridge"
)
I followed your code and ... it put the X into the center of the title text .... not where its suppose to be like you have it...?
Then you did something different from the video.
First I want heart
Nice
followed this exactly and my title bar ended up in the middle of the screen and when clicking on it to move it would jump about 50 pixels to the bottom right of the screen
Are you absolutely sure you followed this exactly? I doubt it ;-)
@Codemycom this tutorial has some issues, draging by label has no effect because lack of binds on it… Also deleting not necessary button at the end makes bar to hang on the middle. Dragging not takes into account exact drag point…
Bro please make a video to do the same thing in pyqt5 🙏
We'll see
I am having problems with title_bar.pack(expand=1, fill=X).
My title_bar shows in the middle of the root window.
When i remove the expand=1 I get my title_bar at the top of the root window.
I get the same issue in Ubuntu and Windows10.
Can someone help me?
I found the answer, if anyone needs to know.
The padding of the button pushes the title_bar to the top. If it is changed to my_button.pack(pady=10) the bar goes down closer to the button, leaving a gap at the top.
or
you could just leave out the expand=1 or change it to expand=0
@@fhtommy or just give a side="top" and everything is solved.
@@rdbende I tried this suggestion and it didn't work for me I ended up with a gap above the title_bar. Can you explain a little further? I used:
title_bar = Frame(root, bg="SkyBlue3", relief="raised", bd=0)
title_bar.pack(expand=1, fill=X, side='top')
@@fhtommy if the problem is the expand, why do you use it?
@@Alenk1020 Because he uses it in the video. see 4:00. I have a work around, I just wanted to know why he used it and how it worked for him. Thanks for the question. I had forgotten about this.
Why don’t you ever use The themed tkinter widgets unless it’s something like a scale or notebook?
Cuz they suck
Very Good video.
Prodris hacer un video para proteger código fuente.
Thanks!
can you update this tutorial vid John? this isn't working anymore. I would like to see a video of making a fake title bar, making a restore button, minimize button, also our app icon on taskbar. #tkinter
Yes it still works, nothing has changed and it needs no updates. You did something wrong.
@@Codemycom I copied your code from the video into a new project. It didn't work for me. What worked is this line of code. root.wm_overrideredirect(True)
when I run the app I couldn't move around the app from the title bar I created using tk.Frame() . Also it disappears when I click somewhere on the screen and there is no way to restore it back. Only way is to stop it from vs code and run again to see the window. Could you guide me how do I make the icon visible on taskbar?
@@zerbmovies lol see, you're using VSCode...so you didn't follow the instructions. There's nothing that can go wrong with the code, so you are doing something, like mistyping something or using weird settings on your computer or something.
Can you please make a video of figma and tkinter ..
I don't know what figma is
figma is ui/ux software..
Can we convert .ui files as u have explained it in pyqt5 designer tutorial ..
@@kiran6363 no
when I run the titlebar is at the top here is my code:
from tkinter import *
from tkinter import font
root = Tk()
root.title('Sticky Paper')
root.geometry('500x300')
root.overrideredirect(True)
#fake title bar
title_bar = Frame(root, bg='#f7f7f7', relief='raised', bd=1)
title_bar.pack(expand=1, fill=X)
title_label = Label(title_bar, text='Sticky Paper', bg='#f7f7f7', fg='white', font=('Arial', 12, 'bold'))
title_label.pack(side=LEFT, pady=2)
my_button = Button(root, text="close!", font = ('Helvetica', 32), command=root.destroy)
my_button.pack()
root.mainloop()
Isn't it supposed to be at the top?
5:15
Alt+F4 1:56
You start our talking so fast I couldn't understand everything you were saying!! Not a good way to start off a video!
If you aren't very good at English, you can click the gear icon and slow down the speed of the video.
8:41 To fix the uncentered / right/ left corner cursor while dragging SteppY asked above and got a working solution by @EPCG2 Media here it is again:
first make an 'offset' variable set to (0, 0)
offset = (0, 0)
then make a new binding
root.bind('', set_offset)
then define 'set_offset' at the beginning of your code:
def set_offset(e):
global offset
offset = (e.x, e.y)
then modify 'move_app' to this:
def move_app(e):
root.geometry('+{e.x_root-offset[0]}+{e.y_root-offset[1]}')
def move_app(e):
root.geometry(f'+{e.x_root-250}+{e.y_root}')
would produce the same effect
@@fel01 Wrong answer
@@dogfunday it depends on your screen size, mine works at -250 but you can tinker around with the number to get your ideal one :)
if moving doesn't work, try my code
def move_window(event):
window.geometry('+{0}+{1}'.format(event.x_root, event.y_root))
title_bar = Frame(window, bg='darkgrey', relief="raised", bd=0)
title_bar.pack(expand=0, fill=X)
title_bar.bind('', move_window)
your code not working, neither john's code working.
Srsly, Thank you so much. So, the problem is, that the common name for tkinter-windows is "root". BUT, you also use "root" in move_window() ("event.x_root" and so on), which is a different root. You are finally someone, who didn't named their programm root. So there is no confusion. And well, your code is finally working.
I cannot move the app?
My code is here
from tkinter import *
root = Tk()
root.geometry("500x597")
root.bind("", lambda e: e.widget.quit())
root.overrideredirect(True)
def move_app(e):
root.geometry(f'+{e.x_master}+{e.y_master}')
title_bar = Frame(root, bg="#2C2F33", relief="raised", bd=1)
title_bar.pack(fill=X)
title_label = Label(title_bar, text="I am the new Title Bar", bg="#2C2F33", fg="White")
title_label.pack(side=LEFT,)
title_bar.bind("", move_app)
root.mainloop()
Short Answer: replace x_master and y_master with x_root and y_root
Long Answer:
for some reason the xpos and ypos has to be the same as the window your using (root)
Here is the bug found in your code:
root.geometry(f'+{e.x_master}+{e.y_master}')
^^^^^^^^^^
AttributeError: 'Event' object has no attribute 'x_master'
once you replace x_master and y_master with x_root and y_root, then it will work
1 Corinthians 14:33
For God is not the author of confusion, but of peace, as in all churches of the saints.