Enjoy On Your Music: CTkTabview In CustomTkinter

Hello, Pythonistas Welcome Back. Today we will see how to make a fully functional modern tab view in CustomTkinter.

We will use the CTkTabview Widget.

How Does CTkTabview Look?

Basic Code

This is how you can make a simple Tabview in CustomTkinter (or CTk).

from customtkinter import CTk, CTkTabview, CTkLabel
class MyTabView(CTkTabview):
    def __init__(self, master):
        super().__init__(master)

        # create tabs
        tab1 = self.add("Tab 1")
        tab2 = self.add("Tab 2")

        # add widgets on tab1
        self.label = CTkLabel(master=tab1, text="Tab 1")
        self.label.grid(row=0, column=0, padx=20, pady=10)
        # add widgets on tab2
        self.label2 = CTkLabel(master=tab2, text="Tab 2")
        self.label2.grid(row=0, column=0, padx=20, pady=10)


class App(CTk):
    def __init__(self):
        super().__init__()
        self.title("CTkTabview Example")

        self.tab_view = MyTabView(master=self)
        self.tab_view.grid(row=0, column=0, padx=20, pady=20)


app = App()
app.mainloop()

It is not compulsory to make a tabview as a separate class. You can use it simply as you use other widgets.

It is created like any other widget and displayed on the window. But as it acts like a frame you can add widgets to it.

It is like multiple frames that can be switched using a segmented button-like structure.

You can store tabs of the tab view in variables like those shown above. However, you can use them directly too.

A Sample Modern Tab View

You might have used a lot of music apps, data there is separated in tabs. We will be making something like that here.

Meloflow using CTkTabview in customtkinter python

We will need to:

Create a function that returns a dictionary of separate categories. (so that the code doesn’t clutter up)
Now, load this dictionary and then get the titles of the tab in a separate list.
Lastly, create three tabs and add labels to each.
Create this class’s object in the main window class.

That’s it!!

Complete Source Code(Click Here For Complete Source Code):

from customtkinter import CTk, CTkTabview, CTkLabel
class MusicView(CTkTabview): # Inherit from CTkTabview to create a tab view
    def __init__(self, master): # Initialize the parent class
        super().__init__(master)
        
        self.m_dict = self.get_dict() # Get the music data dictionary
        titles = list(self.m_dict.keys()) # Get a list of tab titles

        # Create tabs and add widgets to them:
        all_tab = self.add(titles[2]) # Create the "All Songs" tab
        # Add label for "All Songs"
        self.label3 = CTkLabel(master=all_tab, text=self.m_dict[titles[2]])
        self.label3.grid(row=0, column=0, padx=20, pady=10)
        
        r_play = self.add(titles[0]) # Create the "Recently Played" tab
        # Add label for "Recently Played"
        self.label = CTkLabel(master=r_play, text=self.m_dict[titles[0]])
        self.label.grid(row=0, column=0, padx=20, pady=10)

        play = self.add(titles[1]) # Create the "Playlists" tab
        # Add label for "Playlists"
        self.label2 = CTkLabel(master=play, text=self.m_dict[titles[1]])
        self.label2.grid(row=0, column=0, padx=20, pady=10)

    def get_dict(self) -> dict[str]: # Function to fetch and format music data
        """Returns a dictionary of recently played songs, playlists and all songs."""
        all_songs = [
            "1. Bohemian Rhapsody - Queen",
            "2. Imagine - John Lennon",
            "3. What a Wonderful World - Louis Armstrong",
        ]
        playlists = ["1. Workout Mix", "2. Chill Vibes"]
        recently_played = [
            "1. Imagine - John Lennon",
            "2. What a Wonderful World - Louis Armstrong",
        ]

        # Format song lists as newline-separated strings for display
        recently_played = "\n".join(recently_played)
        playlists = "\n".join(playlists)
        all_songs = "\n".join(all_songs)

        return {"Recently Played":recently_played, "Playlists":playlists, "All Songs":all_songs}


class App(CTk):
    def __init__(self):
        super().__init__()
        self.title("Meloflow")

        self.tab_view = MusicView(master=self)
        self.tab_view.grid(row=0, column=0, padx=20, pady=20)


app = App()
app.mainloop()

All Configurations

Argument	Value
master	root, frame, top-level
width	width in px, tabs will be slightly smaller
height	height in px, tabs will be slightly smaller
corner_radius	corner radius in px
border_width	border width in px
fg_color	foreground color of the tabview itself and the tabs, tuple: (light_color, dark_color) or single color
border_color	border color, tuple: (light_color, dark_color) or single color
command	function will be called when segmented button is clicked
anchor	position of the segmented button, default is “n”, values are “nw”, “n”, “ne”, “sw”, “s”, “se”
state	“normal” or “disabled”

I am not going to give any challenges at the end of such articles as they are just for your quick reference.

Note I haven’t included all the methods and attributes. You can always get that on the documentation.