For an introduction to Android UI, visit this page.
For tutorials covering the mostly used UI components, visit this page.
In this tutorial we will develop an application that retrieves a user's friends from Facebook and displays their picture, status, profile URL and website address.
This tutorial has three parts:
First, we have to create a new Android project. For instructions, consult the first tutorial, or visit this page. Name your project MyFacebookApp. The application should have the same name. Name the main Activity FacebookActivity.
To edit the GUI of the application open the main.xml document. It can be found in the MyFacebookApp/res/layout folder. Our application will have:
Thus, the main.xml file should look like the following:
The ListView is called FullDetailsGallery. This is the UI element that will display details about the user's Facebook friends (picture, status, profile URL and website address). The android:layout_width="fill_parent" and android:layout_height="fill_parent" set the width and the height, respectively, of this UI element. The "fill_parent" values dictates that this UI element is to take up all the available drawing space. The android:layout_weight="8" instructs Android how to distribute the available vertical space after all the UI elements have been drawn. You can find a tutorial about ListView here.
The Gallery is called SmallFriendGallery. You can find a tutorial about Gallery here.
We display friends in the FullDetailsGallery. This is a ListView and requires a ListAdapter to back-up its data. We extend the class BaseAdapter that implements the ListAdapter interface. The SmallFriendGallery only displays friends pictures. To do this, it requires a SpinnerAdapter to back-up its data. The BaseAdapter also implements the required interface. Both of these interfaces use the public abstract View getView (int position, View convertView, ViewGroup parent) method to retrieve the View to be displayed.
The new class is called MyFriendsAdapter. It also implements another interface, ImageViewResolver which will be described later.
The code for MyFriendsAdapter is the following:
This class provides Views to both the ListView and the Gallery, depending on who is asking for them.
Interesting is the use of the LayoutInflater class. This class allows us to turn an xml specification of a GUI into a View which we can then display.
As the code in function addFriend shows, the layout for a Friend is defined by the R.layout.friend resource. This resource corresponds to a file named "friend.xml" that must be in the MyFacebookApp/res/layout/ folder. The contents of this file are:
We will use the Gallery type of View to interact with our application. When the user clicks on the picture of a Friend, we will change the selection of the ListView to focus on the person just clicked. To do this, we need to call the setOnItemSelectedListener method on the Gallery object and provide an OnItemSelectedListener object. This object's onItemSelected method is called when the user clicks on a picture.
The code that does this is the following:
In this code smallGallery is a Gallery type of object.
Follow these steps to use FBRocket in your project:
We will develop a new Activity class whose purpose is to retrieve a user's Friends.
Before we can access a user's friends' list, we need to create an object of type FBRocket. The constructor accepts as parameters an Activity, the Facebook application's name, and the secret API key.
After we have an FBRocket object we call its login method that takes as parameters a LoginListener object that will be called after the user has logged in to Facebook.
onLoginSuccess(Facebook facebook) is called if the user has correctly logged in to Facebook. This is done by the following code.
This Activity will be called by our main Activity, FacebookActivity. To be able to pass the list of Friends back to the invoking Activity we have to rely on a trick. We extend the Application class to have methods to allow us to set the list of Friends, and to retrieve the list of Friends.
We also need to change the AndroidManifest.xml document like this:
Now, we can store the retrieved Friends by calling ((MyApplication) getApplication()).putFriends(result);
The main Activity, FacebookActivity, will start the new Activity, MyFacebookApp, and will wait until the latter finishes. This is done by the following piece of code:
The Android UI is single-threaded. That means that only one thread is able to modify the UI. When dealing with Android UI, it is imperative to perform long running operations in th eUI thread. This will block the application's user interface.
Android provides different ways of performing long operations, like downloading file over the Internet. You can find a list here.
In this tutorial, we will use two mechanisms to not block the UI:
Activity.runOnUIThread is used in the implementation of MyFacebookApp when loggin into Facebook.
To download friend pictures, we use the FriendImageDownloader class. It extends the AsyncTask class. To start the download, MyFriendsAdapter executes the following code:
To keep the design as decoupled as possible, after the image has been downloaded, FriendImageDownloader calls the imageForFriend method on an object of type ImageViewResolver that is implemented by our MyFriendsAdapter class. The purpose of the ImageViewResolver interface is to notify it that the picture for a friend has been downloaded. The implementation of the imageForFriend in the MyFriendsAdapter class is the following: