Android Homescreen Widgets Demystified

Homescreen Widgets
Demystified
Pearl Chen
@androidsNsheep
AndroidTO // Oct 26, 2010

Hi, I'm a web developer...
So many ways to create
an Android application…
but none of them
create homescreen widgets!

...and I ♥ homescreen widgets
Examples
default Donut homescreen
default Froyo homescreen

Examples
Gmail Unread Count
HTC SenseUI email widget

Examples
Music Players
Settings controls

Key reasons to build a widget
• At-a-glance information
– unread messages, calendar items, to do lists
• Control apps that run in the background
– Music player
• Toggle settings
– settings that affect other applications such as GPS or wifi
– Consider how the Google Voice widget can toggle between “Use for all calls”,
“Do not use for calls”, “International calls only”, and “Ask for every call”. You
might want to toggle this setting before opening the Dailer app
• “Smart” shortcuts
– Reduce something that would normally take at least 2 steps into 1
– If it simply opens another application, keep it as a regular application shortcut

(Another) key reason to build a widget
Keep users engaged with your app!
out of sight == out of mind 
Hey!
Don’t forget about me!

Designing Widgets
Widget Design Best Practices UI Guidelines
developer.android.com/guide/practices/ui_guidelines/widget_design.html

Designing Widgets
Lighter color theme
in Cupcake and Donut
Darker color theme
in Éclair and Froyo

Coding Widgets
App Widgets Framework Guide
developer.android.com/guide/topics/appwidgets/index.html

1. Download
2. Import into Eclipse
as an ‘Existing Project’
3. Run
Sample Widget Code
code.google.com/p/androidto-basicwidget/

Overview of Widget Development
1) Create a new Android project in Eclipse
without an Activity class
2) Declare AppWidgetProviderInfo object
3) Create xml layout file for widget view
4) Extend the AppWidgetProvider class
5) Update AndroidManifest.xml

1) Create a new Android project in Eclipse
without an Activity class

Create a new Android project
Widgets not available in
Android 1.1
No need for an Activity
unless there’s going to be
a standalone application

2) Declare AppWidgetProviderInfo object

AppWidgetProviderInfo
1. Create an xml folder
in the res folder.
2. In the xml folder,
create a new
Android XML File

AppWidgetProviderInfo
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="294dp"
android:minHeight="72dp"
android:updatePeriodMillis=“30000"
android:initialLayout="@layout/widget">
</appwidget-provider>
(number of cells * 74) - 2
Following this formula, you should use 72 dp for a height of one cell, 294 dp and for a width of four cells.
(number of cells * 74) - 2

3) Create xml layout file for widget view

XML Layout File
1. There’s already a main.xml file in the
res/layout folder so just reuse that.

XML Layout File
2. I renamed it to widget.xml so it was more descriptive.
3. Added a background and padding to the container.
4. And gave the TextView an id of current_time.

XML Layout File
5. And let’s also add a refresh button as a ImageButton
with and id of refresh.

If a widget is not an Activity, what is it?
An Activity could simply be
described as an UI screen.

It contains View widgets such
as LinearLayout, TextView,
and Button typically marked
up in a layout xml file.

It contains View widgets such
as LinearLayout, TextView,
and Button typically marked
up in a layout xml file.
e.g.
Button btn =
(Button) findViewById(R.id.my_button);
btn.setText(“Submit”);

Widgets also contain View
widgets such as LinearLayout,
TextView, and Button (but
there are limitations to what
Views you can use).

Button btn =
(Button) findViewById(R.id.my_button);
btn.setText(“Submit”);

RemoteViews
RemoteViews remoteView =
new RemoteViews(
context.getPackageName(),
R.layout.widget
);
remoteView.setTextViewText(
R.id.my_button,
“Submit”
);

The application component that
supplies the UI for a widget is a
BroadcastReceiver
RemoteViews

4) Extend the AppWidgetProvider class

AppWidgetProvider
public class BasicWidgetProvider extends AppWidgetProvider {
@Override
public void onUpdate(
Context context,
AppWidgetManager appWidgetManager,
int[] appWidgetIds)
{
super.onUpdate(
context,
appWidgetManager,
appWidgetIds
);
//do some stuff every updatePeroidMillis!
}
}

AppWidgetProvider
void onUpdate( Context context,
AppWidgetManager appWidgetManager,
int[] appWidgetIds )
void onEnabled( Context context )
void onDeleted( Context context,
int[] appWidgetIds )
void onDisabled( Context context )
void onReceive( Context context,
Intent intent )

AppWidgetProvider
final int N = appWidgetIds.length;
for (int i=0; i<N; i++) {
int appWidgetId = appWidgetIds[i];
setAlarm(context, appWidgetId, 30000);
}

5) Update AndroidManifest.xml

THANK YOU!
Pearl Chen
@androidsNsheep

Android Homescreen Widgets Demystified

More Related Content

What's hot (10)

Similar to Android Homescreen Widgets Demystified (20)

Recently uploaded (20)

Android Homescreen Widgets Demystified