Every developer knows how frustrating it is when you have the theory but no finished app. Ideas pile up, examples work separately, but assembling them into a product you’re not ashamed to publish in the store suddenly turns out to be harder than it seemed.
This chapter gradually reveals how a full-fledged mobile app is born from a set of scattered QML techniques. You’ll discover why proper planning saves weeks of development.
Without spoilers, we’ll leverage QtMultimedia, QtSensors, timers, and interface scaling, and show how to connect QML and C++ in a working project. In just one chapter, you’ll encounter 5 key practical techniques that professional mobile developers use daily.
Skip this chapter—and you’ll keep writing “demos,” not apps.
This chapter includes ready-to-use code examples.
Chapter Self-Assessment
What are the two ways to organize media files in Qt applications mentioned in the chapter, and for which file types is the asset system recommended?Answer
Correct answer: Qt resource system (qrc) and app asset system (assets). Assets are recommended for large files and multimedia files, as well as for storing app icons.
Why is the minDim property used in the app, and how is it calculated?Answer
Correct answer: The minDim property ensures element sizes are independent of screen resolution. It’s calculated as Math.min(width, height)—the minimum dimension of the device screen.
What is a DelayButton element and how does it differ from a regular button?Answer
Correct answer: DelayButton is a button with delayed activation that only triggers after being held for a specified time (delay property). It supports wait process visualization and a toggleable state.
Why does the author recommend starting with a simple first version of the app rather than making it perfect right away?Answer
Correct answer: The first version is a proof of concept. It’s more important to deliver the basic idea to users, then develop the app gradually based on their feedback, which saves time and resources.
Why is it important to properly choose the app name and icon?Answer
Correct answer: The name should reveal the app’s functionality and be unique to avoid conflicts. The icon is the first thing users see in the store, and a good visual representation significantly increases interest in the app.
Why does the Gyroscope element use the skipDuplicates: true property?Answer
Correct answer: This conserves battery by avoiding receiving and processing identical data from the sensor, which is especially important for mobile devices.
Why do you need to replace ffmpegmediaplugin with darwinmediaplugin in the project file for iOS?Answer
Correct answer: The standard ffmpegmediaplugin doesn’t compile for iOS, so you need to use the native darwinmediaplugin, which uses Apple’s built-in media frameworks (AVFoundation).
How is the visual alarm effect implemented in the app when the alarm triggers?Answer
Correct answer: A combination of a timer (Timer) and sound (MediaPlayer) is used: the timer periodically changes the background color from white to red and back, while MediaPlayer plays a siren sound in an infinite loop.
What happens if you don’t call showFullScreen() for an iOS app?Answer
Correct answer: The notification area at the top of the screen won’t be covered, and the app won’t occupy the entire available screen area of the device.
Why is the Connections object used in the Canvas element to track button progress changes?Answer
Correct answer: Connections allows redrawing the Canvas when the button state changes (progress, down, checked) by calling requestPaint(), which enables animation of the red ring around the button.
How do you get information about which operating system the app is running on in QML code?Answer
Correct answer: Use the Qt.platform.os property, which returns a string with the operating system name (e.g., “ios”, “android”).
What happens if you set the loops property of a MediaPlayer element to MediaPlayer.Infinite?Answer
Correct answer: The audio file will play in an infinite loop until playback is explicitly stopped by calling the stop() method.
Why don’t the dimensions of the app’s main element (320×480) matter for mobile devices?Answer
Correct answer: The app on a mobile device runs in fullscreen mode and automatically takes the screen dimensions. The specified dimensions are only needed for running on a computer in test mode.
What minimum rotation angle along the X, Y, Z axes is considered critical for triggering the alarm?Answer
Correct answer: The alarm triggers when movement exceeds 10 degrees along any axis (maximum value from Math.abs for x, y, z).
What happens if the user changes the main element’s alarm property to false during an alert?Answer
Correct answer: The onAlarmChanged handler will trigger, which stops the timer and sound playback, returning the app to its normal state with a white background.
Practical Assignments
Easy Level
Countdown Timer with Visualization
Create a simple Qt Quick application with a 10-second countdown timer. When the app starts, the countdown should begin, displayed in large text in the center of the screen. When it reaches zero, play a short beep and change the background color to green.
Hints: Use the Timer element with interval: 1000 to update every second. For time display, use Text with font.pixelSize calculated through minDim. You’ll need MediaPlayer for sound. Don’t forget to add multimedia and qml modules to the .pro file.
Medium Level
Motion Detector with Sensitivity Settings
Extend the app idea from the chapter: create a motion detector with adjustable sensitivity. Add a Slider to adjust the trigger threshold (from 5 to 30 degrees), a text indicator for current sensitivity, and a visual indicator of the current motion level in real-time. Implement adaptive scaling for all UI elements.
Hints: Use Gyroscope with continuous monitoring. Create a Rectangle as an indicator with variable width tied to the movement value. Use Slider.value as the trigger threshold. Calculate all dimensions through parent.minDim for adaptability. Add Text elements to display values.
Hard Level
Multi-mode Alarm with Event History
Create an advanced alarm app version with three operating modes: motion (gyroscope), sound (microphone via QtMultimedia), and combined mode. Add an event log with timestamps of triggers that persists between launches. Implement customizable profiles (home, office, street) with different sensitivity parameters. Use Canvas to visualize activity levels from all sensors in real-time.
Hints: Use StackView or SwipeView to switch modes. For data persistence, use LocalStorage or Settings. AudioRecorder will be needed for sound monitoring. Canvas with onPaint draws activity graphs. Create separate components for each mode. ListModel + ListView for the event log. Don’t forget proper cleanup when switching modes.
💬 Join the Discussion!
Did you manage to implement the alarm app? What challenges did you face working with the gyroscope or sound playback?
Share your ideas for improving the app, talk about the solutions you found, or ask questions about scaling interfaces!
Maybe you came up with your own variant for using sensors in mobile apps? Let’s discuss together!