Android dialog box with an “iconized” menu

Some time ago, I was fascinated by the idea of ​​developing applications for the Android platform. In order not to study the platform on simple hello-world programs, I decided to do something that would allow me to get comfortable with the UI part of the framework, work with the database, network and social services.
The idea was thought up before stupefaction is simple and I would even say stupid. And when I started to do something, then I suddenly wanted to make a beautiful dialog box with a choice of a menu item with icons. Such a dialogue is present in the standard Android, for example, a long tap on the desktop opens a dialog for selecting the content to be added (widget, wallpaper, etc.). So, welcome to the cat ...


As mentioned above, I had the task of making a dialog box like this:

After googling for some time and reading the official docks on the platform, I still could not find how to implement such a dialogue. After some time digging, I found a result that would most likely be obvious to experienced Android developers.
The answer was simple and lay on the surface. Its essence is that for a dialogue builder you just need to substitute the appropriate data provider (naturally, the provider needs to be written by yourself).
So, now there will be some code with comments about what is happening.

List (provider) of possible account types

1. public final class AccountTypesProvider {
2.   public static List accountTypes = Collections.unmodifiableList(Arrays.asList(
3.       new AccountType(AccountType.TWITTER_ACCOUNT, "Twitter", R.drawable.twitter_icon_big),
4.       new AccountType(AccountType.FACEBOOK_ACCOUNT, "Facebook", R.drawable.facebook_icon_big),
5.       new AccountType(AccountType.BUZZ_ACCOUNT, "Google Buzz", R.drawable.buzz_icon_big),
6.       new AccountType(AccountType.LINKEDIN_ACCOUNT, "LinkedIn", R.drawable.linkedin_icon_big),
7.       new AccountType(AccountType.VKONTAKTE_ACOUNT, "ВКонтакте", R.drawable.vkontakte_icon_big)
8.   ));
9. }

* This source code was highlighted with Source Code Highlighter.

This is a simple wrapper around the list of possible account types. The type of account here is a simple POJO class, which consists of an identifier (constant), a service name and an icon resource identifier for this type of service.

ListAdapter for displaying a list of account types in a given layout

1. public final class AccountsTypesListAdapter extends ArrayAdapter {
2.   private Activity context;
3.   private List accountTypes;
4.   
5.   public AccountsTypesListAdapter(Activity context, List accountTypes) {
6.     super(context, R.layout.select_account_item, accountTypes);
7.     
8.     this.context = context;
9.     this.accountTypes = accountTypes;
10.   }
11.   
12.   @Override
13.   public View getView(int position, View convertView, ViewGroup parent) {
14.     LayoutInflater inflater = context.getLayoutInflater();
15.     View row = inflater.inflate(R.layout.select_account_item, parent, false);
16.     
17.     TextView label = (TextView) row.findViewById(R.id.text_item);
18.     label.setText(accountTypes.get(position).title);
19.     
20.     ImageView icon = (ImageView) row.findViewById(R.id.icon_item);
21.     icon.setImageResource(accountTypes.get(position).bigIconId);
22.     
23.     return row;
24.   }
25. }

* This source code was highlighted with Source Code Highlighter.

First you need to pass the list of types with which the list adapter will work to the designer. The binding of a specific item to the layout occurs in the redefined getView () method. It loads the layout from the specified resource, extracts the widgets and writes data about a specific list item in them. By the way, the index of this element is automatically available through the position parameter.

This adapter sheet works with such a layout

3.   android:orientation="horizontal" android:layout_width="fill_parent"
4.   android:layout_height="fill_parent" android:padding="10px">
5.   
6.   
7.     android:layout_height="fill_parent"/>
8.    
9.       android:layout_height="fill_parent" android:paddingLeft="10px"
10.       android:paddingTop="5px" android:textStyle="bold"
11.       android:textColor="#000000"/>

* This source code was highlighted with Source Code Highlighter.

All that remains now is to bind the developed adapter sheet to a specific dialog box

1. public static void showSelectAccountTypeDialog(Activity context, String title, OnClickListener dialogListener) {
2.     AlertDialog.Builder builder = new AlertDialog.Builder(context);
3.     builder.setTitle(title);
4.     builder.setAdapter(new AccountsTypesListAdapter(context, AccountTypesProvider.accountTypes), dialogListener);
5.     builder.create().show();
6.   }

* This source code was highlighted with Source Code Highlighter.

and call in the right place activity dialogue

1. private void displaySelectAccountTypeDialog() {
2.     ApplicationDialogs.showSelectAccountTypeDialog(this, "Select network", new OnClickListener() {
3.       @Override
4.       public void onClick(DialogInterface dialogInterface, int selectedItemId) {
5.         setupAccount(selectedItemId);
6.       }
7.     });
8.   }

* This source code was highlighted with Source Code Highlighter.

The dialog after its completion will return the index of the selected item with the selectedItemId parameter to the listener that is specified when the dialog is called. In this simple case, this index will coincide with the account type ID (item in the list), therefore, no additional transformations or extractions are required. For my task, this index is more than enough.

As a result, I got such a nice dialogue.


Maybe I just described common truths in this topic, maybe not. To decide, as they say, to you, Habrausers ...

Thank you and good luck to everyone in the exciting development process for the Android platform;)