Android. Java vs Qt QML - Tutorial 000. Enable Material Design

material design, Android

When you develop both Java and Qt QML, you need to enable Material Design.

Material Design on Java

In the case of Java, it's enough to include the theme design in the styles.xml file and set the required color gamut for the application.

styles.xml

<resources>

    <style name="AppTheme" parent="android:Theme.Material">
        <!-- Main theme colors -->
        <!--   your app branding color for the app bar -->
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <!--   darker variant for the status bar and contextual app bars -->
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--   theme UI controls like checkboxes and text fields -->
        <item name="android:colorAccent">@color/colorAccent</item>
    </style>

</resources>

colors.xml

Colors are specified in this file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

Material Design on Qt QML

In order to use Material Design on Qt QML, you must enable the use of Qt Quick Controls 2 in the project profile.

QT += quick quickcontrols2

Next, we connect the QQuickStyle class in main.cpp to use the static method of this class to include the Material Design style for the entire application.

#include <QGuiApplication>
#include <QQuickStyle> // Class to enabling styling
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQuickStyle::setStyle("Material"); // Enable Material Design

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

Changing the color scheme

To change the color style of the style, use the configuration file qtquickcontrols2.conf , which should be placed in the project root next to the project profile. You can add this file to resources to make it easier to work with this file from the IDE.

[Material]
Primary=#3F51B5
Accent=#FF4081
Theme=#303F9F
Foreground=#ffff00
Background=#00ffff

Color scheme settings

In Java, there are the following color scheme settings

• colorPrimary - basic color, for example color Action Bar
• colorPrimaryDark - color of the status bar
• textColorPrimary - color of text for inscriptions on top of elements with a background colorPrimary
• windowBackground - application background color
• navigationBarColor - color of the phone's navigation menu
• colorAccent - color of elements, such as checkboxes, etc.

Qt QML has only five color settings

• Primary - basic color, elements similar to Action Bar
• Accent - color elements such as checkboxes
• Theme - color theme, applied to both the main application window as a background, and for pop-up menus or other other elements. Can also be overridden by Foreground and Background properties
• Foreground - a separate color theme setting, can be applied to text, redefines the Theme settings.
• Background - It is used to define the background of such elements as the menu, Navigation Drawer, etc. redefines the settings of Theme.

For Theme, you can use System as the value, which means using system color palettes. But you can do color correction with Foreground and Background.