Part -2: Creating Multiple Sized App Widgets


This app widget tutorial is with respect to the app widget present in Nepal Khabar present in the Google play store.

After App Widget Basics, lets learn how to add multiple sized app widget for our application. To create multiple sized appwidgets, we must create following things:

1.As we have defined appwidgetprovider receiver in manifest file in After App Widget Basics, add Receiver definition for small, medium and large receiver tag in manifest file
2. Create three app widget provider info, i.e. the xml file for small, medium and large app widget in res > xml file and include it in the meta-data of each appwidget provider
3. Create appwidgetprovider class for small, medium and large app widget

How to define receiver for multiple app widgets in receiver file ?
The following code snippets demonstrates how it can be done:
Receiver for large widget

  <receiver  
       android:name="WidgetProviderLarge"  
       android:icon="@drawable/ic_launcher"  
       android:label="@string/large_widget_name"  
        >  
       <intent-filter>  
         <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />  
       </intent-filter>  
       <meta-data  
         android:name="android.appwidget.provider"  
         android:resource="@xml/appwidgetproviderinfo_large" />  
     </receiver>  

Receiver for medium widget

  <receiver  
       android:name="WidgetProviderMedium"  
       android:icon="@drawable/ic_launcher"  
       android:label="large_medium"  
        >  
       <intent-filter>  
         <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />  
       </intent-filter>  
       <meta-data  
         android:name="android.appwidget.provider"  
         android:resource="@xml/appwidgetproviderinfo_medium" />  
     </receiver>  

Receiver for medium widget

  <receiver  
       android:name="WidgetProviderSmall"  
       android:icon="@drawable/ic_launcher"  
       android:label="small_widget" >  
       <intent-filter>  
         <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />  
       </intent-filter>  
       <meta-data  
         android:name="android.appwidget.provider"  
         android:resource="@xml/appwidgetproviderinfo_small" />  
     </receiver>   

While defining each appwidget receiver in manifest file, we must keep in mind

    android:name for each widget have to be different. If we provide same name to both the receivers then, only one widget will be visible in widgets list.
    we can use the same layout or different layout. Basically this is as per our requirement.

How to create appwidget provider info in xml for each app widget ?
The following code snippets demonstrates how it can be done:
app widgetprovider info for large widget in xml.

 <?xml version="1.0" encoding="utf-8"?>  
 <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"  
   android:initialLayout="@layout/layout_appwidget_large"  
   android:minHeight="115dp"  
   android:minWidth="250dp"  
   android:updatePeriodMillis="21600000" ><!-- 6hrs -->  
 </appwidget-provider>  

app widgetprovider info for large widget in xml

 

How to create appwidget provider class for each app widget ?
The following code snippets demonstrates how it can be done:
app widgetprovider class for large widget

 public class WidgetProviderLarge extends AppWidgetProvider {   
  public void onUpdate(Context context, AppWidgetManager appWidgetManager,   
         int[] appWidgetIds) {   
       this.context = context;   
       Log.d("onUpdate", "called");   
       for (int widgetId : appWidgetIds) {   
         updateAppWidget(context, appWidgetManager, widgetId);   
       }   
    }   
 }  

app widgetprovider class for small widget

 public class WidgetProviderSmall extends AppWidgetProvider {   
  public void onUpdate(Context context, AppWidgetManager appWidgetManager,   
         int[] appWidgetIds) {   
       this.context = context;   
       Log.d("onUpdate", "called");   
       for (int widgetId : appWidgetIds) {   
         updateAppWidget(context, appWidgetManager, widgetId);   
       }   
    }   
 }  

Check out the sample project in github .

Notice: if you want to find the label of appwidget from your configuration activty(optiona), then the following code snippet will help you:

      AppWidgetProviderInfo providerInfo = AppWidgetManager.getInstance(  
                     getBaseContext()).getAppWidgetInfo(mAppWidgetId);  
           String appWidgetLabel = providerInfo.label;  

My next tutorial will be about Handling User Interaction in Widgets
Since then, happy coding 😀