Android Material Design Attempt
-
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 andDropShadow {}
. And how to implement dp? -
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
-
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); } }
-
@Maxim-DC You need a source image (now it is a dark rectangle) for GaussianBlur to "blur".
-
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?
-
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.
-
This has already been implemented: https://github.com/papyros/qml-material