Solved StackView icon on Android
-
I use StackView based QML project from QtCreator generated project structure.
On most platforms (Win, Linux, some Android) everything looks great, but on one device with Android 8 the menu button display bug appears.Normal appearance:
Bug on Android:
The reason is in this autogenerated code:
text: stackView.depth > 1 ? "\u25C0" : "\u2630"
Same issue:
https://stackoverflow.com/questions/64208306/qml-the-menu-icon-will-does-not-show-up-correctlyPlease advise how to fix this bug.
Thanks in advance. -
@Bleach They are equivalent, but since you're using QML, I would suggest the FontLoader
https://doc.qt.io/qt-5/qml-qtquick-fontloader.html#details
the docs show a website as source, you can just as well pass it an url that points to your resource system, and a ttf file in there
-
@Bleach said in StackView icon on Android:
Please advise how to fix this bug.
Use the right font which support the unicode you want to display!
Take a look at FontLoader: https://doc.qt.io/qt-5/qml-qtquick-fontloader.html -
Thanks. But how to find out which font is "right"? That is, which will be correctly displayed on Linux, Win, Mac, Android ans iOS.
-
@Bleach said in StackView icon on Android:
That is, which will be correctly displayed on Linux, Win, Mac, Android ans iOS.
For example "Segoe UI Symbol" contains those unicodes, but there are many others I think!
Perhaps you should first check which fonts you are using on the system which it works ;)
For example with:Text { text: "Used font is " + font.family + " - \u25C0 - \u2630" }
You could also list available fonts with
ListView { anchors.fill: parent; model: Qt.fontFamilies() delegate: Item { height: 40; width: ListView.view.width Text { anchors.centerIn: parent font.family: modelData text: modelData + " - \u25C0 - \u2630" } } }
-
in my ToolBar I'm using ToolButtons with customized Images
Image { anchors.centerIn: parent source: "qrc:/your-path-to-images/menu.png" }
you can switch between menu.png and arrow_back.png depending on stackView.depth
Icons downloaded from https://material.io/resources/icons/ you'll find all needed sizes for ....png, ...@2x.png, ...@3x.png to always get the correct size depending from screen resolution -
Thanks guys. On the android device on which the bug is appear, no any font contains the required characters.
I'll have to use the icon, as I wrote @ekkescorner. The main reason why I don't want to do this is that the character approach has already been tested on different platforms and devices. But there seems to be no other way out.
-
@Bleach said in StackView icon on Android:
But there seems to be no other way out.
you can always ship a font with your application, one that has the characters, and load the font manually via
QFontDatabase::addApplicationFont QWidget
or FontLoader component in QML -
@J-Hilk Thanks. Which approach do you think would be better?
-
@Bleach They are equivalent, but since you're using QML, I would suggest the FontLoader
https://doc.qt.io/qt-5/qml-qtquick-fontloader.html#details
the docs show a website as source, you can just as well pass it an url that points to your resource system, and a ttf file in there
-
@Bleach said in StackView icon on Android:
Thanks. Which approach do you think would be better?
I prefer define myself the used fonts, so I am sure App looks same on every device.
I do something like this:int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); const QString fontFilename(QStringLiteral("Resources/fonts/GOTHIC.TTF")); QString fontFamily(QStringLiteral("Century Gothic")); if(QFileInfo::exists(fontFilename)) { int fontId = QFontDatabase::addApplicationFont(fontFilename); fontFamily = QFontDatabase::applicationFontFamilies(fontId).first(); QFontDatabase::addApplicationFont("Resources/fonts/GOTHICB.TTF"); QFontDatabase::addApplicationFont("Resources/fonts/GOTHICBI.TTF"); QFontDatabase::addApplicationFont("Resources/fonts/GOTHICI.TTF"); } // update default font QFont defaultFont = app.font(); defaultFont.setFamily(fontFamily); app.setFont(defaultFont); ... return app.exec(); }
-
@KroMignon Thanks again. Works great.
-
@Bleach your welcome
-
I hurried to the conclusion(
The font in the program changed, on the desktop and Android 5 everything works fine, but on the device with Android 8 the above-mentioned symbols are still not displayed correctly.
Desktop:
-
@Bleach said in StackView icon on Android:
I hurried to the conclusion(
The font in the program changes, on the desktop and Android 5 everything works fine, but on the device with Android 8 the above-mentioned symbols are still not displayed correctly.too bad :(
Do you have checkedQFontDatabase::addApplicationFont()
return value?
-1
is returned in case of error (cf. https://doc.qt.io/qt-5/qfontdatabase.html#addApplicationFont) -
@KroMignon said in StackView icon on Android:
Do you have checked QFontDatabase::addApplicationFont() return value?
Yes, it return positive value. And besides, the app font has changed to what I added.
UPD. Same issue on Android 10 (both case - default font and loaded by myself OpenSans).
-
@Bleach said in StackView icon on Android:
Yes, it return positive value. And besides, the app font has changed to what I added.
UPD. Same issue on Android 10 (both case - default font and loaded by myself OpenSans).Strange, I can not explain this behavior. Perhaps you should use pictures or try with fontawesome?
-
@Bleach FWIW, my Android phone (10) displays an appropriate icon for
\u2630
. -
@KroMignon said in StackView icon on Android:
Perhaps you should use pictures or try with fontawesome?
If it doesn't work with fonts, then I'll do it.
@LorenDB . Could you please send me your StackView sample apk? Ill try to deploy it on problem devices.
I reproduce this bug from Linux host. Prev tests was from Win 10.
Now this looks like a problem with the devices OS. But it is very strange that with two at once..