How to change the TabBar / TabButton "accent" location [Material]

[Jake 0]

Hi,

Some advice please. I want to change the location of the highlight accent on the TabBar-TabButton when using Material design.
If possible, can the "accent" highlight to be placed underneath the control text?, especially when the control is incorporated into an application's footer.

I did discover the following links, but am unsure if this is TabBar or TabButton change? Or if what I want to do can be done per the information provided?:
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-tabbutton
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-tabbar

This is what I am looking for (on the right-hand side, the default is on the left),
I find the placement of the accent below the text to be visually more appealing when used on an applications' footer:

Thank you,
Jake

[Nifiro]

1. If the tab bar is assigned as a footer of ApplicationWindow or Page

// CustomTabBar.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Controls.Material 2.12

T.TabBar {
    id: control

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            contentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             contentHeight + topPadding + bottomPadding)

    spacing: 1

    contentItem: ListView {
        model: control.contentModel
        currentIndex: control.currentIndex

        spacing: control.spacing
        orientation: ListView.Horizontal
        boundsBehavior: Flickable.StopAtBounds
        flickableDirection: Flickable.AutoFlickIfNeeded
        snapMode: ListView.SnapToItem

        highlightMoveDuration: 250
        highlightResizeDuration: 0
        highlightFollowsCurrentItem: true
        highlightRangeMode: ListView.ApplyRange
        preferredHighlightBegin: 48
        preferredHighlightEnd: width - 48

        highlight: Item {
            z: 2
            Rectangle {
                height: 2
                width: parent.width
                y: parent.height - height                      // <============
                color: control.Material.accentColor
            }
        }
    }
}

// Test.qml
Page {
    footer: CustomTabBar {
        ...
    }
}

2. !1

Page {
    TabBar {
        anchors.bottom: parent.bottom
        width: parent.width
        position: TabBar.Header                   // <===============
        
        TabButton {
            text: "Foo"
        }
    }
}

[Shrinidhi Upadhyaya]

Hi @Jake-0 , you can make use of the position property.Instead of assigning the TabBar as header or footer of a ApplicationWindow, you can assign it a width,height and anchors,because if you assign it as a header or a footer you cant make use of the position property.

Here is the sample code:-

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Tabs")

TabBar {
    id: tabBar
    width: parent.width
    height: 50
    //####You can use anchors to position it anywhere
    anchors.centerIn: parent
    //####TabBar.Header:- Bottom Highlight
    //####TabBar.Footer:- Top Highlight
    position: TabBar.Header

    TabButton {
        text: qsTr("Page 1")
    }

    TabButton {
        text: qsTr("Page 2")
    }
}

}

[Jake 0]

@SHRINIDHI-UPADHYAYA and @Nifiro thank you both!
(this forum and you guys are awesome!!)

So there are two ways to circumvent the default logic applied to footers when using a QML Toolbar with material design. One either doesn't use the TabBar attached to the "footer:" (uses anchors instead) or one creates a new version (style) of T.TabBar and changes the logic around footer: position detection and the default highlight placement.

So in both examples, one avoids using the default logic for highlighting the accent indicator's "y:" property, which occurs in the material design version of TabBar.qml. As by default, the following occurs (which may not be what you desire):

    // .../qml/QtQuick\Controls.2\Material\TabBar.qml , sets the y: location of the highlight
    y: control.position === T.TabBar.Footer ? 0 : parent.height - height  

Your suggested changes do exactly what I want. Place the indicator under the control text

Best,
Jake