Updated 18 June 2025
In this blog, we will learn how to build an app for Ubuntu Touch OS.
Ubuntu Touch OS is a mobile operating system designed for smartphones, tablets, and other smart screens. Originally developed by Canonical, it is now maintained by the UBports community.
Unlike typical Android or iOS devices, it runs a full Linux system like a desktop. This gives users greater control and privacy over their mobile device.
One of the biggest advantages of Ubuntu Touch is that it doesn’t rely on Google services. Unlike most smartphones, it offers an alternative that respects user privacy.
The best way to build high-performance, native apps for Ubuntu Touch is by using QML (Qt Modeling Language) with the Clickable tool.
Steps to Create a QML App
Open Terminal and hit these commands.
1. Install Clickable
First, install Clickable using the command below:
1 |
sudo snap install clickable --classic |
2. Create a New Project
To check that your development environment is set up correctly for Clickable, create a new Clickable project:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
clickable init Select Template: 1 - QML Only 2 - C++ 3 - Python 4 - HTML 5 - Go 6 - Rust 7 - Godot (Precompiled) Choose from 1, 2, 3, 4, 5, 6, 7 [1]: Title [App Title]: Description [A short description of your app]: App Name [appname]: Namespace [yourname]: Maintainer Name [Your FullName]: Maintainer Email [email@domain.org]: Select License: 1 - GNU General Public License v3 2 - MIT license 3 - BSD license 4 - ISC license 5 - Apache Software License 2.0 6 - Not open source Choose from 1, 2, 3, 4, 5, 6 [1]: Copyright Year [2022]: Git Tag Versioning [n]: Save as Default [n]: Successfully created app "appname.yourname" Get started with the following commands: $ cd appname |
To build and run your Ubuntu Touch app on desktop, use the following commands:
1 2 3 4 5 |
// first build your project clickable build // after that run app on desktop clickable desktop |
After the above command, you will see a simple “Hello World” app like this:
We created a demo Ubuntu Touch OS project using Clickable, covering setup, initialization, and running the app in three simple steps.
Create the App Components
We’ll start by creating a productApi.qml file in the qml/api folder.
This QML code fetches product data from a fake store API. It uses QML to load and display product details like title, price, rating, and image.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import QtQuick 2.7 import QtQuick.XmlListModel 2.0 QtObject { id: productApi property ListModel productListModel: ListModel {} function fetchProducts() { var xhr = new XMLHttpRequest(); xhr.open("GET", "https://fakestoreapi.com/products"); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { try { var json = JSON.parse(xhr.responseText); productListModel.clear(); for (var i = 0; i < json.length; ++i) { productListModel.append({ title: json[i].title, price: json[i].price, image: json[i].image, rating: json[i].rating.rate }); } } catch (e) { console.log("Error parsing JSON:", e); } } } xhr.send(); } Component.onCompleted: fetchProducts() } |
This QML code creates a stylish product card layout for a Ubuntu Touch app using Lomiri Components. It displays the product image, title, price, and rating in a clean and responsive design.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import QtQuick 2.7 import Lomiri.Components 1.3 LomiriShape { width: ListView.view.width - units.gu(2) height: units.gu(15) radius: "medium" aspect: LomiriShape.DropShadow RowLayout { anchors.fill: parent anchors.margins: units.gu(1) spacing: units.gu(2) // Product Image LomiriShape { Layout.preferredWidth: units.gu(12) Layout.preferredHeight: units.gu(12) radius: "small" aspect: LomiriShape.Flat Image { anchors.fill: parent source: model.image fillMode: Image.PreserveAspectFit asynchronous: true } } // Product Details ColumnLayout { Layout.fillWidth: true spacing: units.gu(0.5) Label { text: model.title wrapMode: Text.WordWrap maximumLineCount: 2 elide: Text.ElideRight font.bold: true } Label { text: "$" + model.price.toFixed(2) color: LomiriColors.green font.bold: true } Row { spacing: units.gu(0.5) Icon { name: "starred" width: units.gu(1.5) color: LomiriColors.orange } Label { text: model.rating color: LomiriColors.orange } } } } } |
This QML code creates the main view of a Ubuntu Touch app showing products from a fake store API. It uses a ListView with custom product cards and a loading indicator during data fetch.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import QtQuick 2.7 import Lomiri.Components 1.3 import "./api" as Api import "./components" as Components MainView { id: root objectName: 'mainView' applicationName: 'demo.demo' width: units.gu(45) height: units.gu(75) Api.ProductApi { id: productApi } Page { anchors.fill: parent header: PageHeader { title: "FakeStore Products" } ListView { anchors.fill: parent anchors.margins: units.gu(1) model: productApi.productListModel delegate: Components.ProductCard {} spacing: units.gu(1) ActivityIndicator { anchors.centerIn: parent running: parent.count === 0 } } } } |
Now, save your code and run the app using the commands mentioned above.
Ubuntu Touch is a Linux-based mobile OS that offers more control and privacy compared to Android or iOS. It is maintained by the UBports community and works without Google services.
Ubuntu Touch OS allows building secure, Linux-based mobile apps using native or web tech. It offers a privacy-focused, customizable alternative in the mobile ecosystem.
Thanks for reading this blog.
Please check my other blogs here.
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.