GTK4/Adwaita first app render issue

,

Hi folk,

I try to make my first GTK4/Adwaita app, but without success.
When I preview my .ui xml file on Cambalache, that look nice, but when I run my app that look crap :sweat_smile:


Based on adwaita demo

<?xml version='1.0' encoding='UTF-8'?>
<!-- Created with Cambalache 0.94.0 -->
<interface>
  <!-- interface-name main_window.ui -->
  <requires lib="gtk" version="4.12"/>
  <requires lib="libadwaita" version="1.4"/>
  <requires lib="gio" version="2.0"/>
  <!-- Menu model -->
  <menu id="primary_menu">
    <section>
      <item>
        <attribute name="action">app.inspector</attribute>
        <attribute name="label" translatable="yes">_Inspector</attribute>
      </item>
    </section>
    <section>
      <item>
        <attribute name="action">app.preferences</attribute>
        <attribute name="label" translatable="yes">_Preferences</attribute>
      </item>
      <item>
        <attribute name="action">app.about</attribute>
        <attribute name="label" translatable="yes">_About Adwaita Demo</attribute>
      </item>
    </section>
  </menu>
  <!-- Main window template -->
  <template class="MainWindow" parent="AdwApplicationWindow">
    <!-- Window content -->
    <property name="content">
      <object class="AdwToolbarView">
        <!-- Main content area -->
        <property name="content">
          <object class="AdwOverlaySplitView" id="split_view">
            <!-- Content view -->
            <property name="content">
              <object class="AdwStatusPage">
                <property name="title" translatable="yes">Content</property>
              </object>
            </property>
            <!-- Navigation menu -->
            <property name="show-sidebar" bind-source="show_sidebar_button" bind-property="active" bind-flags="sync-create|bidirectional"/>
            <property name="sidebar">
              <object class="AdwStatusPage">
                <property name="child">
                  <object class="GtkBox">
                    <property name="spacing">18</property>
                    <child type="start">
                      <object class="GtkDropDown" id="company_dropdown">
                        <property name="enable-search">true</property>
                        <property name="hexpand">True</property>
                        <property name="tooltip-text">Select a company</property>
                      </object>
                    </child>
                    <child type="start">
                      <object class="GtkButton" id="add_company_button">
                        <property name="icon-name">list-add-symbolic</property>
                        <property name="tooltip-text">Add a new company</property>
                      </object>
                    </child>
                  </object>
                </property>
                <property name="title">Sidebar</property>
                <property name="valign">start</property>
              </object>
            </property>
          </object>
        </property>
        <!-- Header bar -->
        <property name="top-bar-style">raised</property>
        <child type="top">
          <object class="AdwHeaderBar">
            <child type="start">
              <object class="GtkToggleButton" id="show_sidebar_button">
                <property name="active">True</property>
                <property name="icon-name">view-sidebar-start-symbolic</property>
                <property name="tooltip-text" translatable="yes">Toggle Sidebar</property>
                <property name="visible"/>
              </object>
            </child>
            <child type="end">
              <object class="GtkToggleButton">
                <property name="active" bind-source="show_sidebar_button" bind-property="active" bind-flags="sync-create|bidirectional"/>
                <property name="icon-name">view-sidebar-end-symbolic</property>
                <property name="tooltip-text" translatable="yes">Toggle Sidebar</property>
                <property name="visible"/>
              </object>
            </child>
            <child type="end">
              <object class="GtkMenuButton" id="menu_button">
                <property name="icon-name">open-menu-symbolic</property>
                <property name="menu-model">primary_menu</property>
                <property name="primary">True</property>
                <property name="tooltip-text" translatable="yes">Main Menu</property>
              </object>
            </child>
          </object>
        </child>
      </object>
    </property>
    <property name="default-height">600</property>
    <property name="default-width">1800</property>
    <property name="title" translatable="yes">_AppTitle</property>
    <child>
      <object class="AdwBreakpoint">
        <!-- Custom object fragments -->
        <condition>max-width: 800sp</condition>
        <setter object="split_view" property="collapsed">True</setter>
      </object>
    </child>
  </template>
</interface>

And I loading it on C

G_DEFINE_TYPE(MainWindow, main_window, ADW_TYPE_APPLICATION_WINDOW)
...
    GtkWidgetClass *widget_class = GTK_WIDGET_CLASS(klass);


    gtk_widget_class_set_template_from_resource(widget_class,
                                              "/test/src/views/main_window.ui");

    gtk_widget_class_bind_template_child(widget_class, MainWindow, show_sidebar_button);
    gtk_widget_class_bind_template_child(widget_class, MainWindow, menu_button);
    gtk_widget_class_bind_template_child(widget_class, MainWindow, company_dropdown);
    gtk_widget_class_bind_template_child(widget_class, MainWindow, add_company_button);
    gtk_widget_class_bind_template_child(widget_class, MainWindow, split_view);
...
C compiler for the host machine: cc (gcc 14.2.1 "cc (GCC) 14.2.1 20240910")
C linker for the host machine: cc ld.bfd 2.43.0
Host machine cpu family: x86_64
Host machine cpu: x86_64
Found pkg-config: YES (/sbin/pkg-config) 2.3.0
Run-time dependency gtk4 found: YES 4.16.7
Run-time dependency libadwaita-1 found: YES 1.6.2
Run-time dependency libxml-2.0 found: YES 2.13.5
Build-time dependency gio-2.0 found: YES 2.82.2

Looks like a CSS theming issue to me.

But I don’t use any css yet.
Only C files and UI xml.

Can you share working code ?

Hi,

Have you defined the GTK_THEME environment variable?
That’s a typical rootcause for this kind of mess-up.