Widget: wat is het, widgets op iOS WidgetKit en Android

Wat is een Widget

Widget — is een compact gebruikersinterface-element dat op het startscherm van een mobiel apparaat wordt geplaatst om actuele informatie uit een app weer te geven. In tegenstelling tot een volledige app vereist een widget geen lancering — de gebruiker ziet de gegevens direct na het ontgrendelen van het scherm. Het concept komt van desktop-besturingssystemen (macOS Dashboard, Windows Sidebar), en in de mobiele omgeving introduceerde Android ondersteuning voor widgets vanaf de eerste release (Android 1.5 Cupcake, 2009), terwijl Apple ze pas in iOS 14 toevoegde.

Technische implementatie verschilt per platform. iOS-widget — een apart target in Xcode, gecompileerd als Widget Extension, draaiend in een eigen proces. Android-widget — een BroadcastReceiver die AppWidgetProvider uitbreidt en de layout rendert via RemoteViews. Beide platformen leggen strikte beperkingen op aan prestaties en geheugen: het systeem kan de widget verwijderen bij overschrijding van limieten. iOS beperkt de widget tot 30–50 MB en de timeline-vormingstijd tot 10 seconden. Android — update-interval niet vaker dan 30 minuten via updatePeriodMillis en gedwongen beëindiging bij vastlopen van onUpdate.

Smart Stack op iOS en stapels op Android stellen de gebruiker in staat meerdere widgets in één slot op het home screen te groeperen. Het apparaat schakelt automatisch de weergegeven widget afhankelijk van het tijdstip, locatie of gebruikersactiviteit. 's Ochtends wordt bijvoorbeeld de kalender getoond, overdag het weer, 's avonds notities. Voor de ontwikkelaar betekent dit dat de widget correct moet werken binnen een stapel en niet mag vertrouwen op constante weergave.

iOS WidgetKit: SwiftUI en TimelineProvider

WidgetKit — Apple-framework voor het maken van widgets op iOS 14+, iPadOS 14+ en macOS 11+. Widgets worden geschreven in Swift met SwiftUI en het TimelineProvider-mechanisme voor het updaten van content. De WidgetKit-architectuur omvat drie componenten: TimelineProvider — de gegevensbron die een tijdlijn met records vormt; Widget Entry View — SwiftUI View die content weergeeft op basis van een record; Widget Configuration — beschrijving van het type, formaten en families van de widget.

WidgetKit beheert zelf de update — de ontwikkelaar kan de widget niet vaker updaten dan het systeem toestaat. Apple gebruikt een updatebudget dat wordt verdeeld over alle widgets op het apparaat. Minimum interval — 15–30 minuten. Voor kritieke gegevens (bijv. leveringsstatus) wordt push-to-refresh gebruikt — het verzenden van een pushmelding met een relevante datum in de toekomst, waarna WidgetKit een nieuwe tijdlijn opvraagt. Sinds iOS 17 ondersteunen widgets interactiviteit via App Intents — de gebruiker kan knoppen in de widget indrukken zonder de app te openen.

Android AppWidgetProvider: RemoteViews

AppWidgetProvider — de basisklasse voor het maken van widgets in Android, onderdeel van Android SDK sinds API level 3. Android-widget — is een BroadcastReceiver die update-, inschakel- en uitschakelevenementen van het systeem ontvangt. In tegenstelling tot iOS, waar de widget door SwiftUI op een eigen engine wordt getekend, gebruikt Android RemoteViews — een beperkte set View-componenten die in het systeemproces (launcher) worden gerenderd. Aangepaste Views, complexe animaties of UI-bibliotheken kunnen niet worden gebruikt.

Werkschema van Android-widget omvat vier fasen. Configuratie — bij het toevoegen van de widget aan het scherm kan het systeem een configuratie-Activity starten waar de gebruiker instellingen kiest. Update — het systeem roept onUpdate() aan op een ingesteld interval (minimaal 30 minuten) of op signaal van de app via WorkManager. Rendering — de provider maakt RemoteViews met actuele gegevens en geeft deze door via AppWidgetManager. Klikverwerking — de widget ondersteunt PendingIntent voor knoppen: bij klikken wordt een Activity geopend of een actie uitgevoerd. Sinds Android 12 hebben widgets ondersteuning voor afgeronde hoeken, adaptieve Material You-kleuren en dynamische formaatwijziging gekregen.

