Search code examples
pythontkinterttk

How do you change ttk.Radiobutton circle/diamond?


I had to use ttk.Radiobutton instead of Radiobutton as I wanted to move the text above the circle but since then the circle has changed to a diamond. (See image below)

I have tried turning the indicator off with cTheme = ttk.Style() cTheme.configure("TRadiobutton", indicatoron=False) but this seems to do nothing.

I want to change the new radiobutton shape from a diamond back to a circle.. or make it so when the button is clicked it changes shape or colour as currently nothing changes to show the user it has been clicked. Has anyone got any ideas?

Example of new and old Radiobutton


Solution

  • The indicatoron option is not supported by the ttk version of the Radiobutton. However, you can change the ttk theme to one that has a circle for radiobuttons (e.g. 'clam' or 'alt'):

    cTheme.theme_use('clam')
    

    screenshot clam theme

    Note that the theme change needs to be done before you configure the "TRadiobutton" style.

    Also, to get rid of the initial blueish color in the button, change its state (the default state is 'alternate') to get a normal unselected radiobutton:

    radiobutton.state(["!alternate"])
    

    screenshot after state change

    EDIT: If keeping the default theme, it is possible to make the selection of the button more visible, for instance by changing the selected color to bright green:

    import tkinter as tk
    from tkinter import ttk
    
    root = tk.Tk()
    var = tk.IntVar(root, 1)
    style = ttk.Style(root)
    style.map('TRadiobutton', indicatorcolor=[('selected', '#00FF00')])
    r1 = ttk.Radiobutton(root, value=1, variable=var, text='1')
    r2 = ttk.Radiobutton(root, value=2, variable=var, text='2')
    r1.pack()
    r2.pack()
    

    Screenshot

    The other alternative is to create your own indicator from pictures and overriding the 'Radiobutton.indicator' in the layout of 'TRadiobutton':

    import tkinter as tk
    from tkinter import ttk
    
    root = tk.Tk()
      
    var = tk.IntVar(root, 1)
    
    style = ttk.Style(root)
    
    data_unselected = b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x10\x00\x00\x00\x10\x08\x06\x00\x00\x00\x1f\xf3\xffa\x00\x00\x00\tpHYs\x00\x00\x10\x9b\x00\x00\x10\x9b\x01t\x89\x9cK\x00\x00\x00\x19tEXtSoftware\x00www.inkscape.org\x9b\xee<\x1a\x00\x00\x01_IDAT8\x8d\xa5SMk\xc2@\x10}[*\x8b\x0c\xac\xa5\x7f@<Yu\x93\xfaGzV\xfbqM\xfeOXr\xc8/\xb0\xbd\xfaKb\x03\xad7k\xcf\xa5`\x0cB,;\xbdD\xb1i\xacB\x1f\xcce\x98\xf7\xf6\xcdc\x16\xf8\'DE\xaf\x06`\xa8\x94\x1a\x08!\xae\x00\x80\x99_\x97\xcb\xe5\x18\xc0#\x80\xcd_\x02}"\x9a\xb4Z\xad\x0b\xcf\xf3\xea\x8e\xe30\x00L\xa7S\x11E\xd1z>\x9f\x7ffYv\x03 \xaer\xd3\x97R\xae\xc20\xdcXksf\xfeQ\xd6\xda\xdc\x18\x93K)3\x00\xee/\xdbD\xf4\x1e\x86\xe1\xa6L,\x971&\'\xa2\xb7b\xd5\x1d\x1e\xb4\xd6i\xd5\xcbUN\xba\xddn\n\xe0\x0e\x00\xce\x00\xa0\xd1h\x8c|\xdf\xaf\x0bQ\x95i)u!\xe0\xfb~])5\xda\t\x00hk\xad\xf9(\xbb\x80\xd6\x9a\x85\x10\xed}\x01f>\x99\x8fb\x96w\x02\xcc<K\x92\xe4\xb8\xff\x02I\x92\x08f\x9e\xed\xf7\xee{\xbd\xde\xc9!v:\x9d\x14\xc0\xed\xbe@\x8d\x88\x16\xc6\x98\xa3\x02A\x10\xe4D4\x07p^vv-\xa5\xcc\x8c1\xf9\xa1C\n\x82 \x97R\xae\x008[Ryo\x97\x88&\xcdf\xf3\xd2\xf3\xbc\xba\xeb\xba\x0c\x00q\x1c\x8b(\x8a\xd6\x8b\xc5\xe2\xa38\xe5\xe7C\x02(\xac\r\x94R\xc3\xedg\xb2\xd6\xbe\xa4i:\x06\xf0\x04\xe0\xeb\xd4\xb0O\xc27yq5\xbb\x9e?8\xa4\x00\x00\x00\x00IEND\xaeB`\x82'
    img_unselected = tk.PhotoImage("radiobutton_unselected", master=root, data=data_unselected)
    data_selected = b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x10\x00\x00\x00\x10\x08\x06\x00\x00\x00\x1f\xf3\xffa\x00\x00\x00\tpHYs\x00\x00\x10\x9b\x00\x00\x10\x9b\x01t\x89\x9cK\x00\x00\x00\x19tEXtSoftware\x00www.inkscape.org\x9b\xee<\x1a\x00\x00\x01\xcdIDAT8\x8d\xa5S\xc1n\xda@\x10}k5ZE+\xd9\xab\xfe\x00\xe2\x94\x02\x86\xe6\x0f\xe0\x07zN\xd4\xa6W\xff\x0ff\xe5\x83\xbf \xb5\x0f\xc8\xa4\xea\xd9\xbf\x00\xb5\xd4\xe6F\xe9\t\xa3\xaa\x80\x83"\x19k\xa7\x07\xb0E\x02\xe9\xa1\x1di/\xb3\xfb\xde\xbcy3\x0b\xfcg\xb0\x13\xb93\x00\xd7\xa6i^1\xc6\xde\x00\x00\x11}_\xaf\xd7\xb7\x00>\x01\xd8\xfe\x8d\xe0R\x08qW\xaf\xd7\xa5\xe38\xe7\xedv\x9b\x00`2\x990\xdf\xf7\x1f\xa7\xd3\xe9\xef\xcdf\xf3\x0e\xc0\xf8\x94\x9aK\xce\xf9\x83\xe7y[\xaduNDO\x8e\xd6:WJ\xe5\x9c\xf3\r\x80\xce\x91l!\xc4O\xcf\xf3\xb6%`>\x9f\xe7A\x10\x14A\x10\x14i\x9aVDJ\xa9\\\x08\xf1c\xdfj\x15\x1fm\xdb\xce\xca\xca\xc3\xe1\xb0\xb0,\x8b\x00\x10\x00\x92RR\x14EE\xa9\xa4\xd9lf\x00>Th\xcb\xb2\xbe\x0c\x06\x83\xa2\xac|\x08>$)\x95\xf4\xfb\xfd\xc24\xcd\xcf\x00`\xec9.l\xdb&\x00\x88\xe3\xd8X\xadVG\x06-\x97K\xc4ql\x00\x80m\xdb\xc4\x18\xbb8$ "\xda\x8d\x85\x9d\x9a\xec.\x0c\xc3(\x1fc\xaflG@D\xf7I\x920\x00\xe8\xf5zZJy\x04\x96R\xa2\xdb\xedj\x00H\x92\x84\x11\xd1\xfd\xe1\xfdM\xab\xd5\xaaL\x8c\xa2\xa8\x90R>\xe9\x7f4\x1amK\x13\x1b\x8dF\x06\xe0\xfd!\xc1\x99\x10b\xa6\x94\xaa\xc6\x95\xa6i\x1e\x86a\x11\x86a\xb1X,\xaa\xbc\xeb\xba\xb9\x10b\n\xe0\xd5s\x95o9\xe7\x1b\xa5T\xfe\xd2"\xb9\xae\x9bs\xce\x1f\x00\xb4K\xd0s\xc7:B\x88\xbbZ\xad\xf6\xdaq\x9c\xf3N\xa7C\x000\x1e\x8f\x99\xef\xfb\x8f\xb3\xd9\xec\xd7~\x95\xbf\xbeD\x80\xbd\xb4+\xd34\xaf\xcb\xcf\xa4\xb5\xfe\x96e\xd9-\x80\x00@q\x02\xf3\xef\xf1\x07\x84\xe6=}U\x13]\xb7\x00\x00\x00\x00IEND\xaeB`\x82'
    img_selected = tk.PhotoImage("radiobutton_selected", master=root, data=data_selected)
    
    style.element_create('custom.indicator', 'image', "radiobutton_unselected",
                         ('selected', '!disabled', "radiobutton_selected"))
    style.layout(
        'TRadiobutton',
        [('Radiobutton.padding',
          {'sticky': 'nswe',
           'children': [('custom.indicator', {'side': 'left', 'sticky': ''}),
                        ('Radiobutton.focus',
                         {'side': 'left',
                          'sticky': '',
                          'children': [('Radiobutton.label', {'sticky': 'nswe'})]})]})])
    
    r1 = ttk.Radiobutton(root, value=1, variable=var, text='1')
    r2 = ttk.Radiobutton(root, value=2, variable=var, text='2')
    r1.pack()
    r2.pack()
    

    screenshot

    Note that you will need extra images when defining the theme element if you want to have a noticeable "disabled" state.