CODEWITHSUNDEEP
pythontkinterttk
Jacob
Jacob

Reputation: 25

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

Upvotes: 0

Views: 2089

Answers (1)

j_4321
j_4321

Reputation: 16169

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.

Upvotes: 2

Related Questions