THE CLOCK WIDGET

Sup everyone! Happy Holiday to all.This time r2d is back with another cool android project. We are going to make a digital clock widget of our own. Isn't that cool!

Note that Android has an in-built Digital Clock widget in its layouts , but we want more customization so we are implementing our own version of it. So let's roll.

1. Create a new Android Application Project

Go to File > New > Android Application Project.
Complete the wizard and create a new Activity (MainActivity.java).
In the activity_main.xml file under res/layout, create two TextView s to be used to show time and date.
The code and the resulting layout will be like this-

	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context="${packageName}.${activityClass}" >

	<TextView
	android:id="@+id/textView1"
	android:layout_width="wrap_content"
	android:layout_height="75sp"
	android:layout_alignParentLeft="true"
	android:layout_alignParentRight="true"
	android:layout_alignParentTop="true"
	android:clickable="true"
	android:fontFamily="sans-serif-condensed"
	android:gravity="center"
	android:padding="3dp"
	android:textAlignment="center"
	android:textAppearance="?android:attr/textAppearanceLarge"
	android:textSize="50sp"
	android:textStyle="normal"
	android:text="TIME"
	tools:ignore="HardcodedText" />

	<TextView
	android:id="@+id/textView2"
	android:layout_width="wrap_content"
	android:layout_height="75sp"
	android:layout_alignParentLeft="true"
	android:layout_alignParentRight="true"
	android:layout_below="@+id/textView1"
	android:fontFamily="sans-serif-light"
	android:gravity="center"
	android:padding="3dp"
	android:text="DATE"
	android:textAppearance="?android:attr/textAppearanceMedium" />

	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

Layout of the widget

2. Add a new AppWidgetProvider resource to res/xml

Create the res/xml folder if not available already.
Add a new xml to this folder and name it widget_xml.xml (or anything you like).
Add the code given below to the xml file.The Structure is also shown if figure below.
The fields are as described below:

Min Width/Height - min. width/height with which the widget will be drawn.
Min. Resize Width/Height - width/height to which it can be re-sized.
Initial layout - the layout which is used to draw the widget.
Resize Mode - direction in which re-size is allowed.

	<?xml version="1.0" encoding="utf-8"?>
	<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
	android:initialLayout="@layout/activity_main"
	android:minHeight="80dp"
	android:minResizeHeight="80dp"
	android:minResizeWidth="144dp"
	android:minWidth="288dp"
	android:resizeMode="horizontal"
	android:updatePeriodMillis="1000"
	android:widgetCategory="home_screen\|keyguard" >

	</appwidget-provider>

view raw widget_xml.xml hosted with ❤ by GitHub

Fields in the AppWidgetProvider

3. Make changes to the Manifest XML

Add the following permissions the manifest file as they will be used to access some features of Android system later while coding.


<uses-permission android:name="com.android.alarm.permission.SET_ALARM" />

<uses-permission android:name="android.permission.WAKE_LOCK" />

Remove the <activity> tag from your  <application> tag as our app doesn't implement an activity.Instead add a receiver for the widget as shown below:-




    
      
        
  
    
    

        


  


  
        
          
          <?xml version="1.0" encoding="utf-8"?>
        
        
          
          <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        
        
          
              package="com.r2d.the_clock_widget"
        
        
          
              android:versionCode="1"
        
        
          
              android:versionName="1.0" >
        
        
          
          

        
        
          
              <uses-sdk
        
        
          
                  android:minSdkVersion="8"
        
        
          
                  android:targetSdkVersion="19" />
        
        
          
          

        
        
          
              <uses-permission android:name="com.android.alarm.permission.SET_ALARM" />
        
        
          
              <uses-permission android:name="android.permission.WAKE_LOCK" />
        
        
          
          

        
        
          
              <application
        
        
          
                  android:allowBackup="true"
        
        
          
                  android:icon="@drawable/ic_launcher"
        
        
          
                  android:label="@string/app_name" >
        
        
          
                  <receiver android:name="MainActivity" >
        
        
          
                      <intent-filter>
        
        
          
                          <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
        
        
          
                          <action android:name="com.r2d.The_Clock_Widget.WIDGET_UPDATE" />
        
        
          
                      </intent-filter>
        
        
          
          

        
        
          
                      <meta-data
        
        
          
                          android:name="android.appwidget.provider"
        
        
          
                          android:resource="@xml/widget_xml" />
        
        
          
                  </receiver>
        
        
          
              </application>
        
        
          
          

        
        
          
          </manifest>
        
  



    

  


      
      
        view raw
        
          Manifest.xml
        
        hosted with ❤ by GitHub
      
    




Final view of the Project Explorer





4. Code the MainActivity

The MainActivity extends AppWidgetProvider so that it can use the services of the Android API.
The various methods such as OnReceive(), OnUpdate() , OnEnabled(), OnDisabled() of the AppWidgetProvider are overridden , to apply widget life cycle methods.
More in the last section.


MainActivity.java

--Code Explained --


The OnReceive() method is called when the widget receives call to update its contents. Here we get all the id(s) for all the instances of our widget , and call updatetime() method the we defined, to update time in every instance.
The createClockIntent() method is used by the AlarmManager to send a pending Intent to our widget every 1000 msec. The Android system only allows to update a widget every 30min (due to several reasons). So we use Alarm Manager to update it each second.
The OnEnabled() method is used to start the Alarm Manger and the method OnDisabled() is where the timer is disabled.
Finally in the OnUpdate() method we acquire a Wake Lock, to keep the CPU on (Note that this is not necessary here ,but I thought to show it's use here). the it uses RemoteViews to send Pending Intent to each TextView to open ALARM Intent. Finally the Wake Lock is released. 
The updatetime() method is just filling the TextViews with the required time and date.

Download Code

SCREENSHOTS

Shobhit Chittora

Hi there, I am Shobhit Chittora. I am a college student and like to develop apps for Android platform.I started this blog to share my experiences with Android development and may be help you guys on the “roadtodroid”.

THE CLOCK WIDGET

THE CLOCK WIDGET

1. Create a new Android Application Project

2. Add a new AppWidgetProvider resource to res/xml

3. Make changes to the Manifest XML

4. Code the MainActivity