Home » How to create a Clock Widget

postheadericon How to create a Clock Widget

This article will describe the basics on how to develop a basic digital Clock Widget. A digital Clcok Widget displays the current time. To receive time changes, you need to register your app for the Intent.ACTION_TIME_TICK, Intent.ACTION_TIME_CHANGED (for manual time changes) and Intent.ACTION_TIMEZONE_CHANGED (for timezone changes). A sample application is provided to show the working.

We start with the basics of creating a widget. We need to provide the widget size in the /res/xml/clockwidgetinfo.xml file. We go for a simple 2x1 widget. The content looks like this:

<?xml version="1.0" encoding="utf-8"?>

<!--  Copyright CMW Mobile.com, 2013.  -->

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/widget"
    android:minWidth="110dip"
    android:minHeight="72dip"
    android:updatePeriodMillis="0"
/>

The widget layout is defined within the /res/layout/widget.xml. We go for a simple TextView to display the current time. The content looks like this.

<?xml version="1.0" encoding="utf-8"?>

<!-- Copyright CMW Mobile.com, 2013. -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widgetLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

<TextView android:id="@+id/time"
    android:background="@android:color/darker_gray"
    android:contentDescription="@string/clockTitle"
    android:gravity="center"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="52dp" />

</LinearLayout>

Within the AndroidManifest.xml file we need to define the widget as a receiver:

     <receiver android:label="@string/clockTitle" android:name=".ClockWidgetProvider">
            <intent-filter>
                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
            </intent-filter>
            <meta-data android:name="android.appwidget.provider"
                android:resource="@xml/clockwidgetinfo" />
        </receiver>

Our main class is the ClockWidgetProvider class. It needs to extend the android.appwidget.AppWidgetProvider class. The next step is to create a service to receive the updates. The service must be defined in the AndroidManifest.xml as well. We use an inner class of the ClockWidgetProvider class named ClockUpdateService as the service class. We override the ClockWidgetProvider onEnabled method to start the service. The onDisabled method can be used to stop the service after all widgets are removed from the home screen.

     <service android:name=".ClockWidgetProvider$ClockUpdateService" android:exported="false">
            <intent-filter>
                <action android:name="com.cmwmobile.android.samples.clock.action.UPDATE" />
            </intent-filter>
        </service>

An IntentFilter class is used to register the intent actions which we want to handle within our application. In our case the Intent.ACTION_TIME_TICK, Intent.ACTION_TIME_CHANGED, Intent.ACTION_TIMEZONE_CHANGED and our own custom defined ACTION_UPDATE. We use an android.content.BroadcastReceiver to receive the intents. The ClockUpdateService onCreate method is used to register our BroadcastReceiver to receive the intents. The onDestroy method is used to unregister the BroadcastReceiver again. The time tick intent is received once per minute by our application and is used to update the time. Finally, within the updateTime method the TextView is updated with the latest time information. And that's it. Have fun and don't forget to like, plus or retweet if you like this blog.

Try the Star Trek Clock Widget and the Star Wars Clock Widget from Google Play to experiance the full potential.

Attachments:
Download this file (SampleClockWidget1.0.0.zip)SampleClockWidget1.0.0.zip11 Kb