Custom GtkStackSwitcher with icons

Platform
1

Been wrapping my head around this for the last week and I don’t seem to get anywhere. I understand Gnome is quite a strict environment but I hope there’s freedom to do things a bit differently too, and without having to reinvent the wheel. This is a header bar I have created so far, in XML.

    <object class="GtkHeaderBar" id="header_bar">
				<child type="start">
                    <object class="GtkButton" id="profile_button">
                        <property name="sensitive">true</property>
                        <property name="icon-name">user-info-symbolic</property>
                    </object>
				</child>
                <child type="title">
                    <object class="GtkStackSwitcher" id="stack_switcher">
                        <property name="stack">toplevel_stack</property>
                        <property name="css-name">toplevel_stack</property>
                    </object>
                </child>
                <child type="end">
					<object class="GtkMenuButton" id="gears_button">
                        <property name="valign">center</property>
                        <property name="focus-on-click">false</property>
                        <property name="direction">none</property>
                    </object>
				</child>
				<child type="end">
					<object class="GtkToggleButton" id="search_button">
						<property name="sensitive">0</property>
						<property name="icon-name">edit-find-symbolic</property>
					</object>
				</child>
            </object>

The stack starts like this

    <object class="GtkStack" id="toplevel_stack">
        <property name="transition-duration">250</property>
        <property name="transition-type">1</property>
        <property name="hhomogeneous">true</property>
        <child>
            <object class="GtkStackPage">
                <property name="name">page_start</property>
                <property name="title" translatable="1">Start</property>
                <property name="icon-name">emoji-nature-symbolic</property>
                <property name="use-underline">1</property>
                <property name="child">
                    <object class="GtkBox" id="page_start">

What I am trying to achieve is simple, a GtkStackSwitcher with buttons that have both an icon and label and if possible, with a height that fills the title bar / header.
I am looking at what the people developing Foliate have done, except they use some JS for that portion, which I would like to avoid.

example1
example11265×62 4.02 KB

Other people have tried using GtkToggleButton and some dirty tricks to achieve it but I would like to know if there’s any standard way of doing this, either in C or inside the UI file (something like accessing or extending the GtkStackSwitcher and changing the child buttons).

I have also read somewhere that this also depends on the user’s preferences and there might be a setting somewhere that maybe can be activated to show both icons and labels in GtkButton. Would it be true?

In the end, I would even change to a different switcher, something like GtkStackSidebar or GtkNotebook, but only if I don’t find myself in the same situation and I can add icons to the labels, like in the Settings window of Ubuntu, for example. What would you recommend?

2

GtkStackSwitcher will either show an icon (with a tooltip) or a text label, preferring the icon if the stack page has one. If you’re hung up on having both and using a distinct class for it, I would just copy-paste the original since it’s really not that complicated.

Since it’s basically just consumer of two signals (items-changed and selection-changed), you could also implement it directly with very little work. By comparison, poking around in the child widgets of an existing GtkStackSwitcher is probably far more work and fragile than it’s worth.

3

What Foliate has looks like a HdyViewSwitcher which does icons and text.

2 Likes
4

this is what I found last night, too, almost before giving up. WIll give it a try

5

FYI if you’re using GTK4, as it appears you are, you will want to use libadwaita and AdwViewSwitcher.

2 Likes
6

It needs gtk 4.5.0, I only have 4.4.0 and I really don’t wanna go nuts trying to upgrade from source

7

libhandy only works with 4.3.0, libadwaita only works with 4.5.0. I have 4.4.0. Gtk sucks

1 Like
8

I’m not sure what your build process is, but I’ve just been using libadwaita-1.0.0.alpha.4 as a subproject when building against the current stable platform libraries. This version only requires GTK 4.4.0.

But if you’re still open for suggestions, I wouldn’t pull in all of libadwaita (or libhandy) just for a stack switcher. The class itself is not very big and the changes you’d need to make are very minimal. I’d expect 10-15min would get the job done.

9

I cloned the last beta version. You might be right, I will try to integrate and customize the class of any of these libraries if it does not complicate things. Thanks

10

In the end I upgraded Gtk to 4.5.0 and I can use libadawaita. Thanks all for your patience

11

libhandy is a GTK3 library, it definitely doesn’t need 4.3.0.

2 Likes
12

libadwaita is a drop-in replacement for libhandyin GTK 4. I’m not sure what about having different versions of libraries having different dependencies constitutes “GTK sucks”.

13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.