Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Notification badge in QML
// Copyright (c) 2013-2014 Alex Spataru <>
// This file is distributed under the GNU GPL 3.0 License
import QtQuick 2.2
// Description: this control allows you to show a notification similar to those //
// in most mobile devices. This control anchors automatically to its parent. //
// The \c text parameter is used to display the notification. //
// The control is automatically resized to fit the notification inside a single line.//
// Enjoy! //
// Screenshot:
Rectangle {
id: badge
smooth: true
// Allow the programmer to define the text to display.
// Note that this control can display both text and numbers.
property alias text: label.text
// Create an animation when the opacity changes
Behavior on opacity {NumberAnimation{}}
// Setup the anchors so that the badge appears on the bottom right
// area of its parent
anchors.right: parent.right
anchors.bottom: parent.bottom
// This margin allows us to be "a little outside" of the object in which
// we add the badge
anchors.margins: -parent.width / 5 + device.ratio(1)
// Set a redish color (exactly the one used in OS X 10.10)
color: "#ec3e3a"
// Make the rectangle a circle
radius: width / 2
// Setup height of the rectangle (the default is 18 pixels)
height: 18
// Make the rectangle and ellipse if the length of the text is bigger than 2 characters
width: label.text.length > 2 ? label.paintedWidth + height / 2 : height
// Create a label that will display the number of connected users.
Label {
id: label
color: "#fdfdfdfd"
font.pixelSize: 9
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
// We need to have the same margins as the badge so that the text
// appears perfectly centered inside its parent.
anchors.margins: parent.anchors.margins
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.