[eclipsed4utoo]

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.

[andolasoft]

The Android framework gives you the flexibility to use either or both of these methods for declaring and managing your application's UI. For example, you could declare your application's default layouts in XML, including the screen elements that will appear in them and their properties. You could then add code in your application that would modify the state of the screen objects, including those declared in XML, at run time.

[EndLessMind]

Why don't you have one layout, and then change the image-source for the ImageView?
What way, you only need one layout, but could possible load 100 different icon into your application, or even make it possible for the user to add there own icon to a folder and then let them chose icon from that folder.

I'm just brainstorming right now, but there is always more the one way of doing things

[eclipsed4utoo]

EndLessMind, on 05 April 2012 - 10:52 PM, said:

Why don't you have one layout, and then change the image-source for the ImageView?
What way, you only need one layout, but could possible load 100 different icon into your application, or even make it possible for the user to add there own icon to a folder and then let them chose icon from that folder.

I'm just brainstorming right now, but there is always more the one way of doing things

I never said this was the only way of doing it. This is just how I determined was easiest for me. If you have another way, feel free to create your own tutorial.

[EndLessMind]

i know you didn't
I'm sorry if it sounded like that, but i only wanted to name some other way of doing it