Days to Xmas widget tutorial

Mon, 03/08/2010 - 03:17 | by jozsi

SDK Version:

My second article based on Norbert Möhring's HelloWidget tutorial, but i think it's easier. :) It will look like this:

The first thing you need is a cool xmas tree for background and an icon.

Let’s start from the begining.
Open Eclipse (with android sdk)

File > new Project > other > Android Project

Project name: DaysToXmas
Application name: DaysToXmas
Create Activity: DaysTo Xmas (may be useful)
Min SDK Version: 4

Then click Finish.

Your project structure will look like this:

Now copy/move your christmas tree image to res/drawable/ directory, and the icon to res/drawable-hdpi, to res/drawable-mdpi, and to res/drawable-ldpi.

After that you should refresh your project directories.
Now open the strings.xml (values/string.xml) and modify it like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">loading widget...</string>
    <string name="app_name">DaysToXmas</string>
</resources>

Now we have to tell Android that we are going to have a widget.
Open AndroidManifest.xml and go to the source view and copy that:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.helloandroid.daystoxmas"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <!-- Broadcast Receiver that will process AppWidget updates -->
<receiver android:name=".DaysToXmas" android:label="@string/app_name">
   <intent-filter>
      <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
   </intent-filter>
   <meta-data android:name="android.appwidget.provider"
                        android:resource="@xml/hello_widget_provider" />
</receiver>
        
 
    </application>
    <uses-sdk android:minSdkVersion="4" />
 
</manifest> 

After that open the main.xml(layout/main.xml) and modify it like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background&quot;>
<TextView  
        android:id="@+id/xmas"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
   android:paddingTop="35dip" android:paddingLeft="29dip" android:textColor="#000000"/>
 
</LinearLayout>

Create directory /res/xml, and copy this to hello_widget_provider.xml.

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
   android:minWidth="50dip"
   android:minHeight="50dip"
   android:updatePeriodMillis="10000"
   android:initialLayout="@layout/main"
/>

Open the DaysToXmas.java file, located inside DaysToXmas> src > com.helloandroid.daystoxmas. Modify it like this:

package com.helloandroid.daystoxmas;
 
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;
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 DaysToXmas extends AppWidgetProvider {
        @Override
        public void onUpdate(Context context, AppWidgetManager appWidgetManager,
                                                                   int[] appWidgetIds) {
               Timer timer = new Timer();
               timer.scheduleAtFixedRate(new MyTime(context, appWidgetManager), 1, 60000);
          }
          private class MyTime extends TimerTask {
                 RemoteViews remoteViews;
                 AppWidgetManager appWidgetManager;
                 ComponentName thisWidget;
                 public MyTime(Context context, AppWidgetManager appWidgetManager) {
                 this.appWidgetManager = appWidgetManager;
                 remoteViews = new RemoteViews(context.getPackageName(), R.layout.main);
                 thisWidget = new ComponentName(context, DaysToXmas.class);
                 }
            @Override
            public void run() {
                        Date date1 = new Date();
                        Calendar calendar = new GregorianCalendar(2010, 11,25);
                        long days = (((calendar.getTimeInMillis()- date1.getTime())/1000))/86400;
                        remoteViews.setTextViewText(R.id.xmas,""+ days);
                        appWidgetManager.updateAppWidget(thisWidget, remoteViews); 
             }
          }
        }

We create a timer that will run our MyTime-Thread every 60 seconds.

timer.scheduleAtFixedRate(new MyTime(context, appWidgetManager), 1, 60000); 

To start your application click Run > Run (Ctrl+F11). This will start the Android Virtual Device (AVD) and install your widget on this device.
Now press and hold your left mouse button on the AVD Desktop screen until the menu pops up.
Choose Widget > DaysToXmas

Feel free to download the complete source of the project from this link

Tags:

Bookmark/Search this post with

Days to Xmas widget tutorial

Main menu

New tutorials from Helloandroid

Recent Apps

Android on Twitter

Poll

Useful resources

Android Development Projects