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
...and I ♥ homescreen widgets
Examples
Gmail Unread Count
HTC SenseUI email widget
...and I ♥ homescreen widgets
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...
(Another) key reason to build a widget
Keep users engaged with your app!
out of sight == out of mind 
Hey!
Don’t forget a...
Designing Widgets
Widget Design Best Practices UI Guidelines
developer.android.com/guide/practices/ui_guidelines/widget_de...
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-basicwid...
Overview of Widget Development
1) Create a new Android project in Eclipse
without an Activity class
2) Declare AppWidgetPr...
Overview of Widget Development
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 sta...
Overview of Widget Development
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="294...
Overview of Widget Development
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 contain...
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.
If a widget is not an Activity, what is it?
An Activity could simply be
described as an UI screen.
It contains View widget...
If a widget is not an Activity, what is it?
An Activity could simply be
described as an UI screen.
It contains View widget...
If a widget is not an Activity, what is it?
Widgets also contain View
widgets such as LinearLayout,
TextView, and Button (...
If a widget is not an Activity, what is it?
Button btn =
(Button) findViewById(R.id.my_button);
btn.setText(“Submit”);
If a widget is not an Activity, what is it?
RemoteViews
RemoteViews remoteView =
new RemoteViews(
context.getPackageName()...
If a widget is not an Activity, what is it?
The application component that
supplies the UI for a widget is a
BroadcastRece...
Overview of Widget Development
4) Extend the AppWidgetProvider class
AppWidgetProvider
public class BasicWidgetProvider extends AppWidgetProvider {
@Override
public void onUpdate(
Context con...
AppWidgetProvider
void onUpdate( Context context,
AppWidgetManager appWidgetManager,
int[] appWidgetIds )
void onEnabled( ...
AppWidgetProvider
final int N = appWidgetIds.length;
for (int i=0; i<N; i++) {
int appWidgetId = appWidgetIds[i];
setAlarm...
AppWidgetProvider
AppWidgetProvider
Overview of Widget Development
5) Update AndroidManifest.xml
AndroidManifest.xml
THANK YOU!
Pearl Chen
@androidsNsheep
Upcoming SlideShare
Loading in …5
×

Android Homescreen Widgets Demystified

4,433 views

Published on

This was a presented at AndroidTO on Oct 26, 2010

Published in: Technology, News & Politics
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,433
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Android Homescreen Widgets Demystified

  1. 1. Homescreen Widgets Demystified Pearl Chen @androidsNsheep AndroidTO // Oct 26, 2010
  2. 2. Hi, I'm a web developer... So many ways to create an Android application… but none of them create homescreen widgets!
  3. 3. ...and I ♥ homescreen widgets Examples default Donut homescreen default Froyo homescreen
  4. 4. ...and I ♥ homescreen widgets Examples Gmail Unread Count HTC SenseUI email widget
  5. 5. ...and I ♥ homescreen widgets Examples Music Players Settings controls
  6. 6. 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
  7. 7. (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!
  8. 8. Designing Widgets Widget Design Best Practices UI Guidelines developer.android.com/guide/practices/ui_guidelines/widget_design.html
  9. 9. Designing Widgets Lighter color theme in Cupcake and Donut Darker color theme in Éclair and Froyo
  10. 10. Coding Widgets App Widgets Framework Guide developer.android.com/guide/topics/appwidgets/index.html
  11. 11. 1. Download 2. Import into Eclipse as an ‘Existing Project’ 3. Run Sample Widget Code code.google.com/p/androidto-basicwidget/
  12. 12. 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
  13. 13. Overview of Widget Development 1) Create a new Android project in Eclipse without an Activity class
  14. 14. 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
  15. 15. Overview of Widget Development 2) Declare AppWidgetProviderInfo object
  16. 16. AppWidgetProviderInfo 1. Create an xml folder in the res folder. 2. In the xml folder, create a new Android XML File
  17. 17. 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
  18. 18. Overview of Widget Development 3) Create xml layout file for widget view
  19. 19. XML Layout File 1. There’s already a main.xml file in the res/layout folder so just reuse that.
  20. 20. 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.
  21. 21. XML Layout File 5. And let’s also add a refresh button as a ImageButton with and id of refresh.
  22. 22. If a widget is not an Activity, what is it? An Activity could simply be described as an UI screen.
  23. 23. 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.
  24. 24. 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”);
  25. 25. 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).
  26. 26. If a widget is not an Activity, what is it? Button btn = (Button) findViewById(R.id.my_button); btn.setText(“Submit”);
  27. 27. 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” );
  28. 28. If a widget is not an Activity, what is it? The application component that supplies the UI for a widget is a BroadcastReceiver RemoteViews
  29. 29. Overview of Widget Development 4) Extend the AppWidgetProvider class
  30. 30. 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! } }
  31. 31. 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 )
  32. 32. AppWidgetProvider final int N = appWidgetIds.length; for (int i=0; i<N; i++) { int appWidgetId = appWidgetIds[i]; setAlarm(context, appWidgetId, 30000); }
  33. 33. AppWidgetProvider
  34. 34. AppWidgetProvider
  35. 35. Overview of Widget Development 5) Update AndroidManifest.xml
  36. 36. AndroidManifest.xml
  37. 37. THANK YOU! Pearl Chen @androidsNsheep

×