Getting started to Android App Widget
Tags: android, widgets, kotlin, programming
Published: 2023-02-14 03:00:02

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](https://developer.android.com/develop/ui/views/appwidgets),
```
App widgets are miniature application views that can be
embedded in other applications (such as the home screen)
and receive periodic updates.
```

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" />
```

**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.
```

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 the` updatePeriodMillis` 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/502tftiuyx101xb4riws.jpg)

**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 :)