UI help for Notification on icon

Question

I want to design the following UI. Can anybody give me an example or suggest some source code for implementation?

Answer 1

Here is Project on Git Hub regarding showing badges on different items, but inside your application (i.e TextView, TabHost, ImageView etc)

About showing the badge on application icon, this is not possible, because this is not android way of showing notifications. The android framework supports handling notifications using Status bar Notifications

Answer 2

If you want to set up the notification icon on the top-left corner it is as simple as the next piece of code:

Bitmap1 must be bigger than bitmap2, and in your case I would advise it to be a PNG image with transparent background to allow the notification bubble be outside the rest of the image.

        private Bitmap overlay(Bitmap bitmap1, Bitmap bitmap2) {
            Bitmap bmOverlay = Bitmap.createBitmap(bitmap1.getWidth(), bitmap1.getHeight(), bitmap1.getConfig());
            Canvas canvas = new Canvas(bmOverlay);
            canvas.drawBitmap(bitmap1, new Matrix(), null);
            canvas.drawBitmap(bitmap2, new Matrix(), null);
            return bmOverlay;
        }

Otherwise if you want it on the right-top corner you should try any of the others specifications for Canvas.drawBitmap.

For example:

canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint);

Try doing something like:

private Bitmap overlay(Bitmap bitmap1, Bitmap bitmap2) {
            Bitmap bmOverlay = Bitmap.createBitmap(bitmap1.getWidth(), bitmap1.getHeight(), bitmap1.getConfig());
            Canvas canvas = new Canvas(bmOverlay);
            canvas.drawBitmap(bitmap1, new Matrix(), null);
            canvas.drawBitmap(bitmap2, bitmap1.getWidth()-bitmap2.getWidth(), 
                              0,null);
            return bmOverlay;
        }

If all you wanted was how to do it on XML, then you should create a RelativeLayout and then on it add both images and align the notification bubble to the right. And that should do the trick. You would've still have to have a PNG image with the transparent background.

I hope that would be enough for what you want to do.

Answer 3

You can use a RelativeLayout with two children, one for the icon and one for the badge. The icon needs extra padding so that the badge is slightly outside of it. The badge is positioned aligned with parentTop and parentRight.

Answer 4

Here is your source code for this app widget icon badge count display.

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dip"
android:focusable="true" >

<ImageView
    android:id="@+id/icon"
    android:layout_width="60dip"
    android:layout_height="60dip"
    android:layout_marginTop="8dp"
    android:background="@drawable/logo"
    android:contentDescription="image"
    android:scaleType="center" />

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/icon"
    android:gravity="center"
    android:paddingLeft="3dp"
    android:paddingTop="10dp"
    android:shadowColor="#000000"
    android:shadowDx="1"
    android:shadowDy="1"
    android:shadowRadius="1.5"
    android:text="@string/app_name"
    android:textColor="#FFF" />

<TextView
    android:id="@+id/txt_count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="-10dip"
    android:layout_toRightOf="@+id/icon"
    android:background="@drawable/badge_count2"
    android:contentDescription="badge"
    android:gravity="center"
    android:text="1"
    android:textColor="@color/White"
    android:textStyle="bold" />

</RelativeLayout>

and also you need this badge_count2.xml drawable file.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<solid android:color="@color/red" >
</solid>

<stroke
    android:width="2dp"
    android:color="#FFFFFF" >
</stroke>

<padding
    android:bottom="2dp"
    android:left="7dp"
    android:right="7dp"
    android:top="3dp" />

<corners android:radius="10dp" >
</corners>