Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rounded button tkinter python

I am trying to get rounded buttons for my script using tkinter.

I found the following code:

from tkinter import *
import tkinter as tk

class CustomButton(tk.Canvas):
    def __init__(self, parent, width, height, color, command=None):
        tk.Canvas.__init__(self, parent, borderwidth=1, 
            relief="raised", highlightthickness=0)
        self.command = command

        padding = 4
        id = self.create_oval((padding,padding,
            width+padding, height+padding), outline=color, fill=color)
        (x0,y0,x1,y1)  = self.bbox("all")
        width = (x1-x0) + padding
        height = (y1-y0) + padding
        self.configure(width=width, height=height)
        self.bind("<ButtonPress-1>", self._on_press)
        self.bind("<ButtonRelease-1>", self._on_release)

    def _on_press(self, event):
        self.configure(relief="sunken")

    def _on_release(self, event):
        self.configure(relief="raised")
        if self.command is not None:
            self.command()
app = CustomButton()
app.mainloop()

but I get the following error:

TypeError: __init__() missing 4 required positional arguments: 'parent', 'width', 'height', and 'color'
like image 334
Martinn Roelofse Avatar asked Mar 03 '17 13:03

Martinn Roelofse


People also ask

Can you make round buttons in Tkinter?

The best way to create rounded buttons in Tkinter is to use the desired images of buttons and turn it into a clickable button in the frame. That is really possible by using PhotoImage() function which grabs the desired image of the button.

How do I make rounded edges in Tkinter?

Using this function, you can just provide the normal coordinates that you would to a rectangle, and then specify the 'radius' which is rounded in the corners. The use of **kwargs denotes that you can pass keyword arguments such as fill="blue" , just as you usually could with a create_ method.

How do I change the shape of a button in Python?

Ensure to use border="0" and the button border will be removed. I added the self. roundedborder["bg"] = "white" so that the the background the background of the button is the same as the Tkinter window. The great part is that you can use any shape you like not just the normal button shapes.


2 Answers

A very easy way to make a rounded button in tkinter is to use an image.

First create an image of what you want you button to look like save it as a .png and remove the outside background so it is rounded like the one below:

Click here to see image

Next insert the image in a button with PhotoImage like this:

self.loadimage = tk.PhotoImage(file="rounded_button.png")
self.roundedbutton = tk.Button(self, image=self.loadimage)
self.roundedbutton["bg"] = "white"
self.roundedbutton["border"] = "0"
self.roundedbutton.pack(side="top")

Ensure to use border="0" and the button border will be removed.

I added the self.roundedborder["bg"] = "white" so that the the background the background of the button is the same as the Tkinter window.

The great part is that you can use any shape you like not just the normal button shapes.

like image 104
Xantium Avatar answered Sep 17 '22 03:09

Xantium


I made this rounded rectangle button if anyone was looking for more of an apple look or something. For convenience here are the arguments:

RoundedButton(parent, width, height, cornerradius, padding, fillcolor, background, command)

Note: If the corner radius is greater than half of the width or height an error message will be sent in the terminal. Pill shapes can still be made through if you set the corner radius to exactly half of the height or width.

Finally the code:

from tkinter import *
import tkinter as tk

root = Tk()

class RoundedButton(tk.Canvas):
    def __init__(self, parent, width, height, cornerradius, padding, color, bg, command=None):
        tk.Canvas.__init__(self, parent, borderwidth=0, 
            relief="flat", highlightthickness=0, bg=bg)
        self.command = command

        if cornerradius > 0.5*width:
            print("Error: cornerradius is greater than width.")
            return None

        if cornerradius > 0.5*height:
            print("Error: cornerradius is greater than height.")
            return None

        rad = 2*cornerradius
        def shape():
            self.create_polygon((padding,height-cornerradius-padding,padding,cornerradius+padding,padding+cornerradius,padding,width-padding-cornerradius,padding,width-padding,cornerradius+padding,width-padding,height-cornerradius-padding,width-padding-cornerradius,height-padding,padding+cornerradius,height-padding), fill=color, outline=color)
            self.create_arc((padding,padding+rad,padding+rad,padding), start=90, extent=90, fill=color, outline=color)
            self.create_arc((width-padding-rad,padding,width-padding,padding+rad), start=0, extent=90, fill=color, outline=color)
            self.create_arc((width-padding,height-rad-padding,width-padding-rad,height-padding), start=270, extent=90, fill=color, outline=color)
            self.create_arc((padding,height-padding-rad,padding+rad,height-padding), start=180, extent=90, fill=color, outline=color)


        id = shape()
        (x0,y0,x1,y1)  = self.bbox("all")
        width = (x1-x0)
        height = (y1-y0)
        self.configure(width=width, height=height)
        self.bind("<ButtonPress-1>", self._on_press)
        self.bind("<ButtonRelease-1>", self._on_release)

    def _on_press(self, event):
        self.configure(relief="sunken")

    def _on_release(self, event):
        self.configure(relief="raised")
        if self.command is not None:
            self.command()

def test():
    print("Hello")

canvas = Canvas(root, height=300, width=500)
canvas.pack()

button = RoundedButton(root, 200, 100, 50, 2, 'red', 'white', command=test)
button.place(relx=.1, rely=.1)

root.mainloop()
like image 25
Guac Avatar answered Sep 18 '22 03:09

Guac