From iOS 16, Apple will renew the Lock Screen design, and now Lock Screen can support widget extensions.

This article will introduce how to implement an iOS 16 lock screen widget.

Before iOS 16, there were three sizes of widgets (systemSmall, systemMedium, systemLarget), but starting from iOS 16, there will be three more in the widget family, which are accessoryInline, accessoryCircular, accessoryRectangular.

In this article I will create two Lock Screen widgets – one a stateless Shortcut Widget with accessoryCircular size and another one a Balance Widget with size accessoryRectangular.



There are some limitations to these new widgets

  1. Only supports iOS 16 or higher
  2. Only supports SwiftUI
  3. Smaller than systemWidget, so the content needs clearer information
  4. The color is defined by users themselves, and default color is white
  5. Circular widget can only display a circular shape

Before we start to implement, we need Xcode 14 and iOS 16 devices


Creat a Widget Extension

  1. File -> New -> Target

  1. Select Widget Extension and input your Target name

  1. Click Activate widget scheme

  1. Now you can see a preview widget on the right side

Shortcut Widget

Let’s add accessoryCircular to Preview and Supported Family

In the circular widget, we want to display a PayPay icon with a “Pay” text

Let’s create a CircluarWidgetView, and put an image and text inside

And return CircluarWidgetView for circular widget family

And if we need a transparent white background for this widget, add a ZStack in the top and insert a color background in the first layer

After finishing the UI of the circular widget, we will implement the behavior of tap, then add a Deeplink for clicking this widget


Widgets use Provider to support widget updates or getting information, but in a shortcut widget, we do not need to provide any state or information, so we can create a simple provider and set the update timeline to “.never”.

Now we can see our shortcut widget in the Lock Screen!



Balance Widget

In this section, we are going to create a more complicated widget called Balance Widget.

In this Balance widget we will display a different view depending on the user’s state, and get information from a remote server.

Since this widget needs more space to display the content, we will use widget family AccessaryRectangular to display it.

Rectangular widget has 3 states

  1. Unlogin
  2. Normal
  3. With Balance

Create a new widget called BalanceWidget

Let’s create a view called RectangularWidgetView

Depending on the state, the view will have a different appearance, so let’s create a ViewModel to handle this

Return RectangularWidgetView with ViewModel

In RectangularWidgetView, we can use ViewModel’s state to handle differert view apperances. First let’s start implementing Unlogin view

Implement Unlogin view

Implement Normal view

Implement Balance view


Click Behavior

Depending on the state, ViewModel will return different Deeplink URLs

In EntryView, add Deeplink URL



StaticConfiguration and IntentConfiguration

In the Balance widget provider, we will update the widget’s information depending on the user’s login/setting and get the user’s balance from a backend server, and update accordingly. In the previous shortcut widget, we used the default Provider called TimelineProvider, but this time we will use IntentTimelineProvider instead.


Widget provider is a way to let users customize their widgets by clicking widgets during edit mode. It will show a widget setting page and users can select options that the widgets provide. User privacy is always the most important thing in the world, so we want to let users choose whether to display the Balance in their Lock Screen or not. To do this, we need to add an option called showBalance in our widget intent.


So let’s create a ConfigurationIntent

  1. Create a widget ConfigurationIntent


  1. Add a parameter called showBalance, and select type Boolean


Instead of TimelineProvider, this time our provider will be IntentTimelineProvider


Use widget entry to reload widget view


Variable of showBalance will use user’s setting configuration’s value


Call API to get balance


Now we have two widgets ShortcutWidget and BalanceWidget. Sometimes we also need support from SystemWidgets, so we need to use a widget bundle to support multiple widgets


And since the Lock Screen widget can only support iOS 16 and above, we need the OS conditions as well.


Now we finished our implementation of two widgets. Since iOS 14, apple has been using widgets to provide users a new and convenient way to use our app, and from iOS 16 we can use it even on the Lock Screen!

I think there are many possibilities with widgets, so I hope this article was helpful for you in learning the basics of widget implementation and creating more interesting widgets.


In PayPay we always like to try new technologies, so we implemented widgets when iOS 14 widgets were just launched.

Of course, we will also do the same with iOS 16 widgets and continue the tradition.

Here at PayPay, we welcome people who like new technologies and ideas.