Next prayer widget

​

Features

• Single prayer focus showing only the next upcoming prayer
• Large, readable time display
• Live countdown updated every minute
• Minimal design for quick glances
• Tap to open the main app

​

Widget appearance

1. Label: “Next Prayer” in small text
2. Prayer name: Large, bold text (e.g., “Dhuhr”)
3. Prayer time: Extra large time display (e.g., “1:30 PM”)
4. Countdown badge: Colored badge showing time remaining (e.g., “in 2h 30m”)

​

Adding the widget

​

Live countdown

​

Countdown format

• More than 1 hour: “in 3h 15m”
• 30-60 minutes: “in 45m 30s”
• Less than 30 minutes: “in 12m 42s”
• Less than 1 minute: “in 30s”

​

Implementation

// Compute countdown live from stored epoch
val liveCountdown = if (data.nextPrayerEpochMillis > 0L) {
    WidgetUpdateScheduler.computeCountdown(data.nextPrayerEpochMillis)
} else {
    data.countdown.ifEmpty { "—" }
}

​

Countdown badge

• Background: Dimmed primary color (R.color.widget_primary_dim)
• Text: Primary accent color
• Border radius: 8dp for rounded appearance
• Padding: Comfortable spacing for readability

​

Implementation details

​

Widget class

class NextPrayerWidget : GlanceAppWidget() {
    override val stateDefinition: GlanceStateDefinition<NextPrayerWidgetState> =
        NextPrayerStateDefinition

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        provideContent {
            GlanceTheme {
                val state = currentState<NextPrayerWidgetState>()
                NextPrayerContent(state)
            }
        }
    }
}

​

Widget state

data object Loading : NextPrayerWidgetState
// Shows a circular progress indicator

​

Update mechanism

​

Periodic data refresh

class NextPrayerWidgetReceiver : GlanceAppWidgetReceiver() {
    override val glanceAppWidget: GlanceAppWidget = NextPrayerWidget()

    override fun onEnabled(context: Context) {
        super.onEnabled(context)
        NextPrayerWorker.enqueuePeriodicWork(context, force = true)
        WidgetUpdateScheduler.schedule(context)
    }

    override fun onDisabled(context: Context) {
        super.onDisabled(context)
        NextPrayerWorker.cancel(context)
        WidgetUpdateScheduler.cancel(context)
    }
}

​

Minute-by-minute countdown

override fun onReceive(context: Context, intent: Intent?) {
    scope.launch {
        try {
            NextPrayerWidget().updateAll(context)
        } catch (_: Exception) {}
        try {
            PrayerTimesWidget().updateAll(context)
        } catch (_: Exception) {}
    }
}

​

Widget UI composition

Box(
    modifier = GlanceModifier
        .fillMaxSize()
        .background(backgroundColor)
        .cornerRadius(16.dp)
        .clickable(actionStartActivity<MainActivity>())
        .padding(16.dp),
    contentAlignment = Alignment.Center
) {
    Column(
        modifier = GlanceModifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Next Prayer", style = TextStyle(...))
        Text(data.prayerName, style = TextStyle(...)) // Large prayer name
        Text(data.prayerTime, style = TextStyle(...)) // Extra large time
        CountdownBadge(liveCountdown) // Countdown in badge
    }
}

​

Styling

• “Next Prayer” label: 11sp, medium weight, secondary color
• Prayer name: 20sp, bold, primary accent color
• Prayer time: 28sp, bold, primary text color
• Countdown: 12sp, bold, in colored badge

​

Theme colors

val backgroundColor = ColorProvider(R.color.widget_background)
val textColor = ColorProvider(R.color.widget_text)
val textSecondary = ColorProvider(R.color.widget_text_secondary)
val primaryColor = ColorProvider(R.color.widget_primary)

​

Android manifest registration

<receiver
    android:name=".widget.nextprayer.NextPrayerWidgetReceiver"
    android:exported="true"
    android:label="@string/widget_next_prayer_name">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
        android:name="android.appwidget.provider"
        android:resource="@xml/next_prayer_widget_info" />
</receiver>

​

Interaction

.clickable(actionStartActivity<MainActivity>())

• Full prayer schedule
• Prayer tracking
• Qibla direction
• Other app features

​

Edge cases handled

​

After Isha prayer

​

Invalid data

• Widget shows “Tap to setup” message
• Clicking opens the app for initial configuration
• After setup, widget updates automatically

​

Midnight transition

• Worker recalculates prayer times
• Next prayer switches from last Isha to next Fajr
• Countdown resets for the new day

​

Battery efficiency

• Inexact repeating alarms: Uses setInexactRepeating() which allows the system to batch updates
• Efficient workers: Periodic updates only when widget is active
• No continuous processes: Only scheduled updates, no always-running services
• Shared scheduler: Both countdown widgets share the same WidgetUpdateScheduler

​

Troubleshooting

​

Widget shows “Tap to setup”

1. Open the Nimaz app
2. Grant location permission
3. Wait for prayer times to calculate
4. Widget will update automatically

​

Countdown not updating

1. Check battery optimization settings
2. Ensure Nimaz is not restricted
3. Remove and re-add the widget
4. Restart your device if needed

​

Shows wrong prayer

1. Open the app to trigger recalculation
2. Check your location is correct
3. Verify time zone settings
4. Wait for the next periodic update

​

Time format issues

1. Open Nimaz app
2. Go to Settings
3. Change time format (12-hour/24-hour)
4. Widget will update on next refresh

​

Comparison with Prayer Times widget

• Have limited home screen space
• Only need to know the upcoming prayer
• Prefer a minimal, focused design

• Want to see the full daily schedule
• Need location and Hijri date information
• Have more home screen space available

​

Related widgets

• Prayer times widget - Complete daily prayer schedule
• Prayer tracker widget - Track completed prayers
• Hijri date widget - Islamic calendar display