Hi nerds, as the Title implies this Tutorial is just a Beginner’s Guide on Creating Widgets (Widget that displays current time) and how do they work on an Android device.

Pre-requisites:

• Install the Android SDK, Eclipse and ADT Plugin

• Basic Java Knowledge.

• Already have created basic HelloWorld apps specified here and here.

So, let’s start with the Project shall we …

Development :

Step 1: Open up your Eclipse, click File > New > Other > Android Project
The project name could be given as “HelloWidget”, and then select any Build Target Platform of your choice (Android 2.1/2.2/2.3/4.0 etc.), and then specify a package name.
And then, uncheck the probably already checked Box “Create Activity”. We won’t create an Activity here we just want a simple widget. Just like the below picture :

Step 2 : So now as you have created your Project, lets start with the Layout and design of our widget. Open up main.xml (Path:- HelloWidget > res > layout > main.xml) and modify it like as shown in the below picture :

We have a simple linear layout with a TextView for your message to display. At this point, you will get an Error saying ERROR Error: No resource found that matches the given name (at ‘background’ with value ‘@drawable/widget_bg_normal’) That’s because you don’t have the widget_bg_normal resource at this point. I have attached that picture (Look in Attached Images), you can put that picture or find your own .9.png image. Put that image (Path:- HelloWidget > res > layout > drawable > widget_bg_normal.9.png). If you don’t find a folder named drawable, just create one in that path

You’ll also encounter another error suggesting that @string/widget_text can’t be found. To correct that open up strings.xml (Path:- HelloWidget > res > values > strings.xml) and modify it as shown in the below picture :

Step 3 [Slightly big Step, don't get bored] : So, we just have finished our design part. Now we have to tell Android that we are going to have a widget. Open up AndroidManifest.xml (Path:- HelloWidget > AndroidManifest.xml) and modify it as shown in the below picture :

NOTE: minSdkVersion=”15″ denotes that my Build target is Android 4.0.3 (API Level 15) and if you are building on Android 2.2/2.3 just leave it as default and don’t edit it to 15.

Explanations : We declare our Broadcast Receiver which will be “HelloWidget”. Don’t forget the dot before HelloWidget, this will create the full qualified path name with the declared package at the top of the file. The Label of our application was already set by the project wizard and is located in our strings.xml.

From the Documentation, The <intent-filter> element must include an <action> element with the android:name attribute. This attribute specifies that the AppWidgetProvider accepts the ACTION_APPWIDGET_UPDATE broadcast. This is the only broadcast that you must explicitly declare. The AppWidgetManager automatically sends all other App Widget broadcasts to the AppWidgetProvider as necessary.

The meta-data tag tells android about your widget provider. In this case, the widget provider is located at HelloWidget > res > xml > hello_widget_provider.xml Create folder xml under res. Create a new XML file inside that xml folder and name it as “hello_widget_provider.xml”. Create like shown in the below picture :

Now, after all these, the only thing that is missing to run our widget is the Class that extends the AppWidgetProvider which we declared in AndroidManifest.xml at the receiver-tag.

Right-Click your Project (HelloWidget) > New > Class
And create the class as shown in the below picture :

So, your new Class will look like this :

Step 4 : So, we have created a blank widget that actually does nothing. We’ll just see for ourselves how does it looks like. Run your Application (HelloWidget > Run As > 1 Android Application) and your AVD is powered up. And , you should see the output as something like this as shown in the below picture :

Step 5 : Now, open up the HelloWidget.java (Path:- HelloWidget > src > com.coolsandie.android.widget > HelloWidget.java) file, and modify it as shown in the below code(In order to display the Time inside the Widget, apart from displaying a default text)

package com.coolsandie.android.widget;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;
import java.util.Timer;
import java.util.TimerTask;

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

public class HelloWidget extends AppWidgetProvider {

	@Override
	public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {

		Timer timer = new Timer();
		timer.scheduleAtFixedRate(new MyTime(context, appWidgetManager), 1, 1000);
	}

	private class MyTime extends TimerTask {
		RemoteViews remoteViews;
		AppWidgetManager appWidgetManager;
		ComponentName thisWidget;
		DateFormat format = SimpleDateFormat.getTimeInstance(SimpleDateFormat.MEDIUM, Locale.getDefault());

	public MyTime(Context context, AppWidgetManager appWidgetManager) {
		this.appWidgetManager = appWidgetManager;
		remoteViews = new RemoteViews(context.getPackageName(), R.layout.main);
		thisWidget = new ComponentName(context, HelloWidget.class);
	}

	@Override
	public void run() {
		remoteViews.setTextViewText(R.id.widget_textview, "TIME = " +format.format(new Date()));
		appWidgetManager.updateAppWidget(thisWidget, remoteViews);
	}

	}
}

Step 6 : So guys, we have finished it. The completely working widget should be ready by now. Run your Application (HelloWidget > Run As > 1 Android Application) and your application is synced. Add the HelloWidget on your home Screen by touching your home screen for sometime and select widget,  and it will show the output just like as shown in the below picture :

Finally, we have made it. It only took 6 steps for a completely working Widget.
And I hope you enjoyed this Tutorial. Its made as simple as possible, so surely anyone could give it a try.