Android UI doesn't match desktop
-
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...
-
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
-
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
@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...
-
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...
-
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...
@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 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.
@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...
-
@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 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.
-
@TomZ thanks for the explanation. So, regarding my original question, any ideas on what I might try next?
Thanks...
@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.
-
@TomZ thanks for the explanation. So, regarding my original question, any ideas on what I might try next?
Thanks...
-
@mzimmers you need to show some code. I have tabbuttons as well and they look same on Linux and Android.
@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.
-
@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.
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...
-
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.