Android Material Design Attempt

Maxim DC

Hello, I found this https://www.google.com/design/spec/what-is-material/material-properties.html and https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-shadows , but i dont know how to implement this at all. I want to do something with the z: level and DropShadow {} . And how to implement dp?

benlau

@Maxim-DC

Solution 1 for Shadow: Using image. The parameter is already provided in the Material design document.

quickandroid/art_shadow_depth_5.png at master · benlau/quickandroid

Solution 2 for Shadow: Using Shader

quickandroid/Shadow.qml at master · benlau/quickandroid

Solution for DP: Get the DP value from system. Then pass it to QML application.

quickandroid/quickandroid.cpp at master · benlau/quickandroid

Maxim DC

Thanks, but can you explain me why the container rectangle is used in this snippet of code?

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    id : shadow
    property real blur : 0
    property alias color : dark.color
    property real horizontalOffset : 0
    property real verticalOffset : 0

    Rectangle {
        id: container
        color : "#00000000"
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: shadow.verticalOffset

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: shadow.horizontalOffset

        width: shadow.width + blur * 4
        height: shadow.height + blur * 4
        visible : false

        Rectangle {
            id : dark
            anchors.centerIn: container
            width: shadow.width
            height: shadow.height
        }
    }

    GaussianBlur {
        anchors.fill: container
        source: container
        radius: shadow.blur * 1.414 * 2
        samples: Math.min(32,radius * 2);
    }

}

benlau

@Maxim-DC You need a source image (now it is a dark rectangle) for GaussianBlur to "blur".

Maxim DC

I have find something that works out very well, here is the code:

main.qml

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: Screen.desktopAvailableWidth
    height: Screen.desktopAvailableHeight
    color: "#F5F5F5"
    visible: true

    Rectangle {
        id: header
        //See function dp() at the end of the code
        width: parent.width
        height: dp(64)
        z: 6
        color: "#212121"
        Shadow {}
    }

    function dp(px) {
        //dp = density-independent pixels
        //1dp = 160px/inch  1inch = 25.4 mm
        return Math.round(px * (Screen.pixelDensity /160 *25.4));
    }
}

Shadow.qml

import QtQuick 2.4

Rectangle {
    anchors.top: parent.bottom
    width: parent.width
    height: dp(parent.z/2)
    gradient: Gradient {
        GradientStop {position: 0.0; color: Qt.rgba(parent.color.r, parent.color.g, parent.color.b, 0.20)}
        GradientStop {position: 1.0; color: "#00000000"}
    }
}

PS: Why does my second blok has another color than the first block?

benlau

@Maxim-DC

function dp(px) {
        //dp = density-independent pixels
        //1dp = 160px/inch  1inch = 25.4 mm
        return Math.round(px * (Screen.pixelDensity /160 *25.4));
    }

If you are looking for consistent look and feel like other Android app, this code may not work. The DP value is in fact truncated to 0.75 , 1 , 1.5 , 2 , 3 ,4 . Therefore, your DP value may be different than other application's DP value.

Thibaut D.

This has already been implemented: https://github.com/papyros/qml-material