Instant Android Apps
Instant Android Apps
Jasonette makes it supremely easy to build simple and advanced Android apps with a minimum of coding.
For someone who doesn't write code for a living, creating even the simplest Android app can be a daunting proposition. However, for those of us with modest coding skills, there is Jasonette [1]. This ingenious solution makes it possible to create a full-featured Android app using a single JSON file that defines the app's basic structure and behavior. A generic Jasonette Android app pulls this JSON file and renders it as native Android components.
Creating a Jasonette-based app still requires some basic coding skills, but writing a JSON file is significantly easier than writing Java or Kotlin code. Also, building the Jasonette app in the Android Studio IDE requires only a few simple steps. Better still, because the JSON file controls the app's appearance and behavior, you can easily update and improve it by editing the JSON code instead of rebuilding the entire app.
Preparatory Work
Before you start, you need to do some preparatory work. First, download and install Android Studio [2] on your machine. If you happen to use openSUSE, installing Android Studio is a matter of running the following commands:
sudo mv android-studio-xx-xxx-xxx.zip /opt cd /opt sudo unzip android-studio-xx-xxx-xxx.zip sudo chown -R root:root android-studio sudo ln -s /opt/android-studio/bin/studio.sh /usr/local/bin/android-studio
You don't need to use Android Studio to build an app just yet, though. To preview your JSON files directly on your Android device and test your app's basic functionality without building it in Android Studio first, you can use the Jason browser [3].
Instead of a regular text editor, you can use a dedicated tool for JSON code, such as JSON Editor Online [4], which runs directly in the browser, or the Elegant JSON Editor [5] Firefox add-on (Figure 1).
Creating a JSON File
To get a basic understanding of what makes Jasonette tick and how JSON code works, take a look at the simple Jasonette app in Listing 1.
Listing 1
Simple Jasonette App
{ "$jason": { "head": { "title": "Random Monkey", "description": "Display a random monkey photo", "actions": { "$pull": { "type": "$reload" } }, "styles": { "caption": { "font": "Roboto", "size": "13", "align": "center", "spacing": "15" }, "image": { "width": "100%" } } }, "body": { "header": { "title": "Random Monkey", "style": { "font": "Roboto", "size": "25" }, "menu": { "text": "Unsplash", "href": { "url": "https://unsplash.com", "view": "web" }, "style": { "font": "Roboto", "size": "19" } } }, "sections": [ { "items": [ { "type": "image", "url": "https://source.unsplash.com/random/800x600/?monkey", "class": "image" }, { "type": "label", "text": "Here is a random monkey photo", "class": "caption" } ] } ] } } }
This simple JSON code defines the basic structure and behavior of the app that fetches and displays a random photo of a monkey. Similar to an HTML page, the JSON file's head
section (Listing 2) specifies general properties such as the app's title, description, and actions:
Listing 2
head Properties
"$jason": { "head": { "title": "Random Monkey", "description": "Display a random monkey photo", "actions": { "$pull": { "type": "$reload" } }, "styles": { "caption": { "font": "Roboto", "size": "13", "align": "center", "spacing": "15" }, "image": { "width": "100%" } } }, ... {
The $pull
action in the header enables the pull-to-refresh action. The styles
section is used to specify styling for various interface elements. In this example, it is caption
for image text, and image
for the image element. The body
section (Listing 3) includes the three main elements of the app's interface: header
, menu
, and sections
.
Listing 3
body Properties
"body": { "header": { "title": "Random Monkey", "style": { "font": "Roboto Bold", "size": "25" }, "menu": { "text": "Unsplash", "href": { "url": "https://unsplash.com", "view": "web" }, "style": { "font": "Roboto", "size": "19" } } }, "sections": [ { "items": [ { "type": "image", "url": "https://source.unsplash.com/random/800x600/?monkey", "class": "image" }, { "type": "label", "text": "Here is a monkey photo", "class": "caption" }
The header
section in Listing 3 defines the app's header (the fixed bar at the top of the screen). In this case, the header contains a title
and a menu
item that opens the specified URL in the default browser. Note that in addition to the global styles, it's also possible to define inline styles for individual elements. For example, an inline style right after the title
element defines the appearance of the header title. The sections
part contains an array of items. In this example, the array consists of two items: The first one is the image, and the second one is its text label. And that's all there is to it.
To test your first app, you don't have to host the JSON file on your own server. Instead, you can use the jasonbase [6] JSON hosting service. Create a new file, give it a name, paste the code, and save the changes. Make note of the created JSON file's URL, launch the Jason app on your Android device, enter the JSON file's URL, and press Go. This adds a new entry, and you can launch the app by tapping on it (Figure 2).
Building a Photo Portfolio App
With a few simple tweaks, you can transform the simple example app into a portfolio for displaying photos stored on your server. For this app, you need a web server for hosting a JSON file and photos. To keep things tidy, create a dedicated directory on the server for storing photos and the JSON file (e.g., photoapp
). Before you copy photos into that directory, you should resize and recompress them. This will make your app run faster and reduce the amount of data that needs to be transferred. The perfect tools for the job are jpeg-recompress
[7] and ImageMagick's mogrify
. With these two tools installed on your system, you can use the following command to recompress or resize all JPG files in the current directory:
for file in *.jpg; do jpeg-recompress --quality high $file $file; done mogrify -resize "1600>" *.jpg
With all the pieces in place, you are ready to start working on the JSON file. At first glance, all you need to do is to change the appropriate properties and add image and label items for each photo. This quick-and-dirty solution has serious drawbacks, though. All URLs are hard-wired into the JSON file, so every time you add a new photo, you need to create another item in the JSON file manually.
One way to solve this problem is to replace the JSON file with a PHP script that generates JSON data on the fly. Listing the entire PHP script is not very practical, so instead, use the command
git@gitlab.com:dmpop/jasonette-tokyo-taxi.git
to grab the source code of the Tokyo Taxi Lights [8] app. Then open the json.php
script that powers the app.
The script is not particularly difficult to parse. It starts by reading all files with the specified file extension (by default it's JPEG) into the $files
array:
$files = array(); foreach (glob($ext) as $file) { $files[] = $file; }
To pick a specified number of random photos, the script uses the shuffle()
function:
shuffle($files); $files = array_slice($files, -$number);
The script then checks whether each photo has an accompanying .txt
file. If the text file is detected, its content is used as a caption; otherwise, the file name is used as the caption:
$txt = pathinfo($file, PATHINFO_FILENAME).".txt"; if (file_exists($txt)) { $caption = rtrim(file_get_contents($txt)); } else { $caption = rtrim(pathinfo($file, PATHINFO_FILENAME)); }
Finally, the obtained and assembled data is used to generate a complete JSON file.
If you have a working knowledge of PHP, you can modify the script to fit your particular needs. Otherwise, you can modify the user-defined values only. Copy the resulting PHP script to the web server and start building your first Android app in Android studio.
Use the command
git clone https://github.com/Jasonette/JASONETTE-Android.git
to clone the JASONETTE-Android app's source code. Launch Android Studio by running the android-studio
command in the terminal and import the JASONETTE-Android project. Next, open the app/res/values/strings.xml
file, locate the <string name="app_name">Jasonette</string>
line, and replace Jasonette
with the desired name (Figure 3). Then, replace the default URL in
<string name="url">https://jasonette.github.io/Jasonpedia/hello.json</string>
with the actual URL to your JSON file.
Now prepare an image file in the PNG format for use as an app icon. In Android Studio, right-click on the app | res folder and choose New | Image Asset. Use the prepared PNG file to create and add an app icon (Figure 4).
Open the Gradle Scripts | build.gradle(Module:app) file, locate the applicationId "com.jasonette."
line, and replace com.jasonette
with the desired app ID. Press the Sync Now link to synchronize the changes. Now, choose Build | Build APK(s) to build the app.
To install the resulting app-debug.apk
package on an Android device (Figure 5), switch to Settings | Security and enable the Unknown Sources option.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.

News
-
First Release Candidate for Linux Kernel 6.14 Now Available
Linus Torvalds has officially released the first release candidate for kernel 6.14 and it includes over 500,000 lines of modified code, making for a small release.
-
System76 Refreshes Meerkat Mini PC
If you're looking for a small form factor PC powered by Linux, System76 has exactly what you need in the Meerkat mini PC.
-
Gnome 48 Alpha Ready for Testing
The latest Gnome desktop alpha is now available with plenty of new features and improvements.
-
Wine 10 Includes Plenty to Excite Users
With its latest release, Wine has the usual crop of bug fixes and improvements, along with some exciting new features.
-
Linux Kernel 6.13 Offers Improvements for AMD/Apple Users
The latest Linux kernel is now available, and it includes plenty of improvements, especially for those who use AMD or Apple-based systems.
-
Gnome 48 Debuts New Audio Player
To date, the audio player found within the Gnome desktop has been meh at best, but with the upcoming release that all changes.
-
Plasma 6.3 Ready for Public Beta Testing
Plasma 6.3 will ship with KDE Gear 24.12.1 and KDE Frameworks 6.10, along with some new and exciting features.
-
Budgie 10.10 Scheduled for Q1 2025 with a Surprising Desktop Update
If Budgie is your desktop environment of choice, 2025 is going to be a great year for you.
-
Firefox 134 Offers Improvements for Linux Version
Fans of Linux and Firefox rejoice, as there's a new version available that includes some handy updates.
-
Serpent OS Arrives with a New Alpha Release
After months of silence, Ikey Doherty has released a new alpha for his Serpent OS.