Android Quick setting tile ✨

Android Quick setting tile ✨
Photo by Raul Petri / Unsplash

A Simple and useful feature you can add to your app.
Recently, I was trying to add iOS Style barcode scanner which is very handy,
Few phones support this feature by default,
but few don't. Like my old OnePlus 7.
This is when i thought, why not build an app for this?

Tiles are a great accessibility feature,
Let's say you're building an app like twitter. The main feature would be to create a new tweet. For doing this the regular way, you have to open the app, wait for it to load and then click on create button.
A Looong process and involves multiple clicks.
By adding the tile, you can easily provide a shortcut.

Here's how the Android 13 Notification Panel looks like

Now let's go on to how to add this to your app.

Implementation:

For listening to the states of your tile, first you will need a service.
Android has a service called TileService for this.
Now create a custom tile class for your app, that extends TileService.

class QuickScanTile : TileService() 

Now we will have to declare this service in the App's Manifest.

<service
    android:name=".quicksettings.ScannerQSTile"
    android:exported="true"
    android:icon="@drawable/ic_scanner"
    android:label="@string/scan_qr"
    android:permission="android.permission.BIND_QUICK_SETTINGS_TILE"
        <intent-filter>
            <action android:name="android.service.quicksettings.action.QS_TILE" />
        </intent-filter>
</service>

Adding the permission for BIND_QUICK_SETTINGS_TILE makes it available for your user to add it in the Notification Panel.

🔍 Listening:

What happens once the user adds the tile to Notification Panel?
The TileService that you just created, is different from the regular service.
It has callback methods that are meant for your tile.

  1. onTileAdded() - Called when the user adds your tile to the notification panel.
  2. onTileRemoved() - Called when the tile is removed from the panel.
  3. onStartListening() - Called when the user pulls the notification panel down.
    This is when you should update the contents of the tile (If needed).
  4. onStopListening() - Called when the notification panel is dismissed.
  5. onClick() - Called when the user clicks on your tile.

Override these methods in your service.
when the onClick() is called, you can take the user to the intended action.
For ex: you can launch the CreateTweetActivity where the user can post a new tweet.
The TileService has a special function called startActivityAndCollapse()
This function will launch the new activity and also collapses the notification panel.

There's also a special function called:

unlockAndRun(runnable: Runnable) 

The user is prompted to unlock the phone first before launching the action.
The runnable is triggered only when the user unlocks the phone.

For some apps, let's say for example Lyft for drivers.
You might need a tile which sets the driver to online/offline.
(Accepting rides or not)
Here you may need a clear indication that the setting is on / off.

For a use-cases like this, you will need to update the tile based on the user's latest setting. For updating the tile, the onStartListening() is the right place.
This callback is triggered when the notification panel is pulled down by the user.
Update the states of your tile to the latest, when this callback is triggered.

You have a method called getQsTile() in your service, which will return you the current tile state. You can update its label/description and state by using this Tile object.

qsTile.label = state.label
qsTile.contentDescription = tile.label
qsTile.state = if (state.enabled)
                   Tile.STATE_ACTIVE 
               else 
                   Tile.STATE_INACTIVE
qsTile.icon = state.icon

Once all the changes are done on your tile, call the qsTile.updateTile() method for setting the changes live.
You may also need to update the state of the tile when onClick() is called.
For these kind of tiles,
you may have to add additional meta data in your manifest to indicate that this is a toggle-able tile.

<meta-data android:name="android.service.quicksettings.TOGGLEABLE_TILE"
    android:value="true" />

👤 Prompting the user to add the tile:

Earlier than Android 13, user has to manually go to Notification panel, Click edit and drag-and-drop the Tile to the panel.

Starting on Android 13,
We have the requestAddTileService() to prompt the user to add a tile to the notification panel.

Thats about it,
A Simple and useful feature.

Thank you

Further Reading:

Create custom Quick Settings tiles for your app | Android Developers

Check out my QRScanner app, which has a tile added for launching QR scanner.

GitHub - KiranShny/QR-BarcodeScanner: An app for bar code scanning
An app for bar code scanning. Contribute to KiranShny/QR-BarcodeScanner development by creating an account on GitHub.