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:
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:
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
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>
<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>
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!