StackView icon on Android

[Bleach]

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-correctly

Please advise how to fix this bug.
Thanks in advance.

[J.Hilk]

@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

[KroMignon]

@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

[Bleach]

Thanks. But how to find out which font is "right"? That is, which will be correctly displayed on Linux, Win, Mac, Android ans iOS.

[KroMignon]

@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"
        }
    }
}

[ekkescorner]

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

[Bleach]

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.

[J.Hilk]

@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

[Bleach]

@J-Hilk Thanks. Which approach do you think would be better?

[J.Hilk]

@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

[KroMignon]

@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();
}

[Bleach]

@KroMignon Thanks again. Works great.

[KroMignon]

@Bleach your welcome

[Bleach]

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:

[KroMignon]

@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 checked QFontDatabase::addApplicationFont() return value?
-1 is returned in case of error (cf. https://doc.qt.io/qt-5/qfontdatabase.html#addApplicationFont)

[Bleach]

@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).

[KroMignon]

@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?

[LorenDB]

@Bleach FWIW, my Android phone (10) displays an appropriate icon for \u2630.

[Bleach]

@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..