DEV Community

Cover image for Getting started to Android App Widget
mikkel septiano
mikkel septiano

Posted on

Getting started to Android App Widget

Have you ever seen a mini app on our Home Screen that periodically received an updated data even though we don't even open the app?

That is we called App Widget, an Android App Widget.

so what is app widget actually? or maybe do you ever accidentally use it?

Based on Developer Google,

App widgets are miniature application views that can be
embedded in other applications (such as the home screen)
and receive periodic updates.
Enter fullscreen mode Exit fullscreen mode

We can conclude that app widget is an 'something' on home screen essential aspect that contains simple and important information so user can access and receive it quickly

Widget components

Widget consists of 3 main parts:

To create a widget, you need the following basic components:

1. AppWidgetProviderInfo object
Describes the metadata for a widget, such as the widget's layout, update frequency, and the AppWidgetProvider class. Defined in the XML on this page.

class AppWidget : AppWidgetProvider() { }

2. AppWidgetProvider class
Defines the basic methods that allow you to programmatically interface with the widget. Through it, you will receive broadcasts when the widget is updated, enabled, disabled, or deleted. AppWidgetProvider is declared in the manifest and then implemented, as described on this page.

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:description="@string/app_widget_description"
    android:initialKeyguardLayout="@layout/widget_app_navigation"
    android:initialLayout="@layout/widget_app_navigation"
    android:minWidth="@dimens/_300sdp"
    android:minHeight="@dimens/_100sdp"
    android:previewImage="@drawable/ic_logo_new_login"
    android:previewLayout="@layout/widget_app_navigation"
    android:resizeMode="horizontal|vertical"
    android:targetCellWidth="4"
    android:targetCellHeight="2"
    android:updatePeriodMillis="0"
    android:widgetCategory="home_screen" />
Enter fullscreen mode Exit fullscreen mode

3. View layout
Defines the initial layout for the widget. Defined in XML, as described on this page.

Remote Views

One of most important thing when you want to build a widget it RemoteViews.

RemoteViews defines:

A class that describes a view hierarchy that can be
displayed in another process. The hierarchy is inflated
from a layout resource file, and this class provides some
basic operations for modifying the content of the
inflated hierarchy.
Enter fullscreen mode Exit fullscreen mode

so it means that RemoteViews is a view that can runs and execute in outside main app process.

RemoteViews is limited to support for the following layouts:

  • AdapterViewFlipper
  • FrameLayout
  • GridLayout
  • GridView
  • LinearLayout
  • ListView
  • RelativeLayout
  • StackView
  • ViewFlipper

And the following widgets:

  • AnalogClock
  • Button
  • Chronometer
  • ImageButton
  • ImageView
  • ProgressBar
  • TextClock
  • TextView

As of API 31, the following widgets and layouts may also be used:

  • CheckBox
  • RadioButton
  • RadioGroup
  • Switch

Descendants of these classes are not supported.

Understanding Widget Override Methods

Widget classes overrides the following methods:

  1. onUpdate(): This is called to update the App Widget at intervals defined by theupdatePeriodMillis attribute.

  2. onAppWidgetOptionsChanged() : This is called when the widget is first placed and also whenever the widget is resized.

  3. onDeleted(Context, int[]): This is called every time an App Widget is deleted from the App Widget host.

  4. onEnabled(Context): This is called when an instance the App Widget is created for the first time.

  5. onDisabled(Context): This is called when the last instance of your App Widget is deleted from the App Widget host.

  6. onReceive(Context, Intent): This is called for every broadcast and before each of the above callback methods.

In my case, I create 2 widgets for helping users get better experience on Altea Care Medical App.

screenshot app

First one (top widget) is a widget for a shortcut of navigation to navigates to some activities of android apps. So user can navigates to some page without open the app first

Second one (bottom widget) is a widget to display top 3 of user newest video call consultation history item list. So user can aware and recognize the nearest schedules on their app.

.
.

Happy Coding :)

Top comments (0)