Home » Android » core » view » Creating an AppWidget for the home screen

About Byron Kiourtzoglou

Byron Kiourtzoglou
Byron is a master software engineer working in the IT and Telecom domains. He is an applications developer in a wide variety of applications/services. He is currently acting as the team leader and technical architect for a proprietary service creation and integration platform for both the IT and Telecom industries in addition to a in-house big data real-time analytics solution. He is always fascinated by SOA, middleware services and mobile development. Byron is co-founder and Executive Editor at Java Code Geeks.

Creating an AppWidget for the home screen

In this tutorial we are going to see how can you create an AppWidget of your Android Application for the home screen of the device.

Since version 1.5, the Android SDK includes the AppWidget framework, a framework that allows developers to write “widgets” that people can drop onto their home screen and interact with. The use of widgets is very handy since it allows the user to add their favorite applications into their home screen and interact with them quickly and without having to launch the whole application.
 
 
 
 
To create an AppWidget for your home screen you should:

  • Create a an xml inside the res/xml folder of your project in which we provide information regarding the widget’s dimensions, its update interval etc
  • Create a new layout file that describes how the widget will be rendered
  • update the res/values/styles.xml file
  • register a special BroadcastReceiver in the AndroidManifest.xml file
  • create a new class that extends AppWidgetProvider
package com.javacodegeeks.android.apps.moviesearchapp.widget;

import android.app.PendingIntent;
import android.app.Service;
import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.IBinder;
import android.widget.RemoteViews;

import com.javacodegeeks.android.apps.moviesearchapp.R;
import com.javacodegeeks.android.apps.moviesearchapp.model.Movie;
import com.javacodegeeks.android.apps.moviesearchapp.services.MovieSeeker;

public class MovieSearchWidget extends AppWidgetProvider {

   private static final String IMDB_BASE_URL = "http://m.imdb.com/title/";

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

  // To prevent any ANR timeouts, we perform the update in a service

  context.startService(new Intent(context, UpdateService.class));
    }

    public static class UpdateService extends Service {

 private MovieSeeker movieSeeker = new MovieSeeker();

  @Override

  public void onStart(Intent intent, int startId) {

// Build the widget update for today

RemoteViews updateViews = buildUpdate(this);

// Push update for this widget to the home screen

ComponentName thisWidget = new ComponentName(this, MovieSearchWidget.class);

AppWidgetManager manager = AppWidgetManager.getInstance(this);

manager.updateAppWidget(thisWidget, updateViews);

  }

public RemoteViews buildUpdate(Context context) {

   Movie movie = movieSeeker.findLatest();

   String imdbUrl = IMDB_BASE_URL + movie.imdbId;

   // Build an update that holds the updated widget contents

   RemoteViews updateViews = new RemoteViews(context.getPackageName(), R.layout.widget_layout);

   updateViews.setTextViewText(R.id.app_name, getString(R.string.app_name));

   updateViews.setTextViewText(R.id.movie_name, movie.name);

   Intent intent = new Intent();

   intent.setAction("android.intent.action.VIEW");

   intent.addCategory("android.intent.category.BROWSABLE");

   intent.setData(Uri.parse(imdbUrl));

   PendingIntent pendingIntent = 

PendingIntent.getActivity(context, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT);

   updateViews.setOnClickPendingIntent(R.id.movie_name, pendingIntent);

   return updateViews;

}

  @Override

  public IBinder onBind(Intent intent) {

// We don't need to bind to this service

return null;

  }

    }

}

movie_search_widget.xml

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

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

/res/layout/widget_layout.xml

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:focusable="true"
    style="@style/WidgetBackground">

    <TextView

  android:id="@+id/app_name"

  android:layout_width="wrap_content" 

  android:layout_height="wrap_content"

  android:layout_marginTop="14dip"

  android:layout_marginBottom="1dip"

  android:includeFontPadding="false"

  android:singleLine="true"

  android:ellipsize="end"

  style="@style/Text.WordTitle" />

    <TextView  

  android:id="@+id/movie_name"

  android:layout_width="fill_parent" 

  android:layout_height="wrap_content"

  android:layout_below="@id/app_name"

  android:paddingRight="5dip"

  android:paddingBottom="4dip"

  android:includeFontPadding="false"

  android:lineSpacingMultiplier="0.9"

  android:maxLines="4"

  android:fadingEdge="vertical"

  style="@style/Text.Movie" />

</RelativeLayout>

res/values/styles.xml

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

<resources>

    <style name="WidgetBackground">

  <item name="android:background">@drawable/widget_bg</item>
    </style>

    <style name="Text">
    </style>

    <style name="Text.Title">

  <item name="android:textSize">16sp</item>

  <item name="android:textStyle">bold</item>

  <item name="android:textColor">@android:color/black</item>
    </style>

    <style name="Text.Movie">

  <item name="android:textSize">13sp</item>

  <item name="android:textColor">@android:color/black</item>
    </style>

</resources>

AndroidManifest.xml

<application android:icon="@drawable/icon" android:label="@string/app_name">
...     

  <!-- Broadcast Receiver that will process AppWidget updates -->

  <receiver android:name=".widget.MovieSearchWidget" android:label="@string/widget_name">

<intent-filter>

    <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />

</intent-filter>

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

  </receiver>

  <!-- Service to perform web API queries -->

  <service android:name=".widget.MovieSearchWidget$UpdateService" />

...
</application>

 
This was an example of how to create AppWidget of your Android Application for the home screen of the device.

Related Article:

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

 

Want to take your Java Skills to the next level?
Grab our programming books for FREE!
  • Save time by leveraging our field-tested solutions to common problems.
  • The books cover a wide range of topics, from JPA and JUnit, to JMeter and Android.
  • Each book comes as a standalone guide (with source code provided), so that you use it as reference.
Last Step ...

Where should we send the free eBooks?

Good Work!
To download the books, please verify your email address by following the instructions found on the email we just sent you.