Building Beautiful Widget experiences on Android

A talk I did as part of my Android Dev Rel job interview at Google. The talk was on topic of building beautiful widgets on Android. It covers the cases of static, responsive and customisable widgets.

The talk was given on November 2018 and the material is still relevant today.

Transcript

1. Building Beautiful 
 Widgets Experiences
 in Android Alexandros Stylianidis
 @alextyl
6. Weatherino
8. ForecastActivity.kt Displays the weekly forecast Model-View-Presenter
9. Model-View-Presenter data class ForecastModel( val date: String, val degrees: String, @DrawableRes val weatherIcon: Int )
10. Model-View-Presenter fun startPresentingInto(view: WeatherForcastView) { subscription = forecastRepository .getWeeklyForecast() .map { weeklyForecast -> weeklyForecast.map { forecast -> viewModelFactory.viewModelFor(forecast) } } .subscribeOn(workScheduler) .observeOn(resultScheduler) .subscribe { view.displayForecast(it) } }
11. Model-View-Presenter interface { } WeatherForcastView fun displayForecast(viewModels: List<ForecastModel>) fun displayError()
12. Model-View-Presenter class ForecastActivity : AppCompatActivity(), { private lateinit var forecastAdapter: ForecastAdapter override { forecastAdapter.displayForecast(viewModels) } override { Toast.makeText(this, R.string.error_message, Toast.LENGTH_SHORT).show() } // rest of implementation } WeatherForcastView fun displayForecast(viewModels: List<ForecastModel>) fun displayError()
13. Building a static Widget
15. App Widget Provider
16. App Widget Provider MyWidgetProvider : AppWidgetProvider() widget_configuration.xml = +
17. onDisabled() onUpdate() onDeleted() MyWidgetProvider : AppWidgetProvider() onEnabled()
18. class WeatherForecastWidgetProvider : AppWidgetProvider { private lateinit var presenter: WeatherForcastPresenter override fun onUpdate( context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray) { val view = ??? presenter.startPresentingInto(view) }
19. What can we can as a View in this case?
 There are no Activities, Fragments or Views
20. AppWidgetManager
21. AppWidgetManager appWidgetManager.updateAppWidget(appWidgetId, remoteViews)
22. private fun createRemoteViewsFor(viewModels: List<ForecastModel>): RemoteViews { val remoteViews = RemoteViews(context.packageName, R.layout.widget_weekly_forecast) viewModels .take(5) // display up to 5 days .forEachIndexed { index, forecastModel -> val widgetIds = indexToWidgetIds[index]!! remoteViews.setTextViewText(widgetIds.dateId, forecastModel.date) remoteViews.setTextViewText(widgetIds.degreesId, forecastModel.degrees) remoteViews.setImageViewResource(widgetIds.iconId, forecastModel.weatherIcon) } return remoteViews }
23. class WeeklyForecastRowView(private val appWidgetManager: AppWidgetManager, private val appWidgetIds: List<Int>) : WeatherForcastView { override fun displayForecast(viewModels: List<ForecastModel>) { appWidgetIds.forEach { appWidgetId -> val remoteViews = createRemoteViewsFor(viewModels) appWidgetManager.updateAppWidget(appWidgetId, remoteViews) } }
25. Building a resizable Widget
27. App Widget Provider onEnabled() onDisabled() onUpdate() onDeleted()
28. App Widget Provider onEnabled() onDisabled() onUpdate() onDeleted() onAppWidgetOptionsChanged() (since Android API 16)
29. The new Bundle will return the new size of the widget in dp…
30. The new Bundle will return the new size of the widget in dp…
31. See: Standard Widget Anatomy App Widget Design Guidelines
32. private fun Int.dpToCells() = (this + 30) / 70 fun Bundle.getMinColumns(): Int = getInt(AppWidgetManager.OPTION_APPWIDGET_MIN_WIDTH).dpToCells() fun Bundle.getMaxColumns(): Int = getInt(AppWidgetManager.OPTION_APPWIDGET_MAX_WIDTH).dpToCells() fun Bundle.getMinRows(): Int = getInt(AppWidgetManager.OPTION_APPWIDGET_MIN_HEIGHT).dpToCells() fun Bundle.getMaxRows(): Int = getInt(AppWidgetManager.OPTION_APPWIDGET_MAX_HEIGHT).dpToCells()
33. class WeeklyForecastRowView: WeatherForcastView { override fun displayForecast(viewModels: List<ForecastModel>) { appWidgetIds.forEach { appWidgetId -> appWidgetManager.updateAppWidget(appWidgetId, remoteViews) } } val remoteViews = createRemoteViewsFor(viewModels)
34. appWidgetManager.updateAppWidget(appWidgetId, remoteViews) } } class WeeklyForecastRowView: WeatherForcastView { override fun displayForecast(viewModels: List<ForecastModel>) { appWidgetIds.forEach { appWidgetId -> val widgetOptions = appWidgetManager.getAppWidgetOptions(appWidgetId) val numberOfColumns = widgetOptions.getMinColumns().capTo(5) , numberOfColumns val remoteViews = createRemoteViewsFor(viewModels )
35. private fun createRemoteViewsFor( viewModels: List<ForecastModel>): RemoteViews { val remoteViews = RemoteViews(context.packageName, R.layout.widget_weekly_forecast) viewModels .take(5) .forEachIndexed { index, forecastModel -> val widgetIds = indexToWidgetIds[index]!! remoteViews.setTextViewText(widgetIds.dateId, forecastModel.date) remoteViews.setTextViewText(widgetIds.degreesId, forecastModel.degrees) remoteViews.setImageViewResource(widgetIds.iconId, forecastModel.weatherIcon) } return remoteViews }
36. private fun createRemoteViewsFor( viewModels: List<ForecastModel>, numberOfColumns: Int): RemoteViews { val remoteViews = RemoteViews(context.packageName, R.layout.widget_weekly_forecast) viewModels .take(numberOfColumns) .forEachIndexed { index, forecastModel -> val widgetIds = indexToWidgetIds[index]!! remoteViews.setViewVisibility(widgetIds.groupID, View.VISIBLE) remoteViews.setTextViewText(widgetIds.dateId, forecastModel.date) remoteViews.setTextViewText(widgetIds.degreesId, forecastModel.degrees) remoteViews.setImageViewResource(widgetIds.iconId, forecastModel.weatherIcon) } return remoteViews } remoteViews.setViewVisibility(widgetIds.groupID, View.VISIBLE) .take(numberOfColumns) numberOfColumns: Int
37. Building a Responsive Design Widget
40. Populating a list of RemoteViews using a RemoteFactoryService
41. Populating a list of RemoteViews using a RemoteFactoryService
42. RemoteFactoryService fun onGetViewFactory(intent: Intent): RemoteViewsFactory since Android API 11
43. RemoteViewsFactory fun onCreate() fun getLoadingView() fun onDataSetChanged() fun getViewAt(position: Int): RemoteViews Initialise the factory
44. RemoteViewsFactory fun onCreate() Initialise your factory
45. RemoteViewsFactory fun onDataSetChanged() Widget needs to be update.
 Refresh your data synchronously
46. RemoteViewsFactory fun getLoadingView():RemoteViews? How does each row look like 
 while loading?
47. RemoteViewsFactory fun getViewAt(position: Int): RemoteViews RemoteViews of each Row
48. private fun createListRemoteViews(context: Context): RemoteViews { val remoteViews = RemoteViews(context.packageName, R.layout.widget_weekly_forecast_list) val intent = Intent(context, ForecastRemoteViewService::class.java) remoteViews.setRemoteAdapter(R.id.widget_forecast_list, intent) return remoteViews }
49. presenter.startPrentingInto(WeeklyForecastRowView(appWidgetManager, context, rowWidgets)) } class WeatherForecastWidgetProvider : AppWidgetProvider() { private lateinit var presenter: WeatherForcastPresenter override fun onUpdate(context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray) { super.onUpdate(context, appWidgetManager, appWidgetIds)
50. val listWidgets = appWidgetIds.filter { appWidgetManager.getAppWidgetOptions(it).getMaxRows() > 1 } listWidgets.forEach { appWidgetId -> val remoteViews = createListRemoteViews(context) appWidgetManager.updateAppWidget(appWidgetId, remoteViews) } val rowWidgets = appWidgetIds.toList() - listWidgets if (rowWidgets.isNotEmpty()) { presenter.startPrentingInto(WeeklyForecastRowView(appWidgetManager, context, rowWidgets)) } class WeatherForecastWidgetProvider : AppWidgetProvider() { private lateinit var presenter: WeatherForcastPresenter override fun onUpdate(context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray) { super.onUpdate(context, appWidgetManager, appWidgetIds)
54. Building a Customisable Widget
55. Widget Configuration Activity using a RemoteFactoryService since Android API 1
56. Widget Configuration Activity using a RemoteFactoryService <activity android:name=".upcomingforcast.appwidget.preview.WidgetPreviewActivity" android:noHistory="true"> <intent-filter> <action android:name="android.appwidget.action.APPWIDGET_CONFIGURE" /> </intent-filter> </activity>
57. How is the widget linked to the configuration activity?
58. How is the widget linked to the configuration activity? through the widget_configuration.xml
59. App Widget Provider MyWidgetProvider : AppWidgetProvider() .xml = + widget_configuration
60. <appwidget-provider android:configure=".appwidget.preview.WidgetPreviewActivity" android:initialLayout="@layout/widget_todays_forecast" android:previewImage=“@drawable/preview_widget” android:resizeMode="horizontal|vertical" android:updatePeriodMillis="3600000" android:widgetCategory="home_screen" /> android:minWidth="48dp" android:minHeight="48dp" .xml widget_configuration
61. <receiver android:name=".upcomingforcast.appwidget.WeatherForecastWidgetProvider" 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/ “ /> </receiver> widget_configuration AndroidManifest.xml
62. Widget Configuration Activity Provide options to customise the widget, utilities and/or styling Keep user’s journey in mind; don’t go deeper in navigation See Material Design’s Platform Guidance > Android widget
64. Widget Configuration Activity val intent = intent val extras = intent.extras if (extras != null) { val mAppWidgetId = extras.getInt( AppWidgetManager.EXTRA_APPWIDGET_ID, AppWidgetManager.INVALID_APPWIDGET_ID) // TODO save user preferences updateWidgetWithId(mAppWidgetId) } setResult(Activity.RESULT_OK) finish() Saving changes and placing the widget
68. Pinning Widgets on Homescreen since Android API 26 val mAppWidgetManager = context.getSystemService(AppWidgetManager::class); val myProvider = ComponentName(context, MyAppWidgetProvider:class); if (mAppWidgetManager.isRequestPinAppWidgetSupported()) { Intent pinnedWidgetCallbackIntent = new Intent( ... ); val successCallback = PendingIntent.createBroadcast(context, 0, pinnedWidgetCallbackIntent); mAppWidgetManager.requestPinAppWidget(myProvider, null, successCallback); }
69. To sum up A widgets let users access your content faster Building responsive Widgets in steps: Create a Static Widget Allow configuration via the Configuration Activity Prompt user to Pin your Widget if they keep coming back Create resizable widgets with onAppWidgetOptionsChanged() Scrollable widgets are populated via the RemoteViewsService
70. Thank you! Alexandros Stylianidis
 @alextyl