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

In iOS we have a feature to update the app icon with the new pending messages for the user by showing a small number on the right-top corner of the icon and similarly I would like to know if we have method to update a ImageView/ImageButton in android(Here I am not looking to update the icon on the home screen but inside my app).

For example, the pic shows the red background icon with the number of messages pending to be read in red and if there are no messages it shows with a gray background.

  • Is it possible to open my app through inbox sms?
  • How to have clicking the phone's search button do nothing?
  • Android Material circular button
  • Difference between PKCS1-padding/RSA encryption ios objc and java
  • How to run android application in background
  • Android: Cannot style spinner divider
  • enter image description here

    Thanks,

    Related posts:

    Android: Child elements sharing pressed state with their parent even when duplicateParentState speci...
    How is TabItem used when placed in the layout XML?
    Use pre-populated databases with Realm
    setOnItemClickListener VS setOnItemSelectedListener in ListView.
    Android :EditText loses content on scroll in ListView?
    Product Variants: Multiple Activities
  • My checkbox does not appear in my CheckedTextView
  • obtainStyledAttributes annotated with @StyleableRes. Suppress warnings
  • SINGLE_TOP | CLEAR_TOP seem to work 95% of the time. Why the 5%?
  • Android ExpandableListView using animation
  • Open App from URL works on Firefox for Android but not on Google Chrome
  • Is context.getSystemService() an expensive call?
  • 2 Solutions collect form web for “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="@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);
        }
    }
    

    As you’re looking to do this inside your app, not on the home screen, I’d suggest you just create an ImageView subclass, and override onDraw() – do any background painting, call super.onDraw(), then do foreground painting.

    Alternatively, you could use Bitmap.copy etc. to build a composite image from the base icon, and a smaller bitmap with the message count.

    Hope this helps,

    Phil Lello

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.