Android UI doesn't match desktop

mzimmers

Hi all -

My app uses a couple of TabBars. When I build for my desktop (Windows 10), they look the way I want them to:

but on the Android (emulator or real tablet), the background changes:

Does anyone have an idea of where I should be looking to fix this?

Thanks...

JoeCFD

in your tab button add 
background: Rectangle {
    width: root.width
    height: root.height
    color:/* set to the grey color of the tabbar or main widget*/
}

This is what I did since I have customized button color.

TomZ

This is a case of using different themes. "Material" on Android.

Likely you want to hardcode your theme to avoid this issue when moving between platforms.
As IMOHO the Android default is ugly A-F, thats the route I took.

I personally go with the simplest theme, called "Basic", which allows me to change the palette for dark/light themes completely custom. Android has some bugs there, most important one is that the Label doesn't follow the color theme, but a simple Solution is simple.

You can do this using https://doc.qt.io/qt-6/qtquickcontrols2-configuration.html or, just in your main / first qml file you write the simple line
import QtQuick.Controls.Basic

JoeCFD

better to show some code.

mzimmers

@TomZ thank you for the suggestion. I originally had imported QtQuick.Controls.Fusion, but when I changed it to QtQuick.Controls.Basic it didn't change anything.

I even added this to my customized TabButton:

    background: Rectangle {
        color: 'transparent'//opacity: 0
    }

but that doesn't help. Any other ideas?

Thanks...

mzimmers

BTT: any suggestions, anyone?

I do notice that I get these warnings when running the application, both on a real tablet and the Android emulator:

Warning: QML import could not be resolved in any of the import paths: QtQuick.Controls.Windows
Warning: QML import could not be resolved in any of the import paths: QtQuick.Controls.macOS
Warning: QML import could not be resolved in any of the import paths: QtQuick.Controls.iOS
Warning: QML import could not be resolved in any of the import paths: colors.stylesheet
Warning: QML import could not be resolved in any of the import paths: styles.stylesheet
Warning: QML import could not be resolved in any of the import paths: system.status

I don't know whether these are related to my issue, but I probably should fix these anyway.

Thanks...

JoeCFD

@mzimmers I guess the first three warnings are caused by missing import QtQuick.Controls.Windows or QtQuick.Controls.macOS or QtQuick.Controls.iOS in some of the qml files. They normally do not affect the display of your app. Otherwise, they should be errors. I have even more warnings which are simply ignored. Sure better to fix them.

mzimmers

@JoeCFD well, I guess it makes sense that something built for Android wouldn't have Windows/macOS/iOS files, but the warning seems to suggest it's looking for something there. (I wish the message would say which import was missing.)

Are these messages saying that something can't be imported, or that the path itself is missing? Not really clear...

TomZ

@mzimmers said in Android UI doesn't match desktop:

Are these messages saying that something can't be imported, or that the path itself is missing? Not really clear...

I've seen them too for ages. Even my private package (which only contains C++ stuff) is listed as missing.
Never had any issues, though.

What I think they mean is that on your native build and/or your target build it can't find those QMLs. On my Linux machine the Windows/Apple styles are simply not available. Which is Ok.

So my guess is that the Qt shipped QMLs refer to them, and the packaging tool simply tries hard to find stuff to include in the APK.

mzimmers

@TomZ thanks for the explanation. So, regarding my original question, any ideas on what I might try next?

Thanks...

TomZ

@mzimmers said in Android UI doesn't match desktop:

So, regarding my original question, any ideas on what I might try next?

My suggested attention points.

use the same theme on different devices. The Basic is most useful for cross-platform stuff.
hardcode the palette in your app. Example: https://codeberg.org/Flowee/pay/src/branch/master/guis/ControlColors.js
Check what happens with different types of Controls. Is this a common issue for all controls, or do some have a different behavior?
Make sure you are on Qt6. Thats where the development and the bugfixes go.

JoeCFD

@mzimmers you need to show some code. I have tabbuttons as well and they look same on Linux and Android.

mzimmers

@JoeCFD here's the code for the lower TabBar in my pictures:

import QtQuick 2.12
import QtQuick.Controls
import QtQuick.Layouts

import styles.stylesheet 1.0 // for custom fonts

Rectangle {
    id: filterBar

    property real itemSpacing: 0
    property color backgroundColor
    property alias tabIndex: filterTabs.currentIndex
    property int tabHeight: 48

    color: backgroundColor
    Layout.minimumHeight: filterBar.tabHeight
    Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
    Layout.bottomMargin: 24

    TabBar {
        id: filterTabs
        property real fontSize: 16

        height: filterBar.tabHeight
        spacing: itemSpacing
        font.pixelSize: filterTabs.fontSize
        width: parent.width

        Modebutton {
            text: qsTr("All site")
            font.weight: (filterLayout.currentIndex === 0) ? Font.DemiBold : Font.Light
        }
        Modebutton {
            text: qsTr("Pool")
            font.weight: (filterLayout.currentIndex === 1) ? Font.DemiBold : Font.Light
        }
        Modebutton {
            text: qsTr("Spa")
            font.weight: (filterLayout.currentIndex === 2) ? Font.DemiBold : Font.Light
        }
    }
    StackLayout {
        id: filterLayout
        currentIndex: filterTabs.currentIndex
    }
}

the ModeButtons are in this file:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import styles.stylesheet 1.0 // for custom fonts

TabButton {
    id: button

    property string buttonIcon: ""
    property real imageSize: 24

    height: parent.height
    width: implicitWidth
    anchors.verticalCenter: parent.verticalCenter

    background: Rectangle {
        opacity: 0
    }

    icon {
        source: button.buttonIcon
        height: button.imageSize
        width: button.imageSize
    }

    text: "this should not appear"
}

Thanks for looking.

mzimmers

An additional data point: it's the style that's causing this. I tried setting my style to Material, and my desktop matched the Android (but it's not what I want).

So, I guess my question should be, how can I make the TabBar backgrounds transparent (in Material)?

Thanks...

JoeCFD

in your tab button add 
background: Rectangle {
    width: root.width
    height: root.height
    color:/* set to the grey color of the tabbar or main widget*/
}

This is what I did since I have customized button color.

mzimmers

@JoeCFD that was it. Doing this alone produced this display:

So I added a similar passage to the TabBar itself:

        background: Rectangle {
            anchors.fill: parent
            color: filterBar.backgroundColor
        }

And now it's good. Thank you!