[Patrik Dusek]

Hi all,

I’m currently trying to adjust the tab navigation for my needs. And I’m stucked with two issues:

1. is there a way to force felgo to use the ios tabbar layout also on android?
2. is there a way to hide the tabbar on one navigation page. I want to have one page within the navigation bar but I don’t want to display the tab navigation on this page.

Any hints on this?

thx,

patrik

[Nicola]

Maybe this can help https://felgo.com/doc/felgo-theme/#platform-prop

[AlexFelgo Team]

Hi Patrik,

currently there is no pre-defined bottom tab navigation style available for the Android theme. We plan to add this with one of our next updates. If you need this right away, it is also pretty straightforward to implement this yourself in QML for now. You can hide the default navigation like this:

Navigation {
  navigationMode: Theme.platform == android ? navigationModeNone : navigationModeTabs
}

which wil display tabs on iOS and nothing on Android.

Then you can use the Navigation::currentIndex to get and set the current active item of the Navigation. The rest is then custom styling that you apply to make it look like you want.

Also make sure to lower the height of the Navigation item when you add your tabs below, so the tabs do not cover any content. By default the Navigation is set to “anchors.fill: parent”, so in order to decrease the size, you can set “anchors.bottomMargin: heightOfYourTabs” if the tabs are shown.

I hope that was somewhat understandable!

Cheers,
Alex

[Patrik Dusek]

Hi  Alex,

thx for the explenation. Just to be clear: if I hide the navigation for android I have create an own e.g. tabview or can I reuse the

current navigation in a way and just create some kind of tab displaying items?

thx,

patrik

[AlexFelgo Team]

I would reuse the whole Navigation item (which internally is a TabControl) and just set it to navigationModeNone. And then build just the tabs, e.g. based on https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html , but honestly I think it is even easier to quickly build a completely custom tab-like control. To interact with the Navigation, you can use the currentIndex property.

Cheers,
Alex

[Patrik Dusek]

Hi Alex,

Something like that?

    Navigation {
        id: navigation
        navigationMode: navigationModeNone 

....

    
Row {
         spacing: 2
         width: parent.width
         height: dp(100)
         anchors.bottom: parent.bottom
         visible: true
         Rectangle {
             color: "red";
             opacity: navigation.currentIndex == 0?1:0.5
             width: parent.width/4;
             height: parent.height
             MouseArea {
                anchors.fill: parent
                onClicked: {
                    navigation.currentIndex = 0
                }
             }
         }
         Rectangle {
             color: "green";
             opacity: navigation.currentIndex == 1?1:0.5
             width: parent.width/4;
             height: parent.height
             MouseArea {
                anchors.fill: parent
                onClicked: {
                    navigation.currentIndex = 1
                }
             }
         }
         Rectangle {
             color: "blue";
             opacity: navigation.currentIndex == 2?1:0.5
             width: parent.width/4;
             height: parent.height
             MouseArea {
                anchors.fill: parent
                onClicked: {
                    navigation.currentIndex = 2
                }
             }
         }
         Rectangle {
             color: "black";
             opacity: navigation.currentIndex == 3?1:0.5
             width: parent.width/4;
             height: parent.height
             MouseArea {
                anchors.fill: parent
                onClicked: {
                    navigation.currentIndex = 3
                }
             }
         }
     }

best,

patrik

[AlexFelgo Team]

Yes pretty much.

Cheers,
Alex