How To Make an Android Widget (Home Screen)

A widget is a small application that is displayed only on the Home Screens or Lock Screens, it provides a quick way to access certain information from apps without having to open the app itself. No programming is required for generating a basic widget and it is only required if an application is to be embedded inside the widget. In this article, we demonstrate how to create a widget for an android app.

Steps For Creating a Widget for Android Devices

Step 1: Open a New Project

Step 2: Add App Widget

  Select App > Res > Layout > New > Widget > App Widget

Provide the required properties for the widget such as placement, minimum width,Maximum height ,source language etc. Files are automatically generated

Step 3: Run the code on Android Virtual Device(AVD)

Open the widget section of the phone, search for the widget ,select it ,bring it to

Home screen

To delete the widget drag it to the bottom of the screen and we are done! 

Read More: SlideUp Motion Layout in Android Studio

Exploring the generated files:

1. res/xml/new_app_widget_info.xml

Also known as provider-info file . It defines properties such as default size,widget’s size,how frequently widget is updated

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
   android:configure="com.example.newappwidget.NewAppWidgetConfigureActivity"
   android:initialKeyguardLayout="@layout/new_app_widget"
   android:initialLayout="@layout/new_app_widget"
   android:minWidth="250dp"
   android:minHeight="110dp"
   android:previewImage="@drawable/example_appwidget_preview"
   android:resizeMode="horizontal|vertical"
   android:updatePeriodMillis="86400000"
   android:widgetCategory="home_screen"></appwidget-provider>

1. res/layout/new_app_widget.xml

The file defines layout of widget

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="?attr/appWidgetBackgroundColor"
   android:padding="@dimen/widget_margin"
   android:theme="@style/ThemeOverlay.NewAppWidget.AppWidgetContainer">

   <TextView
       android:id="@+id/appwidget_text"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:layout_margin="8dp"
       android:background="?attr/appWidgetBackgroundColor"
       android:contentDescription="@string/appwidget_text"
       android:text="@string/appwidget_text"
       android:textColor="?attr/appWidgetTextColor"
       android:textSize="24sp"
       android:textStyle="bold|italic" />
</RelativeLayout>

1. java/values/NewAppWidget.java

This file handle widget update intents

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

/**
* Implementation of App Widget functionality.
* App Widget Configuration implemented in {@link NewAppWidgetConfigureActivity NewAppWidgetConfigureActivity}
*/
public class NewAppWidget extends AppWidgetProvider {

   static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,
                               int appWidgetId) {

       CharSequence widgetText = NewAppWidgetConfigureActivity.loadTitlePref(context, appWidgetId);
       // Construct the RemoteViews object
       RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.new_app_widget);
       views.setTextViewText(R.id.appwidget_text, widgetText);

       // Instruct the widget manager to update the widget
       appWidgetManager.updateAppWidget(appWidgetId, views);
   }

   @Override
   public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
       // There may be multiple widgets active, so update all of them
       for (int appWidgetId : appWidgetIds) {
           updateAppWidget(context, appWidgetManager, appWidgetId);
       }
   }

   @Override
   public void onDeleted(Context context, int[] appWidgetIds) {
       // When the user deletes the widget, delete the preference associated with it.
       for (int appWidgetId : appWidgetIds) {
           NewAppWidgetConfigureActivity.deleteTitlePref(context, appWidgetId);
       }
   }

   @Override
   public void onEnabled(Context context) {
       // Enter relevant functionality for when the first widget is created
   }

   @Override
   public void onDisabled(Context context) {
       // Enter relevant functionality for when the last widget is disabled
   }
}

1. res/values/dimens.xml

This dimensional file is used for providing widget padding .

<dimen name="widget_margin">0dp</dimen>

app/manifests/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.newappwidget">

   <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:supportsRtl="true"
       android:theme="@style/Theme.NewAppWidget">
       <receiver android:name=".NewAppWidget">
           <intent-filter>
               <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
           </intent-filter>

           <meta-data
               android:name="android.appwidget.provider"
               android:resource="@xml/new_app_widget_info" />
       </receiver>

       <activity android:name=".NewAppWidgetConfigureActivity">
           <intent-filter>
               <action android:name="android.appwidget.action.APPWIDGET_CONFIGURE" />
           </intent-filter>
       </activity>
       <activity android:name=".MainActivity">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
   </application>

</manifest>