How to Create Configurable Widgets With Dynamic Options?

This article is originally published at swiftsenpai.com

In my last article, I have shown you how to create a widget with static options. This might be good for some cases, but in most cases, we might not be able to determine the widget’s options during development time. Under these circumstances, we will need a configurable widget with dynamic options.

In general, here are the situations where dynamic options are needed:

1. The options are provided by a remote server (API).
2. The options are from the widget’s host app.
3. The options are generated at runtime.

In this article, I will walk you through the process of displaying dynamic options that are fetched from a remote server. Although the guide focuses on this scenario, the principles and techniques discussed can also be applied to the other 2 situations as well.

Note:

If you’re unfamiliar with the basic of creating a configurable widget , I highly encourage you to first read my blog post called “How to Create Configurable Widgets With Static Options?“.

The Crypto Price Widget

The sample widget we going to create is a customizable crypto price widget. It allows users to track their preferred cryptocurrencies.

Here’s the demo video.

The widget will fetch the market’s current top ten cryptocurrencies from the CoinCap API and show them as user selections. Once the user selected an asset, the widget will fetch the asset’s latest price from this API and show it on the widget.

As you can see, the selections (customization) given by this widget are from an API, which makes the widget’s options dynamic. Hence, creating this widget will involve setting up a custom type and adding an intents extension.

Let’s take a look at them in details one by one.

Adding Custom Type to Intent Definition

Assuming you already created the widget extension named “CryptoPriceWidget”. Open the intent definition file and add a new type. We will name our custom type Crypto and give it 2…