QML

When creating UIs it’s a common task to build your own set of reusable UI Components, if you dont want to rely on the built-in set of the framework.
I was very curious how this is done in native Android app-development and how this fancy new language Kotlin works in this context.
A quick search brought me to this excellent tutorial from Eley “Building Custom Component with Kotlin”.

So here is the goal:

Create a reusable component which contains a label, an editable textline and a switch, formatted as you can see in the picture below (original picture slightly adjusted).

I will show the lines of code you need to achieve this goal with Native Android + Kotlin on the one hand and Android -styled QML on the other hand.

Continue …

In the previous post we have seen, how to create icons which scale properly. Additionally I have added a scalingFactor property to the IconSVG:

//IconSVG.qml
import QtQuick 2.0
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Image {
    id: root

    property alias color: colorOverlay.color
    property int size: 24  // default
    property real scalingFactor: 1

    sourceSize.width: size * scalingFactor
    sourceSize.height: size * scalingFactor

    ColorOverlay {
        id: colorOverlay
        anchors.fill: root
        source: root
        color: "#000000"
    }
}

Now let’s see, how this can be useful in a real usecase.

Continue …

It’s a lot of work to provide icons for mobile devices, because of the large number of different formfactors and screen pixel-densities.

Android is using the following set of values:

Source: http://developer.android.com/guide/practices/screens_support.html

To ensure that you get sharp icon shapes you need to provide different icon-files (usually png-files) for each DPI class.

Continue …