Tuesday, May 8, 2012

Custom Notification View


I would like to create a notification icon view that looks similar to the Google+ app's notification. The difference will be that I need to be able to change the color at runtime where as the Google+ icons gray or red so I'm assuming they are using a StateListDrawable.



What is the best approach for this? I'd prefer to have the rounded clipped corners and have the option to have a drawable inside. This custom view will be placed in the Action Bar as well. I still need the view to respond to android:background state list drawables so I can have the click and selected accordance working.



This custom view will be placed in the action bar as well.



Google+ app with the notification icon in the upper right that's grayed out and has a 0 in the middle.


Source: Tips4all

1 comment:

  1. I solved this by doing the following.

    Created this to make the rounded corner shape with a solid color. This also adds a translucent black to give it a pressed look against a blackground.
    res/drawable/shape_notification.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:color="#33000000" android:width="2dp"/>
    <corners android:radius="4dp" />
    <solid android:color="#99333333"/>
    </shape>


    The layer drawable will be used as the actual drawable on the action bar item. It has the background (written above) overlayed with the wrench icon.
    res/drawable/layer_customizer.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/shape_notification" />
    <item android:drawable="@drawable/ic_menu_preferences" />
    </layer-list>


    Java code to change the color. The target view is the object that is assigned the layer_customizer drawable. The color passed in will change the shape_notification.xml's solid tag color.

    public static void setCustomizerDrawableColor(final View target, final int color) {
    final Drawable d = target.getDrawable();
    LayerDrawable layer = (LayerDrawable)d;
    GradientDrawable gradient = (GradientDrawable)layer.getDrawable(0);
    gradient.setColor(color);
    gradient.invalidateSelf();
    layer.invalidateSelf();
    target.invalidate();
    }

    ReplyDelete