![Page 1: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/1.jpg)
Homescreen Widgets
DemystifiedPearl Chen
@androidsNsheep
AndroidTO // Oct 26, 2010
![Page 2: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/2.jpg)
Hi, I'm a web developer...
So many ways to create an Android application…
but none of them create homescreen widgets!
![Page 3: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/3.jpg)
...and I ♥ homescreen widgets
Examples
default Donut homescreendefault Froyo homescreen
![Page 4: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/4.jpg)
...and I ♥ homescreen widgets
Examples
Gmail Unread Count
HTC SenseUI email widget
![Page 5: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/5.jpg)
...and I ♥ homescreen widgets
Examples
Music Players
Settings controls
![Page 6: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/6.jpg)
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
![Page 7: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/7.jpg)
(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!
![Page 8: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/8.jpg)
Designing Widgets
Widget Design Best Practices UI Guidelinesdeveloper.android.com/guide/practices/ui_guidelines/widget_design.html
![Page 9: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/9.jpg)
Designing Widgets
Lighter color themein Cupcake and Donut Darker color theme
in Éclair and Froyo
![Page 10: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/10.jpg)
Coding Widgets
App Widgets Framework Guidedeveloper.android.com/guide/topics/appwidgets/index.html
![Page 11: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/11.jpg)
1. Download
2. Import into Eclipse as an ‘Existing Project’
3. Run
Sample Widget Code
code.google.com/p/androidto-basicwidget/
![Page 12: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/12.jpg)
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
![Page 13: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/13.jpg)
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
![Page 14: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/14.jpg)
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
![Page 15: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/15.jpg)
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
![Page 16: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/16.jpg)
AppWidgetProviderInfo
1. Create an xml folder in the res folder.
2. In the xml folder, create a new Android XML File
![Page 17: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/17.jpg)
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>
Because the Home screen's layout orientation (and thus, the cell sizes) can change, as a rule of thumb, you should assume the worst-case cell size of 74 pixels for the height and width of a cell. However, you must subtract 2 from the final dimension to account for any integer rounding errors that occur in the pixel count. To find your minimum width and height in density-independent pixels (dp), use this formula:(number of cells * 74) - 2Following 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
![Page 18: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/18.jpg)
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
![Page 19: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/19.jpg)
XML Layout File
1. There’s already a main.xml file in the res/layout folder so just reuse that.
![Page 20: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/20.jpg)
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.
![Page 21: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/21.jpg)
XML Layout File
5. And let’s also add a refresh button as a ImageButton with and id of refresh.
![Page 22: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/22.jpg)
If a widget is not an Activity, what is it?
An Activity could simply be described as an UI screen.
![Page 23: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/23.jpg)
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.
![Page 24: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/24.jpg)
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.e.g. Button btn = (Button) findViewById(R.id.my_button);btn.setText(“Submit”);
![Page 25: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/25.jpg)
If a widget is not an Activity, what is it?
Widgets also contain View widgets such as LinearLayout, TextView, and Button (but there are limitations to what Views you can use).
![Page 26: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/26.jpg)
If a widget is not an Activity, what is it?
Button btn = (Button) findViewById(R.id.my_button);btn.setText(“Submit”);
![Page 27: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/27.jpg)
If a widget is not an Activity, what is it?
RemoteViews
RemoteViews remoteView = new RemoteViews( context.getPackageName(), R.layout.widget );
remoteView.setTextViewText( R.id.my_button, “Submit”);
![Page 28: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/28.jpg)
If a widget is not an Activity, what is it?
The application component that supplies the UI for a widget is a BroadcastReceiver
RemoteViews
![Page 29: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/29.jpg)
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
![Page 30: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/30.jpg)
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!
}}
![Page 31: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/31.jpg)
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 )
![Page 32: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/32.jpg)
AppWidgetProvider
public void onUpdate( Context context, AppWidgetManager AppWidgetManager, int[] appWidgetIds) {
/* update each widget that belongs to this provider individually by setting an alarm because we're setting an alarm, onUpdate is really only called when a new widget is added, or the phone restarts */
final int N = appWidgetIds.length; for (int i=0; i<N; i++) { int appWidgetId = appWidgetIds[i]; setAlarm(context, appWidgetId, 30000); }}
![Page 33: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/33.jpg)
AppWidgetProvider
public static void setAlarm(Context context, int appWidgetId, int updateRate) {
// To prevent any ANR timeouts, // we perform the update in an intent service
PendingIntent pendingIntent = createUpdatePendingIntent(context,REFRESH,appWidgetId);
AlarmManager alarms = (AlarmManager)
context.getSystemService(Context.ALARM_SERVICE);
//and then have the alarm wake up the system to do updates alarms.setRepeating(AlarmManager.ELAPSED_REALTIME,
SystemClock.elapsedRealtime(), updateRate, pendingIntent);
}
![Page 34: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/34.jpg)
AppWidgetProvider
public static class UpdateService extends IntentService {
@Override public void onHandleIntent(Intent intent) { ComponentName widget =
new ComponentName( this, BasicWidgetProvider.class );
AppWidgetManager appWidgetManager = AppWidgetManager.getInstance(this); appWidgetManager.updateAppWidget(widget, buildUpdate(this, intent)); }
private RemoteViews buildUpdate(Context context, Intent intent) { RemoteViews views =
new RemoteViews( context.getPackageName(), R.layout.widget ); //update the UI here… return views; }
}
context.startService(new Intent(context, UpdateService.class));
![Page 35: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/35.jpg)
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
![Page 36: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/36.jpg)
AndroidManifest.xml
<receiver android:name="BasicWidgetProvider" >
<intent-filter> <action android:name="android.appwidget.action.APPWIDGET_UPDATE" /> <action android:name="android.appwidget.action.APPWIDGET_ENABLED" /> <action android:name="android.appwidget.action.APPWIDGET_DISABLED" /> <action android:name="android.appwidget.action.APPWIDGET_DELETED" /> </intent-filter>
<meta-data android:name="android.appwidget.provider" android:resource="@xml/basic_provider_info" /></receiver>
<service android:name=".BasicWidgetProvider$UpdateService" />
![Page 37: Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010](https://reader036.vdocument.in/reader036/viewer/2022062422/56649e7a5503460f94b7a649/html5/thumbnails/37.jpg)
THANK YOU!
Pearl Chen @androidsNsheep