In this article, we are going to learn how to build a simple form GUI using CustomTkinter in Python.
CustomTkinter: It is an extension of the Tkinter module in python. It provides additional UI elements compared to Tkinter and they can be customized in various possible ways. For example, we can customize a button using CustomTkinter, we can make customizations like adding an image, making the edges round, adding borders around it, etc.
To install the customtkinter module in Python execute the below command in the terminal:
pip install customtkinter
Designing the form
Design phase is an important phase in the cycle of development of an application. To design the layout of our form we can use paint application or any other online tool to design the page as given below.
Building the initial application
Here we are going to create a simple blank application page using customtkinter module and setting its appreance as same as of system (Dark or light mode). Defining a App class in which we have defined the __init__ function and sets the title and its size.
Python3
# Import customtkinter moduleimport customtkinter as ctk# Sets the appearance mode of the application# "System" sets the appearance same as that of the systemctk.set_appearance_mode("System") # Sets the color of the widgets# Supported themes: green, dark-blue, bluectk.set_default_color_theme("green") # Create App classclass App(ctk.CTk):# Layout of the GUI will be written in the init itself def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs)# Sets the title of our window to "App" self.title("App") # Dimensions of the window will be 200x200 self.geometry("200x200") if __name__ == "__main__": app = App() # Runs the app app.mainloop() |
Output :
Desiging the form using the customtkinter module in Python
Here we are going to build the form that we have design above. we are going to use labels using CTkLabel() function, text field using CTkEntry() function, radio button using CTkRadioButton() function, etc.
All the widgets are created and placed in the following manner
- We create a widget by using the ctk.CTk<widget_name>() (For example, ctk.CTkLabel() creates a label)
- And then we pass the arguments to it depending on the type of the widget.
- .grid() is used to specify the position, alignment, padding, and other dimensions of the widget in our window
Syntax of grid():
grid( grid_options )
Parameters:
- row: Specifies the row at which the widget must be placed.
- column: Specifies the column at which the widget must be placed.
- rowspan: Specifies the height of the widget (number of rows the widget spans).
- columnspan: Specifies the length of the widget (number of columns the widget spans).
- padx, pady: Specifies the padding of the widget along x and y axes respectively.
- sticky: Specifies how the widget elongates with respect to the changes in its corresponding row and column.
Python3
# Python program to create a basic GUI# application using the customtkinter moduleimport customtkinter as ctkimport tkinter as tk# Basic parameters and initializations# Supported modes : Light, Dark, Systemctk.set_appearance_mode("System")# Supported themes : green, dark-blue, bluectk.set_default_color_theme("green") appWidth, appHeight = 600, 700# App Classclass App(ctk.CTk): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.title("GUI Application") self.geometry(f"{appWidth}x{appHeight}") # Name Label self.nameLabel = ctk.CTkLabel(self, text="Name") self.nameLabel.grid(row=0, column=0, padx=20, pady=20, sticky="ew") # Name Entry Field self.nameEntry = ctk.CTkEntry(self, placeholder_text="Teja") self.nameEntry.grid(row=0, column=1, columnspan=3, padx=20, pady=20, sticky="ew") # Age Label self.ageLabel = ctk.CTkLabel(self, text="Age") self.ageLabel.grid(row=1, column=0, padx=20, pady=20, sticky="ew") # Age Entry Field self.ageEntry = ctk.CTkEntry(self, placeholder_text="18") self.ageEntry.grid(row=1, column=1, columnspan=3, padx=20, pady=20, sticky="ew") # Gender Label self.genderLabel = ctk.CTkLabel(self, text="Gender") self.genderLabel.grid(row=2, column=0, padx=20, pady=20, sticky="ew") # Gender Radio Buttons self.genderVar = tk.StringVar(value="Prefer\ not to say") self.maleRadioButton = ctk.CTkRadioButton(self, text="Male", variable=self.genderVar, value="He is") self.maleRadioButton.grid(row=2, column=1, padx=20, pady=20, sticky="ew") self.femaleRadioButton = ctk.CTkRadioButton(self, text="Female", variable=self.genderVar, value="She is") self.femaleRadioButton.grid(row=2, column=2, padx=20, pady=20, sticky="ew") self.noneRadioButton = ctk.CTkRadioButton(self, text="Prefer not to say", variable=self.genderVar, value="They are") self.noneRadioButton.grid(row=2, column=3, padx=20, pady=20, sticky="ew") # Choice Label self.choiceLabel = ctk.CTkLabel(self, text="Choice") self.choiceLabel.grid(row=3, column=0, padx=20, pady=20, sticky="ew") # Choice Check boxes self.checkboxVar = tk.StringVar(value="Choice 1") self.choice1 = ctk.CTkCheckBox(self, text="choice 1", variable=self.checkboxVar, onvalue="choice1", offvalue="c1") self.choice1.grid(row=3, column=1, padx=20, pady=20, sticky="ew") self.choice2 = ctk.CTkCheckBox(self, text="choice 2", variable=self.checkboxVar, onvalue="choice2", offvalue="c2") self.choice2.grid(row=3, column=2, padx=20, pady=20, sticky="ew") # Occupation Label self.occupationLabel = ctk.CTkLabel(self, text="Occupation") self.occupationLabel.grid(row=4, column=0, padx=20, pady=20, sticky="ew") # Occupation combo box self.occupationOptionMenu = ctk.CTkOptionMenu(self, values=["Student", "Working Professional"]) self.occupationOptionMenu.grid(row=4, column=1, padx=20, pady=20, columnspan=2, sticky="ew") # Generate Button self.generateResultsButton = ctk.CTkButton(self, text="Generate Results") self.generateResultsButton.grid(row=5, column=1, columnspan=2, padx=20, pady=20, sticky="ew") # Text Box self.displayBox = ctk.CTkTextbox(self, width=200, height=100) self.displayBox.grid(row=6, column=0, columnspan=4, padx=20, pady=20, sticky="nsew")if __name__ == "__main__": app = App() app.mainloop() |
Output :
Complete application using customtkinter module in Python
In the previous step we have designed our form UI and now we are going to add some more functionality of generate result and printing the all information entered by user in the result block. For that we are going to create two function given below.
- generateResults(): This function is used to put the text into the textbox.
- createText(): Based on the selected preferences and entered text, this function generates a text variable that sums up all the entries and returns it.
Python3
# Python program to create a basic form# GUI application using the customtkinter moduleimport customtkinter as ctkimport tkinter as tk# Sets the appearance of the window# Supported modes : Light, Dark, System# "System" sets the appearance mode to# the appearance mode of the systemctk.set_appearance_mode("System") # Sets the color of the widgets in the window# Supported themes : green, dark-blue, blue ctk.set_default_color_theme("green") # Dimensions of the windowappWidth, appHeight = 600, 700# App Classclass App(ctk.CTk): # The layout of the window will be written # in the init function itself def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) # Sets the title of the window to "App" self.title("GUI Application") # Sets the dimensions of the window to 600x700 self.geometry(f"{appWidth}x{appHeight}") # Name Label self.nameLabel = ctk.CTkLabel(self, text="Name") self.nameLabel.grid(row=0, column=0, padx=20, pady=20, sticky="ew") # Name Entry Field self.nameEntry = ctk.CTkEntry(self, placeholder_text="Teja") self.nameEntry.grid(row=0, column=1, columnspan=3, padx=20, pady=20, sticky="ew") # Age Label self.ageLabel = ctk.CTkLabel(self, text="Age") self.ageLabel.grid(row=1, column=0, padx=20, pady=20, sticky="ew") # Age Entry Field self.ageEntry = ctk.CTkEntry(self, placeholder_text="18") self.ageEntry.grid(row=1, column=1, columnspan=3, padx=20, pady=20, sticky="ew") # Gender Label self.genderLabel = ctk.CTkLabel(self, text="Gender") self.genderLabel.grid(row=2, column=0, padx=20, pady=20, sticky="ew") # Gender Radio Buttons self.genderVar = tk.StringVar(value="Prefer \ not to say") self.maleRadioButton = ctk.CTkRadioButton(self, text="Male", variable=self.genderVar, value="He is") self.maleRadioButton.grid(row=2, column=1, padx=20, pady=20, sticky="ew") self.femaleRadioButton = ctk.CTkRadioButton(self, text="Female", variable=self.genderVar, value="She is") self.femaleRadioButton.grid(row=2, column=2, padx=20, pady=20, sticky="ew") self.noneRadioButton = ctk.CTkRadioButton(self, text="Prefer not to say", variable=self.genderVar, value="They are") self.noneRadioButton.grid(row=2, column=3, padx=20, pady=20, sticky="ew") # Choice Label self.choiceLabel = ctk.CTkLabel(self, text="Choice") self.choiceLabel.grid(row=3, column=0, padx=20, pady=20, sticky="ew") # Choice Check boxes self.checkboxVar = tk.StringVar(value="Choice 1") self.choice1 = ctk.CTkCheckBox(self, text="choice 1", variable=self.checkboxVar, onvalue="choice1", offvalue="c1") self.choice1.grid(row=3, column=1, padx=20, pady=20, sticky="ew") self.choice2 = ctk.CTkCheckBox(self, text="choice 2", variable=self.checkboxVar, onvalue="choice2", offvalue="c2") self.choice2.grid(row=3, column=2, padx=20, pady=20, sticky="ew") # Occupation Label self.occupationLabel = ctk.CTkLabel(self, text="Occupation") self.occupationLabel.grid(row=4, column=0, padx=20, pady=20, sticky="ew") # Occupation combo box self.occupationOptionMenu = ctk.CTkOptionMenu(self, values=["Student", "Working Professional"]) self.occupationOptionMenu.grid(row=4, column=1, padx=20, pady=20, columnspan=2, sticky="ew") # Generate Button self.generateResultsButton = ctk.CTkButton(self, text="Generate Results", command=self.generateResults) self.generateResultsButton.grid(row=5, column=1, columnspan=2, padx=20, pady=20, sticky="ew") # Text Box self.displayBox = ctk.CTkTextbox(self, width=200, height=100) self.displayBox.grid(row=6, column=0, columnspan=4, padx=20, pady=20, sticky="nsew") # This function is used to insert the # details entered by users into the textbox def generateResults(self): self.displayBox.delete("0.0", "200.0") text = self.createText() self.displayBox.insert("0.0", text) # This function is used to get the selected # options and text from the available entry # fields and boxes and then generates # a prompt using them def createText(self): checkboxValue = "" # .get() is used to get the value of the checkboxes and entryfields if self.choice1._check_state and self.choice2._check_state: checkboxValue += self.choice1.get() + " and " + self.choice2.get() elif self.choice1._check_state: checkboxValue += self.choice1.get() elif self.choice2._check_state: checkboxValue += self.choice2.get() else: checkboxValue = "none of the available options" # Constructing the text variable text = f"{self.nameEntry.get()} : \n{self.genderVar.get()} {self.ageEntry.get()} years old and prefers {checkboxValue}\n" text += f"{self.genderVar.get()} currently a {self.occupationOptionMenu.get()}" return textif __name__ == "__main__": app = App() # Used to run the application app.mainloop() |
Output :
