Android: Facebook’s Notification Widget

Have you ever checked out the Facebook app? When you click on the Notifications button at the top, the app creates a nice overlaid window that contains a scrolling list view of all your info.
It doesn’t dim out the background, and it also disappears if you click anywhere on the screen that isn’t in the overlaid window itself. The overlay is a great idea to add some polish to a UI.
The other day I began trying to figure out how Facebook does this overlay. A good way to reproduce this type of overlay is to actually use a Transparent Activity. You can define a Transparent Activity in the Android Manifest as follows:
<activity
Android:name=".OverlayActivity"
android:theme="@android:style/Theme.Translucent.NoTitleBar" >
</activity>
This gives you an empty activity. So when this activity is started, it looks as if nothing has happened, and the user can no longer click on the UI elements from the previous activity. Now that we have an activity that lets the background of the last activity be visible, we need to design the overlay itself in XML. In Facebook’s case, this would be a ListView and the rectangle graphic. The layout would also need to be positioned correctly. Notice in the Facebook image above how the image is positioned in such a way that the rectangle pointer is directly below the button that activated it.
The beauty of using this implementation is that the overlay’s functionality is completely segregated because it is housed in a new activity. In the OverlayActivity, we simply generate our list and set up the click handlers for the list. There are just a few more tricks left to get all of the functionality that Facebook has added.
To make the overlay disappear when any area outside of the overlay is clicked, some work needs to be done in the Overlay’s layout. This involves setting up a click handler to cover all of the area that the Overlay’s visible widgets aren’t using. By setting the click handler in the root layout close the activity on click, we have our desired functionality. This works well in Android because any click handlers set up on other views (in Facebook’s case, the ListView) would override the root’s click handler.
To do one step above Facebook’s implementation, animation could be added to provide transitions for when the overlay is shown and removed. For example, we could easily add fade in and fade out animations that would make the overlay look even sharper. Since we have an activity, it’s very easy to add any kind of animation to the overlay. For the animation fun, check out the Alpha animation in Android.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

One Response to "Android: Facebook’s Notification Widget"

  1. Aadam Gibson says:

    Overlay Activity code is most useful to provide extraordinary look. By using this code in Facebook Application, Facebook page become more attractive and effective look.
     

Leave a Reply


eight × = 56



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close