{"id":338,"date":"2010-12-06T20:57:00","date_gmt":"2010-12-06T20:57:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/android-full-app-part-7-using-options-menus-and-customized-dialogs-for-user-interaction.html"},"modified":"2012-10-21T19:24:30","modified_gmt":"2012-10-21T19:24:30","slug":"android-full-app-part-7-options-menus","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2010\/12\/android-full-app-part-7-options-menus.html","title":{"rendered":"Android Full App, Part 7: Using options menus and customized dialogs for user interaction"},"content":{"rendered":"

This is the seventh part of the \u201cAndroid Full Application Tutorial\u201d<\/a> series. The complete application aims to provide an easy way of performing movies\/actors searching over the internet. In the first part of the series (\u201cMain Activity UI\u201d<\/a>), we created the Eclipse project and set up a basic interface for the main activity of the application. In the second part (\u201cUsing the HTTP API\u201d<\/a>), we used the Apache HTTP client library in order to consume an external HTTP API and integrate the API’s searching capabilities into our application. In the third part (\u201cParsing the XML response\u201d<\/a>) we saw how to parse the XML response using Android’s built-in XML parsing capabilities. In the fourth part (\u201cPerforming the API request asynchronously from the main activity\u201d<\/a>), we tied together the HTTP retriever and XML parser services in order to perform the API search request from our application’s main activity. The request was executed asynchronously in a background thread in order to avoid blocking the main UI thread. In the fifth part (\u201cLaunching new activities with intents\u201d<\/a>), we saw how to launch a new Activity<\/a> and how to transfer data from one Activity<\/a> to another. In the sixth part, (\u201cCustomized list view for data presentation\u201d<\/a>) we created a custom list view in order to provide a better data visual presentation. In this part, we are going to create options menus and custom dialogs in order to facilitate better user interaction.<\/p>\n

When developing applications for mobile devices which are rather limited in terms of resources (either CPU, memory or screen size), we should strive to make the most out of the available screen real-estate. In Android, one way of taking full advantage of the screen dimensions is using an options menu when the available options have to be presented to the user. As you can see in the following image, under normal operations, the options are not visible to the user, and only after he prompts for them shall they appear. When that happens, the menu is placed to the foreground, meaning that it \u201chides\u201d any other UI element that exists underneath it.<\/p>\n

\"\"<\/a><\/p>\n

One particular aspect of creating and using Android menus is that they provide a familiar interface for the user to access application functions and settings. In other words, don’t re-invent the wheel, just use the built-in functionality when you wish to create a menu. The official Android documentation page includes a comprehensive guide to Creating Menus<\/a>. In this tutorial, we will see the fastest and most straightforward way to create menus and populate them with the appropriate options.<\/p>\n

The main class around which the options menus are built is, not surprisingly, named Menu<\/a>. It is actually an interface for managing the items in a menu. By default, every Activity<\/a> supports an options menu of actions or options. More specifically, the Android Activity<\/a> class provides a method named onCreateOptionsMenu, which can be used to initialize the contents of the activity’s standard options menu. When overriding that method, we typically use the add<\/a> method in order to add new items to the menu. Notice that the add method, and its<\/a> variations<\/a>, return a MenuItem<\/a> object, which is an interface for direct access to a previously created menu item. A MenuItem<\/a> can contain both a title and an icon.<\/p>\n

The itemId argument of the add method is the one that will allow us to figure out what options has been selected. In general, to handle events such as the user selecting a menu option, we need to override the onOptionsItemSelected<\/a> method of our Activity<\/a>. That method contains a reference to the MenuItem<\/a> that was selected and we can use the getItemId<\/a> method in order to find its identifier. Thus, we are now in position to know what the user has selected.<\/p>\n

In our application, we will use an options menu in order to allow the user to either visit the IMDB page of a specific movie, or to view its poster image in a new window. We first define the Ids of the available items and then create the menu by adding menu items to the menu. Note that we use both a title and an icon for our menu items. Finally, when an option is selected, we check the menu item ID in order to find out what action has to be performed. Here are some code snippets for all the above:<\/p>\n

private static final int ITEM_VISIT_IMDB = 0;\r\nprivate static final int ITEM_VIEW_FULL_IMAGE = 1;\r\n...\r\n@Override\r\npublic boolean onCreateOptionsMenu(Menu menu) {\r\n    menu.add(Menu.NONE, ITEM_VISIT_IMDB, 0, \r\n        getString(R.string.visit_imdb)).setIcon(android.R.drawable.ic_menu_set_as);\r\n    menu.add(Menu.NONE, ITEM_VIEW_FULL_IMAGE, 0, \r\n        getString(R.string.view_full_image)).setIcon(android.R.drawable.ic_menu_zoom);\r\n    return super.onCreateOptionsMenu(menu);\r\n}\r\n...\r\n@Override\r\npublic boolean onOptionsItemSelected(MenuItem item) {\r\n    switch (item.getItemId()) {\r\n        case ITEM_VISIT_IMDB:\r\n            visitImdbMoviePage();\r\n            return true;\r\n        case ITEM_VIEW_FULL_IMAGE:\r\n            viewFullImagePoster();\r\n            return true;\r\n    }\r\n    return false;\r\n}\r\n<\/pre>\n
Here is an image of what our options menu is going to look like:<\/p>\n
\"\"<\/a>
 
<\/div> <\/div><\/p>\n
The second topic of this tutorial is the creation and usage of dialogs which help interacting with the application’s users. The most straightforward way to do that is to directly use the Dialog<\/a> class. The Dialog constructor<\/a> requires a Context<\/a> object as argument, and that is going to be the Activity<\/a> within which the dialog is created. Just like as with an Activity<\/a>, dialog objects provide a setContentView<\/a> method, which accepts a layout resource ID and sets the screen content from that layout resource. Similarly, the findViewById method allows us to find a reference of the view that was identified by the id attribute from the XML layout. The internal views can then be manipulated as usual. In two words, it is just like building a View<\/a> for an Activity<\/a>.<\/p>\n
After we are done with creating the dialog, a call to the show method will start the dialog and display it on screen. In that case, the window is placed in the application layer and opaque. After we are done with the specific dialog, we have to call the dismiss<\/a> method in order to remove it from the screen. Note that this method can be invoked safely from any thread. A final note on Dialog<\/a>s is that you can either define a title for it (via the setTitle<\/a> method) or indicate that no title is needed for it (via the requestWindowFeature<\/a> method and the FEATURE_NO_TITLE<\/a> feature).<\/p>\n
In our application we are going to create two different kind of dialogs: one for showing a movie’s poster image and one for presenting the movie’s overview. Let’s see the code snippets for those.<\/p>\n
For the poster image dialog we have:<\/p>\n
final Dialog dialog = new Dialog(this);\r\ndialog.requestWindowFeature(Window.FEATURE_NO_TITLE);\r\ndialog.setContentView(R.layout.full_image_layout);\r\n...\r\nfinal Button closeDialogButton = (Button) dialog.findViewById(R.id.close_full_image_dialog_button);\r\nimageView = (ImageView) dialog.findViewById(R.id.image_view);                                \r\ncloseDialogButton.setOnClickListener(new OnClickListener() {            \r\n    @Override\r\n    public void onClick(View v) {\r\n        dialog.dismiss();\r\n    }\r\n});\r\nfinal ImageDownloaderTask task = new ImageDownloaderTask();\r\ntask.execute(imageUrl);\r\n        \r\ndialog.show();\r\n<\/pre>\n
Note that the image is retrieved asynchronously with the ImageDownloaderTask (extends the AsyncTask<\/a> class) and the ImageView<\/a> is populated in the onPostExecute<\/a> method. For that dialog, the layout XML is named \u201cfull_image_layout.xml\u201d and it is the following:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n\r\n<LinearLayout \r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:orientation=\"vertical\" \r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\"\r\n>\r\n\r\n    <ImageView \r\n        android:id=\"@+id\/image_view\" \r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\" \r\n        android:layout_gravity=\"center\"\r\n        android:layout_marginLeft=\"5dip\"\r\n        android:layout_marginRight=\"5dip\"\r\n        android:layout_marginTop=\"5dip\"\r\n        android:layout_marginBottom=\"5dip\"\r\n       \/>\r\n       \r\n       <Button \r\n        android:id=\"@+id\/close_full_image_dialog_button\" \r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\" \r\n        android:text=\"@string\/close\"\r\n        android:layout_weight=\"0.5\"\r\n        android:layout_marginLeft=\"10dip\"\r\n        android:layout_marginRight=\"10dip\"\r\n        android:layout_marginTop=\"5dip\"\r\n        android:layout_marginBottom=\"5dip\"\r\n        android:layout_gravity=\"center\" \r\n    \/>        \r\n\r\n<\/LinearLayout>\r\n<\/pre>\n
When hitting the appropriate menu button, here is what you are going to get for the poster image dialog:<\/p>\n
\"\"<\/a><\/p>\n
For the movie overview dialog, we have the following:<\/p>\n
final Dialog dialog = new Dialog(this);\r\ndialog.setContentView(R.layout.movie_overview_dialog);\r\n\r\ndialog.setTitle(title);\r\n\r\nfinal TextView overviewTextView = (TextView) dialog.findViewById(R.id.movie_overview_text_view);\r\noverviewTextView.setText(overview);\r\n        \r\nfinal Button closeButton = (Button) dialog.findViewById(R.id.movie_overview_close_button);\r\n        \r\ncloseButton.setOnClickListener(new OnClickListener() {            \r\n    @Override\r\n    public void onClick(View v) {\r\n        dialog.dismiss();\r\n    }\r\n});\r\n        \r\ndialog.show();\r\n<\/pre>\n
Respectively, the XML layout file is named \u201cmovie_overview_dialog.xml\u201d and it is the following:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n   android:orientation=\"vertical\"\r\n   android:layout_width=\"fill_parent\"\r\n   android:layout_height=\"fill_parent\"\r\n   >\r\n   \r\n   <ScrollView\r\n           android:layout_width=\"fill_parent\"\r\n           android:layout_height=\"fill_parent\">\r\n           \r\n           <LinearLayout\r\n               android:orientation=\"vertical\"\r\n            android:layout_width=\"fill_parent\"\r\n            android:layout_height=\"fill_parent\"\r\n            android:paddingLeft=\"5px\"\r\n            android:paddingRight=\"5px\"\r\n            android:paddingBottom=\"10px\"\r\n           >\r\n   \r\n            <TextView\r\n                android:id=\"@+id\/movie_overview_text_view\"\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_centerHorizontal=\"true\"\r\n                android:layout_marginBottom=\"5dip\"\r\n                android:layout_marginLeft=\"5dip\" \r\n                android:layout_marginRight=\"5dip\"\r\n             \/>\r\n                \r\n            <Button \r\n                android:id=\"@+id\/movie_overview_close_button\"\r\n                android:text=\"@string\/close\"\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n            \/>\r\n        \r\n        <\/LinearLayout>\r\n    \r\n    <\/ScrollView>\r\n    \r\n<\/LinearLayout>\r\n<\/pre>\n
An example of the movie overview dialog is the following (note that this dialog appears when the user clicks on one of the movies of the list):<\/p>\n
\"\"<\/a><\/p>\n
All in all, the \u201cMoviesListActivity\u201d class is now as follows:<\/p>\n
package com.javacodegeeks.android.apps.moviesearchapp;\r\n\r\nimport java.io.InputStream;\r\nimport java.util.ArrayList;\r\n\r\nimport android.app.Dialog;\r\nimport android.app.ListActivity;\r\nimport android.app.ProgressDialog;\r\nimport android.content.DialogInterface;\r\nimport android.content.Intent;\r\nimport android.content.DialogInterface.OnCancelListener;\r\nimport android.graphics.Bitmap;\r\nimport android.graphics.BitmapFactory;\r\nimport android.net.Uri;\r\nimport android.os.AsyncTask;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.view.Window;\r\nimport android.view.View.OnClickListener;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\nimport android.widget.ListView;\r\nimport android.widget.TextView;\r\nimport android.widget.Toast;\r\n\r\nimport com.javacodegeeks.android.apps.moviesearchapp.io.FlushedInputStream;\r\nimport com.javacodegeeks.android.apps.moviesearchapp.model.Movie;\r\nimport com.javacodegeeks.android.apps.moviesearchapp.services.HttpRetriever;\r\nimport com.javacodegeeks.android.apps.moviesearchapp.ui.MoviesAdapter;\r\nimport com.javacodegeeks.android.apps.moviesearchapp.util.Utils;\r\n\r\npublic class MoviesListActivity extends ListActivity {\r\n    \r\n    private static final String IMDB_BASE_URL = \"http:\/\/m.imdb.com\/title\/\";\r\n    \r\n    private static final int ITEM_VISIT_IMDB = 0;\r\n    private static final int ITEM_VIEW_FULL_IMAGE = 1;\r\n    \r\n    private ArrayList<Movie> moviesList = new ArrayList<Movie>();\r\n    private MoviesAdapter moviesAdapter;\r\n    \r\n    private HttpRetriever httpRetriever = new HttpRetriever();\r\n    \r\n    private ProgressDialog progressDialog;\r\n    private ImageView imageView;\r\n    \r\n    @SuppressWarnings(\"unchecked\")\r\n    @Override\r\n    public void onCreate(Bundle savedInstanceState) {\r\n        \r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.movies_layout);\r\n\r\n        moviesAdapter = new MoviesAdapter(this, R.layout.movie_data_row, moviesList);\r\n        moviesList = (ArrayList<Movie>) getIntent().getSerializableExtra(\"movies\");\r\n        \r\n        setListAdapter(moviesAdapter);\r\n        \r\n        if (moviesList!=null && !moviesList.isEmpty()) {\r\n            \r\n            moviesAdapter.notifyDataSetChanged();\r\n            moviesAdapter.clear();\r\n            for (int i = 0; i < moviesList.size(); i++) {\r\n                moviesAdapter.add(moviesList.get(i));\r\n            }\r\n        }\r\n        \r\n        moviesAdapter.notifyDataSetChanged();\r\n        \r\n    }\r\n    \r\n    @Override\r\n    public boolean onCreateOptionsMenu(Menu menu) {\r\n        menu.add(Menu.NONE, ITEM_VISIT_IMDB, 0, \r\n                getString(R.string.visit_imdb)).setIcon(android.R.drawable.ic_menu_set_as);\r\n        menu.add(Menu.NONE, ITEM_VIEW_FULL_IMAGE, 0, \r\n                getString(R.string.view_full_image)).setIcon(android.R.drawable.ic_menu_zoom);\r\n        return super.onCreateOptionsMenu(menu);\r\n    }\r\n    \r\n    @Override\r\n    public boolean onOptionsItemSelected(MenuItem item) {\r\n        switch (item.getItemId()) {\r\n            case ITEM_VISIT_IMDB:\r\n                visitImdbMoviePage();\r\n                return true;\r\n            case ITEM_VIEW_FULL_IMAGE:\r\n                viewFullImagePoster();\r\n                return true;\r\n        }\r\n        return false;\r\n    }\r\n    \r\n    @Override\r\n    protected void onListItemClick(ListView l, View v, int position, long id) {        \r\n        super.onListItemClick(l, v, position, id);\r\n        final Movie movie = moviesAdapter.getItem((int)position);\r\n        showMovieOverviewDialog(movie.name, movie.overview);        \r\n    }\r\n    \r\n    private void viewFullImagePoster() {\r\n        \r\n        final Movie movie = retrieveSelectedMovie();\r\n        \r\n        if (movie==null) {\r\n            longToast(getString(R.string.no_movie_selected));\r\n            return;\r\n        }\r\n        \r\n        String imageUrl = movie.retrieveCoverImage();\r\n        if (Utils.isMissing(imageUrl)) {\r\n            longToast(getString(R.string.no_imdb_id_found));\r\n            return;\r\n        }\r\n        \r\n        final Dialog dialog = new Dialog(this);\r\n        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);\r\n        dialog.setContentView(R.layout.full_image_layout);\r\n        \r\n        final Button closeDialogButton = (Button) dialog.findViewById(R.id.close_full_image_dialog_button);\r\n        imageView = (ImageView) dialog.findViewById(R.id.image_view);                                \r\n        \r\n        closeDialogButton.setOnClickListener(new OnClickListener() {            \r\n            @Override\r\n            public void onClick(View v) {\r\n                dialog.dismiss();\r\n            }\r\n        });\r\n        \r\n        final ImageDownloaderTask task = new ImageDownloaderTask();\r\n        task.execute(imageUrl);\r\n        \r\n        dialog.show();\r\n        \r\n        progressDialog = ProgressDialog.show(MoviesListActivity.this,\r\n                \"Please wait...\", \"Retrieving data...\", true, true);\r\n        \r\n        progressDialog.setOnCancelListener(new OnCancelListener() {                \r\n            @Override\r\n            public void onCancel(DialogInterface dialog) {\r\n                if (task!=null) {\r\n                    task.cancel(true);\r\n                }\r\n            }\r\n        });\r\n        \r\n    }\r\n    \r\n    private void visitImdbMoviePage() {\r\n        \r\n        final Movie movie = retrieveSelectedMovie();\r\n        \r\n        if (movie==null) {\r\n            longToast(getString(R.string.no_movie_selected));\r\n            return;\r\n        }\r\n        \r\n        String imdbId = movie.imdbId;\r\n        if (Utils.isMissing(imdbId)) {\r\n            longToast(getString(R.string.no_imdb_id_found));\r\n            return;\r\n        }\r\n        \r\n        String imdbUrl = IMDB_BASE_URL + movie.imdbId;\r\n        Intent imdbIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(imdbUrl));                \r\n        startActivity(imdbIntent);\r\n        \r\n    }\r\n    \r\n    private void showMovieOverviewDialog(final String title, final String overview) {\r\n        \r\n        final Dialog dialog = new Dialog(this);\r\n        dialog.setContentView(R.layout.movie_overview_dialog);\r\n\r\n        dialog.setTitle(title);\r\n\r\n        final TextView overviewTextView = (TextView) dialog.findViewById(R.id.movie_overview_text_view);\r\n        overviewTextView.setText(overview);\r\n        \r\n        final Button closeButton = (Button) dialog.findViewById(R.id.movie_overview_close_button);\r\n        \r\n        closeButton.setOnClickListener(new OnClickListener() {            \r\n            @Override\r\n            public void onClick(View v) {\r\n                dialog.dismiss();\r\n            }\r\n        });\r\n        \r\n        dialog.show();\r\n        \r\n    }\r\n    \r\n    private class ImageDownloaderTask extends AsyncTask<String, Void, Bitmap> {\r\n        \r\n        @Override\r\n        protected Bitmap doInBackground(String... params) {\r\n            String url = params[0];\r\n            InputStream is = httpRetriever.retrieveStream(url);\r\n            if (is==null) {\r\n                return null;\r\n            }\r\n            return BitmapFactory.decodeStream(new FlushedInputStream(is));\r\n        }\r\n        \r\n        @Override\r\n        protected void onPostExecute(final Bitmap result) {            \r\n            runOnUiThread(new Runnable() {\r\n                @Override\r\n                public void run() {\r\n                    if (progressDialog!=null) {\r\n                        progressDialog.dismiss();\r\n                        progressDialog = null;\r\n                    }\r\n                    if (result!=null) {\r\n                        imageView.setImageBitmap(result);\r\n                    }                    \r\n                }\r\n            });\r\n        }\r\n        \r\n    }\r\n    \r\n    private Movie retrieveSelectedMovie() {\r\n        int position = getSelectedItemPosition();\r\n        if (position==-1) {\r\n            return null;\r\n        }\r\n        return moviesAdapter.getItem((int)position);\r\n    }\r\n    \r\n    private void longToast(CharSequence message) {\r\n        Toast.makeText(this, message, Toast.LENGTH_LONG).show();\r\n    }\r\n    \r\n}\r\n<\/pre>\n
That’s all guys. You can find here<\/a> the Eclipse project created so far. Cheers!<\/p>\n
Related Articles :<\/i><\/strong><\/div>\n