Android: Is it possible to update a ImageView/ImageButton with a number to show the number of new messages?

I was interested in this SO as I didnt know how to do it neither. So I started looking into it and here is how I did it.

  • I am not a specialist in UI so there may be some stuff useless/wrong in the following XML.
  • From what I said above, I didnt manage to have the count on the bottom right corner of the icon. 🙂
  • For test, I use the standard icon.png from the sdk

res/drawable/shapecount.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <corners android:radius="20dp"  />    
  <solid android:color="#ff2233" />
</shape>

res/layout/my_widget_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

<RelativeLayout
    android:orientation="vertical"
    android:background="@null"
    android:id="@+id/rlayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <ImageView 
            android:id="@+id/icon"
            android:src="https://stackoverflow.com/questions/5569695/@drawable/icon" 
            android:layout_margin="0dp"
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content"/>

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="50" android:textSize="9dp" android:textStyle="bold"  
        android:background="@drawable/shapecount"
        android:textColor="#FFFFFF"
        android:paddingLeft="3dp" android:paddingRight="3dp"
            android:layout_margin="0dp"
        android:layout_alignBottom="@+id/rlayout"
        android:id="@+id/txtCount" />

</RelativeLayout>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:text="My App Name" android:textSize="9dp" android:textStyle="bold"  
    android:background="@drawable/shapecount"
    android:textColor="#FFFFFF"
    android:paddingLeft="3dp" android:paddingRight="3dp"
        android:layout_margin="0dp"
    android:layout_alignBottom="@+id/rlayout"
    android:id="@+id/txtAppName" />
 </LinearLayout>

An home widget is actually a normal view that you can build in an XML file like you would for an activity. There is some rules to follow though. See this link for guideline

In this link which shows you how to build an AppWidget, you can see the following code:

// Get the layout for the App Widget and attach an on-click listener to the button
  RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.appwidget_provider_layout);

where R.layout.appwidget_provider_layout is the layout of your home widget, which will be my_widget_layout.xml

From that views, you can set the value you want for any count text view:

int count = 50;//Or whatever value you set to it.
views.setTextViewText(R.id.txtCount,Integer.toString(count));

and then you just have to update the widget itself:

appWidgetManager.updateAppWidget(appWidgetId, views);

NOTE:

The updatePeriodMillis doesnt allow the widget to request an update more than once every 30 min so I use a combination of BroadcastReceiver and Service

EDIT:

See below a activity test if the count you want should be within an Activity instead of a AppWidget. It uses the same XMLs as above:

public class TestActivity extends Activity {
    /** Called when the activity is first created. */

    final Random gen = new Random();


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        final TextView t = (TextView) findViewById(R.id.txtCount);

        Timer timer = new Timer();
        timer.schedule(new TimerTask() {

            @Override
            public void run() { 
                runOnUiThread(new Runnable() {

                    @Override
                    public void run() {
                        int a = gen.nextInt(20);
                        t.setText(Integer.toString(a));                     
                    }
                });
                }
            }
        ,new Date(), 3000L);
    }
}

Leave a Comment