Widget: apa itu, widget di iOS WidgetKit dan Android

Apa itu Widget

Widget — adalah elemen antarmuka pengguna ringkas yang ditempatkan di layar utama perangkat seluler untuk menampilkan informasi terkini dari aplikasi. Tidak seperti aplikasi lengkap, widget tidak perlu diluncurkan — pengguna melihat data segera setelah membuka kunci layar. Konsep ini berasal dari OS desktop (macOS Dashboard, Windows Sidebar), dan di lingkungan seluler, Android memperkenalkan dukungan widget sejak rilis pertamanya (Android 1.5 Cupcake, 2009), sementara Apple baru menambahkannya di iOS 14.

Implementasi teknis berbeda di setiap platform. Widget iOS — target terpisah di Xcode, dikompilasi sebagai Widget Extension, berjalan dalam prosesnya sendiri. Widget Android — BroadcastReceiver yang memperluas AppWidgetProvider, merender tata letak melalui RemoteViews. Kedua platform memberlakukan batasan ketat pada kinerja dan memori: sistem dapat menghapus widget jika melampaui batas. iOS membatasi widget hingga 30–50 MB dan waktu pembuatan timeline hingga 10 detik. Android — interval pembaruan tidak lebih sering dari 30 menit melalui updatePeriodMillis dan penghentian paksa saat onUpdate macet.

Smart Stack di iOS dan tumpukan di Android memungkinkan pengguna mengelompokkan beberapa widget dalam satu slot di home screen. Perangkat secara otomatis mengganti widget yang ditampilkan tergantung pada waktu, lokasi, atau aktivitas pengguna. Misalnya, pagi hari menampilkan kalender, siang hari — cuaca, malam hari — catatan. Bagi pengembang, ini berarti widget harus berfungsi dengan benar dalam tumpukan dan tidak bergantung pada tampilan yang konstan.

iOS WidgetKit: SwiftUI dan TimelineProvider

WidgetKit — framework Apple untuk membuat widget di iOS 14+, iPadOS 14+ dan macOS 11+. Widget ditulis dalam Swift menggunakan SwiftUI dan mekanisme TimelineProvider untuk memperbarui konten. Arsitektur WidgetKit mencakup tiga komponen: TimelineProvider — sumber data yang membentuk garis waktu dengan catatan; Widget Entry View — SwiftUI View yang menampilkan konten berdasarkan catatan; Widget Configuration — deskripsi tipe, ukuran, dan keluarga widget.

WidgetKit mengelola pembaruan sendiri — pengembang tidak dapat memaksa widget untuk diperbarui lebih sering dari yang diizinkan sistem. Apple menggunakan anggaran pembaruan yang didistribusikan ke semua widget di perangkat. Interval minimum — 15–30 menit. Untuk data kritis (misalnya, status pengiriman) digunakan push-to-refresh — mengirim pemberitahuan push dengan tanggal relevan di masa depan, setelah itu WidgetKit meminta timeline baru. Mulai iOS 17, widget mendukung interaktivitas melalui App Intents — pengguna dapat menekan tombol di dalam widget tanpa membuka aplikasi.

Android AppWidgetProvider: RemoteViews

AppWidgetProvider — kelas dasar untuk membuat widget di Android, bagian dari Android SDK sejak API level 3. Widget Android — adalah BroadcastReceiver yang menerima peristiwa pembaruan, pengaktifan, dan penonaktifan dari sistem. Tidak seperti iOS, di mana widget digambar oleh SwiftUI pada mesinnya sendiri, Android menggunakan RemoteViews — kumpulan komponen View terbatas yang dirender dalam proses sistem (launcher). View kustom, animasi kompleks, atau pustaka UI tidak dapat digunakan.

Skema kerja widget Android mencakup empat tahap. Konfigurasi — saat menambahkan widget ke layar, sistem dapat meluncurkan Activity konfigurasi tempat pengguna memilih pengaturan. Pembaruan — sistem memanggil onUpdate() pada interval yang ditentukan (minimal 30 menit) atau atas sinyal dari aplikasi melalui WorkManager. Rendering — penyedia membuat RemoteViews dengan data terkini dan mengirimkannya melalui AppWidgetManager. Penanganan klik — widget mendukung PendingIntent untuk tombol: saat diklik, Activity terbuka atau tindakan dijalankan. Mulai Android 12, widget mendapatkan dukungan untuk sudut membulat, warna adaptif Material You, dan perubahan ukuran dinamis.

Membuat widget di iOS dengan WidgetKit

Mari buat widget cuaca dalam Swift menggunakan WidgetKit dan SwiftUI. Proyek harus berisi Widget Extension target, ditambahkan di Xcode melalui File → New → Target → Widget Extension.

import WidgetKit
import SwiftUI

// 1. Model data untuk widget
struct WeatherEntry: TimelineEntry {
    let date: Date
    let temperature: Int
    let condition: String
}

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

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

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

// 3. SwiftUI View untuk ditampilkan
struct WeatherWidgetEntryView: View {
    var entry: WeatherEntry

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

// 4. Konfigurasi widget
@main
struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "WeatherWidget", provider: Provider()) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Cuaca")
        .description("Menunjukkan suhu saat ini")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Poin penting: TimelineProvider menentukan kapan dan data apa yang ditampilkan; getTimeline membuat garis waktu dengan kebijakan pembaruan .after(nextUpdate); StaticConfiguration menghubungkan penyedia dengan View. Untuk data dinamis, IntentConfiguration dengan parameter pengguna digunakan.

Membuat widget di Android dengan AppWidgetProvider

Kami mengimplementasikan widget cuaca serupa di Kotlin dengan AppWidgetProvider dan 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 = "Berawan"
            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 — pendaftaran penyedia
<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>

File widget_weather_info.xml mengatur ukuran minimum, interval, dan tata letak: minWidth 160dp, minHeight 80dp, updatePeriodMillis 3600000 (1 jam). RemoteViews hanya menggunakan komponen yang didukung: LinearLayout, TextView, ImageView. View kustom dan ConstraintLayout tersedia sejak Android 5.0. GlanceLayout — pendekatan Compose eksperimental untuk RemoteViews — muncul di Android 15.