Een widget maken op iOS met WidgetKit

Laten we een weerwidget maken in Swift met WidgetKit en SwiftUI. Het project moet een Widget Extension target bevatten, toegevoegd in Xcode via File → New → Target → Widget Extension.

import WidgetKit
import SwiftUI

// 1. Datamodel voor widget
struct WeatherEntry: TimelineEntry {
    let date: Date
    let temperature: Int
    let condition: String
}

// 2. TimelineProvider — gegevensleverancier
struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> WeatherEntry {
        WeatherEntry(date: Date(), temperature: 22, condition: "Zonnig")
    }

    func getSnapshot(in context: Context, completion: @escaping (WeatherEntry) -> Void) {
        let entry = WeatherEntry(date: Date(), temperature: 22, condition: "Zonnig")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<WeatherEntry>) -> Void) {
        let now = Date()
        let entry = WeatherEntry(date: now, temperature: 20, condition: "Bewolkt")
        let nextUpdate = Calendar.current.date(byAdding: .hour, value: 3, to: now)!
        let timeline = Timeline(entries: [entry], policy: .after(nextUpdate))
        completion(timeline)
    }
}

// 3. SwiftUI View voor weergave
struct WeatherWidgetEntryView: View {
    var entry: WeatherEntry

    var body: some View {
        VStack(alignment: .leading) {
            Text("Weer").font(.caption).foregroundColor(.secondary)
            HStack {
                Text("\(entry.temperature)°").font(.largeTitle).fontWeight(.bold)
                Spacer()
                Text(entry.condition).font(.body)
            }
        }.padding()
    }
}

// 4. Widgetconfiguratie
@main
struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "WeatherWidget", provider: Provider()) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Weer")
        .description("Toont huidige temperatuur")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Belangrijke punten: TimelineProvider bepaalt wanneer en welke gegevens worden getoond; getTimeline maakt een tijdlijn met updatebeleid .after(nextUpdate); StaticConfiguration verbindt de provider met de View. Voor dynamische gegevens wordt IntentConfiguration met gebruikersparameters gebruikt.

Een widget maken op Android met AppWidgetProvider

We implementeren een vergelijkbaar weerwidget in Kotlin met AppWidgetProvider en RemoteViews.

// WeatherWidgetProvider.kt
class WeatherWidgetProvider : AppWidgetProvider() {

    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray
    ) {
        for (appWidgetId in appWidgetIds) {
            updateAppWidget(context, appWidgetManager, appWidgetId)
        }
    }

    override fun onAppWidgetOptionsChanged(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetId: Int,
        newOptions: Bundle
    ) {
        updateAppWidget(context, appWidgetManager, appWidgetId)
    }

    companion object {
        fun updateAppWidget(
            context: Context,
            appWidgetManager: AppWidgetManager,
            appWidgetId: Int
        ) {
            val temperature = 20
            val condition = "Bewolkt"
            val views = RemoteViews(
                context.packageName, R.layout.widget_weather
            ).apply {
                setTextViewText(R.id.tv_temperature, "$temperature°")
                setTextViewText(R.id.tv_condition, condition)
                setOnClickPendingIntent(
                    R.id.widget_root, PendingIntent.getActivity(
                        context, 0,
                        Intent(context, MainActivity::class.java),
                        PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
                    )
                )
            }
            appWidgetManager.updateAppWidget(appWidgetId, views)
        }
    }
}

// AndroidManifest — registratie van provider
<receiver android:name=".WeatherWidgetProvider" android:exported="true">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
        android:name="android.appwidget.provider"
        android:resource="@xml/widget_weather_info" />
</receiver>

Het bestand widget_weather_info.xml stelt minimumformaten, interval en layout in: minWidth 160dp, minHeight 80dp, updatePeriodMillis 3600000 (1 uur). RemoteViews gebruikt alleen ondersteunde componenten: LinearLayout, TextView, ImageView. Aangepaste Views en ConstraintLayout zijn beschikbaar sinds Android 5.0. GlanceLayout — experimentele Compose-benadering voor RemoteViews — verscheen in Android 15.