Open In App

How to Create a Dynamic Widget of an Android App?

Last Updated : 21 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Widgets are the UI elements provided by an application for accessing some of its features remotely either from Home Screens or Lock Screens. Widgets can be Static or Dynamic meaning that the display elements don't change (Static) or change (Dynamic) with time. Through this article, let's demonstrate the implementation of a Dynamic widget. In our case, we shall change the display with respect to time using a Thread.

How-to-Create-a--Dynamic-Widget--of-an-Android-App_


Steps for Creating Dynamic Widget

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Note: that Select Kotlin as the Programming Language.

Step 2: Add the App Widget to the Project

  • Right-Click on the app, move the cursor to new, find the "Widget" option at the end, select it.
Create_Widget-660
Creating Widget
  • Specify the required properties for the widget such as min.width and height, config file and preferred language, etc, and proceed. Files are automatically generated.
New_Widget


Step 3: What to program? Where to program?

In our application, since we wish to display two messages "Just do it" & "You are awesome" (the users may choose their own messages) one after the other simultaneously, we would be implementing a thread for generating a pause (of 1 second) in between.

The entire programming (back-end) is done in the newly created NewAppWidget.kt, Kotlin Class File in the Main Source Folder.

NewAppWidget.kt:

NewAppWidget.kt
package org.geeksforgeeks.demo

import android.appwidget.AppWidgetManager
import android.appwidget.AppWidgetProvider
import android.content.Context
import android.widget.RemoteViews

class NewAppWidget : AppWidgetProvider() {
    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray
    ) {
        
        // There may be multiple widgets active, so update all of them
        for (appWidgetId in appWidgetIds) {
            updateAppWidget(context, appWidgetManager, appWidgetId)
        }
    }

    override fun onEnabled(context: Context) {
        // functionality for when the first widget is created
    }

    override fun onDisabled(context: Context) {
        // functionality for when the last widget is disabled
    }
}

internal fun updateAppWidget(
    context: Context,
    appWidgetManager: AppWidgetManager,
    appWidgetId: Int
) {
    Thread {
        while (true) {
            
            // Construct the RemoteViews object
            val views = RemoteViews(context.packageName, R.layout.new_app_widget)
            views.setTextViewText(R.id.appwidget_text, "Just do it")
            
            // Instruct the widget manager to update the widget
            appWidgetManager.updateAppWidget(appWidgetId, views)
            Thread.sleep(1000)

            // Construct the RemoteViews object
            views.setTextViewText(R.id.appwidget_text, "You are awesome")
            
            // Instruct the widget manager to update the widget
            appWidgetManager.updateAppWidget(appWidgetId, views)
            Thread.sleep(1000)
        }
    }.start()
}


Step 4: Design the Widget

Navigate to app > res > layout > new_app_widget.xml and customise the widget as below

new_app_widget.xml:

XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/Widget.Demo.AppWidget.Container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/Theme.Demo.AppWidgetContainer">

    <TextView
        android:id="@+id/appwidget_text"
        style="@style/Widget.Demo.AppWidget.InnerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:backgroundTint="@android:color/transparent"
        android:layout_margin="8dp"
        android:contentDescription="@string/appwidget_text"
        android:text="@string/appwidget_text"
        android:textSize="24sp"
        android:textStyle="bold|italic" />
</RelativeLayout>


Output:



Next Article

Similar Reads