How to use Qt QML Blur Effect ?
In this simple tutorial we are going to see how we can use nice and simple blur effects in QML. And at the end of tutorial we will collect it all in a single project that is available in Github and you can download it.
One of the main aspects of blur effect is making user interface beautiful and meaningful. This will help our users to use our application easier while improving its graphical interface.
Qt QML is a powerful tool to creating blur effects easily. So in this tutorial I will show you some types of creating blur in QML that you can easily use in your app right now.
The process is simple and we don’t need any third party libraries and we can use QML available graphical effects.
Display Content on Top of Blurred Area
In this type of blur effect, first we show our main content to user and when we need to show user some more interesting stuff, we will make current content blurry and show new content on top of that.
This will look like something like this:
Item {
id: blurBackgroundPage
// Main content that will be blurred
Item {
id: blurPageMainContent
anchors.fill: parent
Image {
id: imgBackground
// ...
}
Rectangle {
// ...
Column {
// ...
Text {
text: qsTr("Hi")
}
Button {
text: qsTr("Blur")
onClicked: {
// Here we will show blur effect
blurBackgroundOverlay.visible = true
blurPageOverlayContent.visible = true
}
}
}
}
}
FastBlur
{
id: blurBackgroundOverlay
visible: false
anchors.fill: blurPageMainContent
source: blurPageMainContent
radius: 85
}
// Top content to show up on blurred area
Item {
id: blurPageOverlayContent
anchors.fill: parent
visible: false
Rectangle {
// ...
Column {
spacing: 5
anchors.centerIn: parent
Text {
text: qsTr("This item is on top of main content")
}
Button {
text: qsTr("Close")
onClicked: {
// Here we will discard blur effect
blurBackgroundOverlay.visible = false
blurPageOverlayContent.visible = false
}
}
}
}
}
}As you can see in the source code, there is two areas, first for the content behind the blur and second for the content that are on top of blurred are.
Using this effect will draw your user attention to the area on top of blurred section easily and user will be focused on it.
Blur a Single Item
One of the simple blur effects is blurring just a single item. In this example we will blur a single image item in QML like this:
Item {
id: blurImagePage
Button {
id: buttonBlurToggleFilbandMountainsImage
// ...
text: qsTr("Toggle Blur")
onClicked: blurImageFilbandMountains.visible = !blurImageFilbandMountains.visible
}
Image {
id: imgFilbandMountainsWithSnow
width: 300
anchors.centerIn: parent
fillMode: Image.PreserveAspectFit
source: "qrc:/images/filband-mountains.jpg"
}
FastBlur
{
id: blurImageFilbandMountains
visible: false
anchors.fill: imgFilbandMountainsWithSnow
source: imgFilbandMountainsWithSnow
radius: 85
}
}As you can see in the example, blurring single item is straightforward.
Blur an Item and Sub-items
To blur a portion of the page you can nest items together and use only one blur item to blur them all. So this will almost like blurring one item but that item will have multiple items nested in it like this example:
Item {
id: blurRectangleAndSubitemsPage// ...Button {
// ...
text: qsTr("Toggle Blur")
onClicked: blurRectangleAndSubItems.visible = !blurRectangleAndSubItems.visible
}// This rectangle has multiple items which all of them will be blurred
Rectangle {
id: rectMultpleSubitems
// ...Row {
anchors.centerIn: parent
Image {
id: imgFilbandGuySmoking
// ...
}Image {
id: imgFilbandMakingLove
// ...
}
}Text {
// ...
text: qsTr("I am a text inside this rectangle!")
}
}FastBlur
{
id: blurRectangleAndSubItems
visible: false
anchors.fill: rectMultpleSubitems
source: rectMultpleSubitems
radius: 85
}
}
As you can see in the example the process of blurring item is same as single blur item, but that item contains other items inside itself which is not a problem for us and blur effect will be correctly applied to the items.
Animating Blur Effect
It will be amazing to animate blur effect itself! So instead of instantly flashing blur effect to user, we can show it smoothly like this example:
Item {
id: animateBlurPage// Toggle animation every 2 seconds, so we can see it multiple times
Timer {
id: timerBlurAnimation
running: true
interval: 2000
repeat: trueonTriggered: blurAnimationOverlay.opacity = blurAnimationOverlay.visible ? 0 : 1
}Item {
id: blurAnimationPageMainContent
anchors.fill: parentImage {
id: imgAnimatedBlurBackground
// ...
}Rectangle {
// ...Column {
spacing: 5
anchors.centerIn: parentText {
text: qsTr("Wait to see blur")
}Button {
text: qsTr("Dummy")
}CheckBox {
text: qsTr("Dummy")
}RadioButton {
text: qsTr("Dummy")
}
}}}FastBlur
{
id: blurAnimationOverlay
opacity: 0
visible: opacity !== 0
anchors.fill: blurAnimationPageMainContent
source: blurAnimationPageMainContent
radius: 85// This Behavior will let us to animate blur effect with its opacity
Behavior on opacity
{
NumberAnimation
{
duration: 500
easing.type: Easing.InOutQuad
}
}
}
}
As you can see in the above source code, I’m using QML `Behavior`s to implement a nice fade effect on the blurred area.
This effect will be make our user experience much nicer.
So that was it!
I hope you enjoyed this tutorial and let me know what you think about this article in the comment section below.
And don’t forget to use and contribute to my Github project that is contains the all of source codes for this tutorial:
Thank you and happy coding!
