Android Animated Notification Bar

I have been developing Android apps for some time now and was never happy with the in-built notifications.

Following are some notification mechanisms I have used in past:

• Toast messages
• A notification strip with distinct background color and some notification text on it

With apps adding more and more animation with every passing day, both these mechanisms lag behind terribly.

I wanted something which is dynamic, fun to look at, fun to use and something which enhances app's branding value.

In following details, you will see how I was able to achieve notification bar shown in picture below:

I started with a MapActivity and +Jake Wharton's SherlockActionBar for my app. Added a small rounded rectangle as described in following drawable code and added it to my main activity:

<item>
    <shape android:shape="rectangle">
        <corners android:bottomRightRadius="25dp" android:topRightRadius="25dp" />
        <solid android:color="#FFFFFF"/>
    </shape>
</item>

Here's the result:

To add branding to this notification bar, I added gradient to this notification bar with color same as my app's icon.

Code is changed to:

<item>
    <shape android:shape="rectangle">
        <corners android:bottomRightRadius="25dp" android:topRightRadius="25dp" />
        <gradient 
             android:startColor="@color/notificationStartColor" 
             android:endColor="@color/notificationEndColor"
             android:angle="270"
        />
    </shape>
</item>

This is how it looks by just adding colors to the gradient:

While this looks much better now, I was still not satisfied with how two dimensional it was looking. I wanted to make it look more three dimensional and then wanted to animate it to give the effect as if a notification board is displayed to the user.

To achieve this desired 3D effect, I added a layer below existing layer with some offset. This new layer was drawn with the universally accepted shadow color (#40000000). Resultant code is:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle"> 
            <solid android:color="#40000000"/>
            <corners android:bottomRightRadius="25dp" android:topRightRadius="25dp" />
            <padding android:right="2dp" android:bottom="2dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:bottomRightRadius="25dp" android:topRightRadius="25dp" />
                <gradient 
                     android:startColor="@color/notificationStartColor" 
                     android:endColor="@color/notificationEndColor"
                     android:angle="270"
                />
        </shape>
    </item>
</layer-list>

And resultant final image is:

To be able to add text to this notification bar dynamically, I used above layer-list as a background of a TextView and animated the TextView every time I showed it to the user.

You can see this notification bar in action in my two apps so far: Distance Calculator Free and it is coming up shortly in Distance Calculator as well.

Feedback on this blog is welcome and feel free to contact me through Google+ in case of any questions. Thanks for reading!