Creating an app widget in Android for analog clock

0
5653

Widget: App Widgets are miniature application views that can be embedded in other applications (such as the Home screen) and receive periodic updates. These views are referred to as Widgets in the user interface, and you can publish one with an App Widget provider. An application component that is able to hold other App Widgets is called an App Widget host. 

Step 1

Create a new project called “MyClockWidget”

Step 2

Modifying the AndroidManifest.xml as follows

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

    <uses-sdk android:minSdkVersion="3" />

    <application
        android:icon="@drawable/icon"
        android:label="@string/app_name" >
        <activity android:name="info" android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.INFO" />
            </intent-filter>
            
        </activity>
        
 <receiver android:name=".Widget" android:label="My Custom Clock Widget">
            <intent-filter>
                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
            </intent-filter>
            <meta-data android:name="android.appwidget.provider" android:resource="@xml/widget" />
        </receiver>
    </application>

</manifest>

Step 3

Creating Xml files

res/xml/widget.xml: This file contains the definition of our Analog Clock widget. It is an xml file with only one element: appwidget-provider, which has the following attributes: xmlns:android (standard in Android resource files, defines the android namespace), android:minWidth (defines the minimum width of our Widget, translates to number of cells in the horizontal space), android:minHeight (defines the minimum height of our Widget, translates to number of cells in the vertical space), android:updatePeriodMillis (defines the update frequency, a value of 0 means no updates), android:initialLayout (a pointer to the layout file to display during loading of the widget).

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

res/layout/main.xml: This file simply provides the layout for an information screen to tell the user about your widget, and provide instructions on how to use it. In our case, we have a very simple widget which requires no configuration, and no special instructions so it will be a very simple layout containing only a LinearLayout and TextView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    			android:layout_width="fill_parent"
    			android:layout_height="fill_parent"
    			android:orientation="vertical" >

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="Thank you for installing the Custom Analog Clock Widget.nnPlease read these important instructions.nnThis is a widget,not a regular application. Unlike regular applications, widgets are placed on the home screen and offer useful information at a glance.n" />
</LinearLayout>

res/layout/widget.xml: This file provides the layout which we will use for our widget. Again, because this is a simple widget this will be a simple file. In fact, the only elements we will include here are RelativeLayout and AnalogClock.

	<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    			android:layout_width="match_parent"
    			android:layout_height="match_parent"
    			android:id="@+id/Widget" 
    			android:gravity="center" >

    		<AnalogClock
       		 android:id="@+id/analogClock1"
        		android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
        		android:hand_hour="@drawable/widgethour" 
	    		android:hand_minute="@drawable/widgetminute"
	    		android:dial="@drawable/widgetdial"/>

</RelativeLayout>

Step 4

Creating Source Files

info.java: This class extends Activity, and only serves to provide an informational screen to the user. Technically, this is not required for a Widget project

	package com.akansha.MyClockWidget;

	import android.app.Activity;
	import android.os.Bundle;


	public class info extends Activity {
	
			public void onCreate(Bundle savedInstanceState) {
		
				super.onCreate(savedInstanceState);
				setContentView(R.layout.main);
			}
	

	}
	

Widget.java: In order to create and use a widget we must extend AppWidgetProvider. We already added the reference to this class in the AndroidManifest.xml file.

Because this is a very simple widget that relies on nothing but itself (no calls to the web, no background updates, etc…) our Widget class will be very simple. We will only handle the onReceive event that gets called by the AppWidget framework whenever a Widget is Added, Deleted, Updated, etc.

	package com.akansha.MyClockWidget;

	import android.appwidget.AppWidgetManager;
	import android.appwidget.AppWidgetProvider;
	import android.content.Context;
	import android.content.Intent;
	import android.widget.RemoteViews;


	public class Widget extends AppWidgetProvider{

		public void onReceive(Context context, Intent intent)
		{
		String act=intent.getAction();
		if(AppWidgetManager.ACTION_APPWIDGET_UPDATE.equals(act))
		{
RemoteViews myView =new RemoteViews(context.getPackageName(), R.layout.widget);
			                  
	        AppWidgetManager.getInstance(context).updateAppWidget(intent.getIntArrayExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS), myView);
		}
		}
	
}

Step 5

Compile and Run

Picture1

Picture2