Eclipsed4utoo's Blog

I recently wrote my first application for Android, and it was a great learning experience.  One of the more “advanced” tasks that I wanted to do was to make the widget icon change depending on whether the LEDs were on or not.  I also wanted to allow the user to be able to choose which icons they wanted the widget to use.

So I started out using one layout XML file with multiple ImageViews, and was just showing/hiding and changing the source to the image that I wanted to show.  I started thinking that this seemed to be very convoluted and that there must be an easier way.

I decided to figure out how to create multiple layout XML files and load those dynamically.  This would allow me to have each icon in it’s own separate XML file so any changes that needed to be made to them would only affect that icon and not the other icons.

First, I created the separate layout XML files.  I am just going to show two that I did.

widget_flame_with_border_off.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/main"
   android:gravity="center"
   android:background="@drawable/widget_frame_portrait1x1_black"
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_height="74dip"
   android:layout_width="74dip">

   <LinearLayout
      android:id="@+id/btn_led"
      android:layout_width="52dip"
      android:layout_height="52dip"
      android:background="@drawable/appwidget_button_center"
      android:clickable="true"
      android:focusable="true"
      android:gravity="center">

      <ImageView
          android:id="@+id/img_led"
          android:layout_height="40dip"
          android:layout_gravity="center"
          android:layout_width="40dip"
          android:src="@drawable/mototorch_led_off"
          android:scaleType="fitXY" />

   </LinearLayout>
</LinearLayout>

widget_flame_with_border_on.xml

<pre><?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/main"
   android:gravity="center"
   android:background="@drawable/widget_frame_portrait1x1_black"
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_height="74dip"
   android:layout_width="74dip">

   <LinearLayout
      android:id="@+id/btn_led"
      android:layout_width="52dip"
      android:layout_height="52dip"
      android:background="@drawable/appwidget_button_center"
      android:clickable="true"
      android:focusable="true"
      android:gravity="center">

      <ImageView
          android:id="@+id/img_led"
          android:layout_height="40dip"
          android:layout_gravity="center"
          android:layout_width="40dip"
          android:src="@drawable/mototorch_led_on"
          android:scaleType="fitXY" />

   </LinearLayout>
</LinearLayout>

With those two layout XML files created, I can now load them dynamically.

@Override
public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds){
     RemoteViews views = null;

     int layoutID = 0;

     if (ledIsOn){
         layoutID = R.layout.widget_flame_with_border_on;
     }
     else {
         layoutID = R.layout.widget_flame_with_border_off;
     }

     // the layoutID that is passed in the constructor of the
     //   RemoteViews object is the layout that will be loaded
     //   when the widget is updated.
     views = new RemoteViews(context.getPackageName(), layoutID);

     for (int i = 0; i < appWidgetIds.length; i++) {
          appWidgetManager.updateAppWidget(appWidgetIds[i], views);
     }
}

In the constructor for the RemoteViews object, you pass in the layout ID of the layout that you want to use. So simply changing this to a different layout than is currently being used, you can change the layout completely.

Tags: 2.0, Android, MotoTorch LED, widget