Steps to create a Popup menu

• Create a new instance of PopupMenu class and pass the instance of the Context ( usually the current activity) and the view (for which the pop-up menu is desired) as arguments.
• Inflate the menu resource using:
  • popupMenu.inflate () if you are using Android 4.0 SDK and above (or)
  • MenuInflater class (popupMenu.getMenuInflater().inflate() method) if you are using Android 3.0 SDK
• Call popupMenu.show() to display the menu

Responding to menu item selections

Override the popupMenu.setOnMenuItemClickListener () method and provide a call back for handling user selections. The use selected menu item is passed in as argument to the callback method.

Example

Lets adapt the same example we saw for the android context menu previously to use popup menus instead. What we have here is a single button that is wrapped inside a linear layout. Clicking the button invokes a popup menu that lets us change the background color for the button as shown in the sample screenshot.

Menu resource File

This is the same color menu resource file under res/menu folder that we used in android context menu example.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_red" android:title="Red" />
    <item android:id="@+id/menu_green" android:title="Green"/>
    <item android:id="@+id/menu_blue" android:title="Blue"/>
</menu>

Layout definition file

One single button within a linear layout.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <Button android:id="@+id/popupMenuBtn"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Show me the Popup"
            android:layout_gravity="center"
            android:gravity="center"/>
</LinearLayout>

Java Source Code

Nothing fancy here again. We just follow the 3 steps mentioned above for creating a context menu and define the menu handler to handle user selections.

• The button element acts as the view responsible for invoking the popup menu. Create a new instance of the popup menu and pass the activity and the button as arguments
• Inflate the menu resource and associate it with the popup menu instance.
• Call popupmenu.show () method within the onClick listener to display the menu when the user clicks the button.
• Override the popupMenu.setOnMenuItemClickListener () method to change the background color of the button based on user selections.

public class MenuDemo extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.menudemo);
        /**
         * A Button that acts as the view element for the popup menu.
         */
        final Button btn = (Button) findViewById(R.id.popupMenuBtn);
        /**
         * Step 1: Create a new instance of popup menu
         */
        final PopupMenu popupMenu = new PopupMenu(this, btn);
        /**
         * Step 2: Inflate the menu resource. Here the menu resource is
         * defined in the res/menu project folder
         */
        popupMenu.inflate(R.menu.color_menu);
        /**
         * Step 3: Call show() method on the popup menu to display the
         * menu when the button is clicked.
         */
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                popupMenu.show();
            }
        });
        /**
         *  Handle menu item clicks
         */
        popupMenu.setOnMenuItemClickListener(
                new PopupMenu.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_red:
                        btn.setBackgroundResource(R.color.LightRed);
                        break;
                    case R.id.menu_blue:
                        btn.setBackgroundResource(R.color.DullBlue);
                        break;
                    case R.id.menu_green:
                        btn.setBackgroundResource(R.color.LightGreen);
                        break;
                }
                return true;
            }
        });

    }
}

Happy Coding !!!

Context Menu Creation

To create a context menu, you need to:

• Register the view element to use a Context menu using the registerForContextMenu (View v)
• Override the onCreateContextMenu ()method.  The method takes 3 arguments:
  • A default ContextMenu object,
  • The view element for which the context menu is desired and
  • A ContextMenuInfo object that can be used to pass any additional information that can used for  creation of the Context Menu.

Responding to Context menu Selections

To respond to context menus override the onContextItemSelected ()  method . The menu item that was selected is passed in as a argument to this method.

Example

Lets look at the context menu usage with a simple example.  In this example we have an activity with two TextView elements,  one with the context menu and the other without. The context menu lets us choose the background color of the TextView element as shown in the  sample screenshot below.

Context Menu Definition

Menus are also resources in android. To define a menu create a file called “color_menu.xml” and place it under res/menu folder.  As shown below, you define the menu inside the menu tag and populate the menu items using the  item tag. You need to specify a valid id for each menu item. This is used to respond to menu item selections as shown later below.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_red" android:title="Red" />
    <item android:id="@+id/menu_green" android:title="Green"/>
    <item android:id="@+id/menu_blue" android:title="Blue"/>
</menu>

Activity Layout Definition

The activity layout is simple and consists of a linear layout with two TextView elements within it as shown.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView android:id="@+id/context_color"
              android:layout_height="wrap_content"
              android:layout_width="fill_parent"
              android:gravity="center"
              android:layout_margin="5dip"
              android:textColor="@color/DarkGrey"
              android:text="Color Context Menu ( Click and Hold)"
            />

    <TextView android:id="@+id/menuDemoDiv1"
                 android:layout_height="1dip"
                 android:layout_width="match_parent"
                 android:background="@color/white"
                 android:textColor="@color/DarkGrey"
                 android:text=""/>

    <TextView android:id="@+id/menu_textView2"
                  android:layout_height="wrap_content"
                  android:layout_width="fill_parent"
                  android:gravity="center"
                  android:layout_margin="5dip"
                  android:textColor="@color/DarkGrey"
                  android:text="TextView with no context Menu"
                />
</LinearLayout>

Java Source Code

• Register the first TextView element to use the ContextMenu within the onCreate() method of the activity
• Override the onCreateContextMenu() method to create the context menu. The general pattern is to use the id of the view element to generate different menus.  In this case we delegate the menu creation to a private helper method. This method uses the MenuInflater instance available to the activity to inflate the color menu defined as a xml resource. Just as with layout files, android automatically generate unique ids for the menu resources based on the name of the file which is then passed into the getMenuInflater (). inflate ()method.
• You can respond to the menu selections by switching on the id of  the MenuItem being passed as argument to the onContextItemSelected () method. In this case we change the background color of the TextView element based on the selection.

public class MenuDemo extends Activity {
   private TextView m_contextColor;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.menudemo);
      m_contextColor = (TextView) findViewById(R.id.context_color);
      /**
       * Register the View elements in the activity to generate
       * Context menus
       */
      registerForContextMenu(m_contextColor);
   }
    @Override
    public void onCreateContextMenu(ContextMenu menu, View v, 
                            ContextMenu.ContextMenuInfo menuInfo) {
       switch (v.getId()) {
          case R.id.context_color:
             createMenu(R.menu.color_menu, menu, "Choose a color");
             break;
          default:
             super.onCreateContextMenu(menu, v, menuInfo);
       }
    }
   private void createMenu(int menuID, ContextMenu menu, 
                                            String title) {
      /**
       * Use a MenuInflater associated with the activity to
       * inflate the Menu layout
       */
      getMenuInflater().inflate(menuID, menu);
      menu.setHeaderTitle(title);
   }

   @Override
   public boolean onContextItemSelected(MenuItem item) {
      switch (item.getItemId()) {
         case R.id.menu_red:
            m_contextColor.setBackgroundResource(R.color.LightRed);
            return true;
         case R.id.menu_blue:
            m_contextColor.setBackgroundResource(R.color.DullBlue);
            return true;
         case R.id.menu_green:
            m_contextColor.setBackgroundResource(R.color.LightGreen);
            return true;
         default:
            return super.onContextItemSelected(item);
      }
   }
}

Happy Coding !!!

• Options menu:  Options menu show up when the user clicks on the menu button present in the android devices and are useful for showing global options that affect the entire application.
• Context menu: Context menus are  the equivalent of right-click menus in desktop programs. You can invoke them with a long click ( touch and hold). They are useful for providing options that are specific to a UI element in the activity.
• Popup menu: Pop-up menus can be invoked as a result of any UI event such as a button click. Android documentation recommends the use of pop-up menus to only display secondary or extended actions and handle the primary contextual actions in the context menu.

In this post lets focus on the options menu  creation, modification and handling of menu item selections. . We’ll cover the other menu types and their usage in subsequent posts.

Creating a menu

A android menu is composed of menu items and  each menu item has the following four attributes viz.

• title: a title string or a string resource id
• id: a integer that uniquely identifies the menu item
• group id: integer that can be used for manipulating a set of menu items as a single group. eg: disabling all the menu items in a group using the group id
• sort order: integer used for categorizing the menu items as secondary , system  etc. and determine the relative ordering of the menu items within the menu.
  

  Android menu constants

To create the options menu, you override the onCreateOptionsMenu (Menu menu) method. This method takes in a menu object associated with the activity as a parameter. You can then call the add() method that takes in a combination of the four attributes mentioned above as parameters to add the desired set of menu items to the menu. At the very least you need to specify the title of the menu item and let android fill in  the default values for the remaining attributes. Android also provides certain menu constants such as Menu.FIRST and Menu.NONE that can be used to generate group and menu ids. Make sure that you return true at the end of this method, otherwise android wont show the menu on the screen.

Create method for android options menu

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    menu.add(
            Menu.NONE, // Group ID
            Menu.FIRST + 1, // ItemId
            Menu.NONE,  // ordering
            "Option " + rand.nextInt());// title
    return true; // to make the menu visible
}

Responding to menu item selection

Once the menu is created, you can invoke the menu by clicking the main menu button on the android device. You can respond to specific menu item selections by overriding the onOptionsItemSelected (MenuItem menuItem) method. Android passes the reference to the menu item that was selected by the user as parameter. You can then use this reference to take the desired action on the menu item. Here we display a Toast Message with the menu item’s title and Id.

Responding to option menu selection

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    String text = item.getTitle() + ":" + item.getItemId();
    Toast.makeText(this, text, Toast.LENGTH_LONG).show();
    return true;
}

Modifying  Options menu at runtime

As of android 3.0, onCreateOptionsMenu () method is called once when the activity is created. Prior to that it was called on the first invocation of the options menu. The change is due to the addition of the action bar to the android 3.0 SDK.  Action bars are the recommended way to handle options for applications developed using 3.0 api and higher. We’ll cover them in a separate post.

What this means is, you cannot add or remove the items from the menu after its created in the onCreateOptionsMenu() method. If you do need to change the contents of the menu dynamically then you ‘ll have to override the  onPrepareOptionsMenu (Menu menu) method. This method gets called each time the menu button is pressed and the current menu object associated with the activity is passed in as a parameter.  You can then modify the menu items inside the method. For example, we can add a new menu item each time the menu button is click as shown below.  You can also force android to call the onCreateOptionsMenu () method again by calling the invalidateOptionsMenu (). This is useful say, when you want to reset the menu back to original state as defined in the onCreateOptionsMenu() method.

Modifying android options menu at runtime

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    int size = menu.size();
    MenuItem lastItem = menu.getItem(size - 1);
    int itemId = lastItem.getItemId() + 1;
    menu.add(lastItem.getGroupId(),itemId,lastItem.getOrder(),"option "+ itemId);
    return super.onPrepareOptionsMenu(menu);
}

Happy Coding !!!

Android Gallery Demo

Example

XML layout for android gallery demo

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">
<Gallery android:id="@+id/gallery"
          android:spacing="10dip"
          android:gravity="center"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
         />
</LinearLayout>

Custom Adapter Class

Custom Adapter class for Displaying Images

private class CustomAdapter extends BaseAdapter {
   private Context m_context;
   /**
    * An array of input resource ids
    */
   private final Integer[] m_imgs = {           R.drawable.autumn,           R.drawable.creek,           R.drawable.desert   };   public CustomAdapter(Context context) {
      m_context = context;
   }
   @Override
   public int getCount() {
      return m_imgs.length;
   }
   @Override
   public Object getItem(int position) {
      return m_imgs[position];
   }
   @Override
   public long getItemId(int position) {
      return position;
   }
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {      ImageView imgView = new ImageView(m_context);
      imgView.setImageResource(m_imgs[position]);
      imgView.setScaleType(ImageView.ScaleType.FIT_XY);
      imgView.setLayoutParams(new Gallery.LayoutParams(200, 300));
      return imgView;
   }
}

Activity Class

Overall Activity class for android gallery demo

public class GalleryDemo extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.gallerydemo);
      Gallery gallery = (Gallery) findViewById(R.id.gallery);
      final CustomAdapter adapter = new CustomAdapter(this);
      gallery.setAdapter(adapter);      gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {         @Override
         public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            String name = getResources().getString((Integer) adapter.getItem(position));
            int startIndex = name.lastIndexOf("/");
            name = name.substring(startIndex + 1);
            Toast.makeText(GalleryDemo.this,name,Toast.LENGTH_SHORT).show();         }
      });
   }
    // ....CustomAdapter inner class  goes here}

Happy Coding !!!

WebViewClient

WebChromeClient

JavaScriptInterface

In addition, WebView provides various settings that can be overridden such as enabling javascript ( its off by default), setting layout algorithm etc.

Example

Custom WebChromeClient

Custom WebChromeClient

private class CustomChromeclient extends WebChromeClient {
   @Override
   public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
      AlertDialog dialog = new AlertDialog.Builder(view.getContext()).
              setMessage(message).
              setPositiveButton("OK", new DialogInterface.OnClickListener() {
                 @Override
                 public void onClick(DialogInterface dialog, int which) {
                    //do nothing
                 }
              }).create();
      dialog.show();
      result.confirm();
      return true;
   }
}

Associate the WebChromeClient with WebView

wv.setWebChromeClient(new CustomChromeclient());

WebView Reload

Logic to reload the WebView

private class JavaScriptInterface {
   private final WebView m_wv;
   public JavaScriptInterface(WebView wv) {
      m_wv = wv;
   }
   public void reload() {
      m_wv.reload();   }
}

Bind the reload logic to browser environment

wv.addJavascriptInterface(new JavaScriptInterface(wv), "JSI");

Calculating the Page load  count and intervals

Custom WebViewClient

private static class CustomWebViewclient extends WebViewClient {
   private static int refreshCount;
   private Context m_context;
   private long m_start;
   private CustomWebViewclient(Context context) {
      m_context = context;
   }
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
      return false;
   }
   @Override   public void onPageStarted(WebView view, String url, Bitmap favicon) {
      m_start = System.currentTimeMillis();
      refreshCount++;
   }
   @Override
   public void onPageFinished(WebView view, String url) {      long interval = System.currentTimeMillis() - m_start;
      Toast.makeText(m_context, "Loaded this webpage [" + refreshCount + "] " +
              "times in [" + interval + "] ms", Toast.LENGTH_SHORT).show();
   }
}

Associate the CustomWebViewClient with the WebView element

wv.setWebViewClient(new CustomWebViewclient(this));

HTML File

Local HTML resource that gets loaded into the WebView

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Hello World</title>
    <!--Javascript alert function-->
    <script type="text/javascript">
        function toast() {
            alert("Raise a toast")        }
    </script>
</head>
<body>
<H1>
    Hi There...I am a local resource
</H1>
<div id="alertBtn">
    <!--Call to the Javascript alert function-->
    <input id="btn1" type="button" value="toast" onclick="toast()"/></div>
<div id="reloadBtn">
    <!--onclick function that calls the 'Java' Code -->
    <input id="btn2" type="button" value="reload" onclick="JSI.reload()"/></div>
</body>
</html>

Activity class

Activity class overview

public class WebViewDemo extends Activity {
   private static final String URL_TO_LOAD = "http://google.com";
   private static final String LOCAL_RESOURCE = "file:///android_asset/html/HelloWorld.html";
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.browser_demo);
      WebView wv = (WebView) findViewById(R.id.browser1);
      loadResource(wv, LOCAL_RESOURCE);
   }
   private void loadResource(WebView wv, String resource) {      wv.loadUrl(resource);
      wv.getSettings().setJavaScriptEnabled(true);
      wv.setWebChromeClient(new CustomChromeclient());
      wv.setWebViewClient(new CustomWebViewclient(this));
      wv.addJavascriptInterface(new JavaScriptInterface(wv), "JSI");
   }  // Custom classes for WebViewclient, WebChromeClient and JavaScript interfaces...}

Load url using WebView

Example

XML layout

Xml layout file for WebView element

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/browser1"
         android:layout_width="match_parent"
         android:layout_height="match_parent"/>

AndroidManifest Permissions

Permission entry in the AndroidManifest.xml file

<!--Specify the permissions that the application uses-->
<uses-permission android:name="android.permission.INTERNET"/>

HTML Asset

A local HTML resource under the assets folder

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Hello World</title>
</head>
<body>
<H1>
    Hi There...I am a local resource
</H1>
</body>
</html>

Java code

Load a local resource using webview

Activity class to demo WebView element

public class WebViewDemo extends Activity {
   private static final String URL_TO_LOAD = "http://google.com";
   private static final String LOCAL_RESOURCE = "file:///android_asset/html/HelloWorld.html";
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.browser_demo);
      WebView wv = (WebView) findViewById(R.id.browser1);      loadResource(wv, URL_TO_LOAD);   }
   private void loadResource(WebView wv, String resource) {
      wv.loadUrl(resource);      wv.getSettings().setJavaScriptEnabled(true);   }
}

Android Spinner Demo

Example

XML Layout for Android Spinner example

<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">
 
    <TextView android:id="@+id/spin_tv1"
              android:layout_height="wrap_content"
              android:layout_width="match_parent"/>
 
    <Spinner android:id="@+id/spin1"             android:layout_height="wrap_content"
             android:layout_width="match_parent"/>
 
</LinearLayout>

String array of mobile platforms

<string-array name="dev_platforms">
    <item>Android</item>
    <item>Iphone</item>
    <item>Windows</item>
    <item>Bada</item>
    <item>WebOS</item>
</string-array>

Once we define the layout and the input array, we do the following in the Java code.

• Register the XML layout with the Activity using the setContentView() method
• Fetch the array string of mobile platforms using the getResources().getStringArray() method by supplying the resource id as argument.
• Pass in the string array as input and android.R.layout.simple_spinner_dropdown_item as layout to the constructor of the ArrayAdapter class
• Hook the adapter with the spinner element using the setAdapter () method
• Define a AdapterView.OnItemSelectedListener () to track the user selections and register it with the spinner using the setOnItemSelectedListener () method.

Java Code for the Android Spinner example

public class SpinnerDemo extends Activity {
   private TextView m_tv;
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.spinnerdemo);
      m_tv = (TextView) findViewById(R.id.spin_tv1);
      Spinner spinner = (Spinner) findViewById(R.id.spin1);
      String[] platforms = getResources().              getStringArray(R.array.dev_platforms);
      ArrayAdapter<String> adapter =
              new ArrayAdapter<String>(this,
                      android.R.layout.simple_spinner_dropdown_item,                      platforms);
      spinner.setAdapter(adapter); 
      spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {         @Override
         public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
            TextView tv = (TextView) view;
            m_tv.setText(tv.getText());
         }
 
         @Override
         public void onNothingSelected(AdapterView<?> parent) {
            m_tv.setText("");
         }
      });
   }
}

Setting DropDown Views 

Checked DropDown View

You can also display a different drop down view by using the setDropDownViewResource () method on the ArrayAdapter class . In our example, we can display a checked item view using the  android.R.layout.simple_list_item_checked  for the dropdown view in addition to the default view passed in the constructor. Adding this line of code before registering the adapter with the spinner results in the output as shown.

Set the dropdown view on the ArrayAdapter

adapter.setDropDownViewResource(android.R.layout.simple_list_item_checked);

 

In part 2 of the series, we discussed how android’s ArrayAdapter class internally reuses views to optimize performance. However reusing views has the side effect of losing any state associated with the current data, as the view is recycled andupdated with new data. Lets say, we want to change the appearance of the text when the user clicks on a element within ListView. Just building that logic  as part of  the onListItemClick () method (as we did for the previous examples) won’t help because we lose this information as soon as the user scrolls the ListView.  So we need some place to store and retrieve this information based on the context.

ListView Demo using Custom Adapters

Example

Dummy Input Items

private static final String[] s_dummyItems = new String[15];
 
static {
for (int i = 0; i < s_dummyItems.length; i++) {
   s_dummyItems[i] = "Test " + i;
}
}

Class to encapsulate the state associated with ListView

private class State {
   private boolean[] caps = new boolean[s_dummyItems.length];
 
   public void setCaps(int position) {
      if (position < caps.length) {
         caps[position] = true;
      }
   }
 
   public boolean isCaps(int position) {
      return caps[position];
   }
}

Custom XML layout

<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:orientation="vertical"
              android:layout_height="fill_parent">
 <TextView android:id="@+id/adapter_bold_text"
           android:text="Test"
           android:lines="3"
           android:textSize="20dip"
           android:gravity="center_horizontal"
           android:layout_gravity="center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>
</LinearLayout>

Lets now look at the logic within the onListItemClick () callback method that gets called each time the user clicks on a ListView element.  The View argument to the method is our custom layout shown above. The first time its called the State is null. We create a new instance of State object, set the boolean value corresponding to the “position” argument to true and associate the State object with the View using the setTag() method. For subsequent calls, we modify the same state object. Thus for each item that is clicked we mark its state and keep track of it within the View object.

Callback method for ListView Item click

protected void onListItemClick(ListView l, View v, int position, long id) {
   State state = (State) v.getTag();
   if (state == null) {
      state = new State();
   }
   state.setCaps(position);
   v.setTag(state);
}

• Context, which is the Activity itself
• Custom layout
• TextView element within it and
• Dummy input Strings that we initialized earlier.

Finally, in the getView() method, we check for the existence of State object within the View argument. If it not null, we get the reference to the TextView element within the View using the findViewById () method and change the case of the text and surround it with quotes. The same pattern can be used to do something more useful than changing the characters to uppercase.

Custom Adapter Class

private class BoldViewAdapter extends ArrayAdapter<String> {
   public BoldViewAdapter() {
 
      super(ListViewInteractDemo.this,
              R.layout.bold_text_adapter_view,
              R.id.adapter_bold_text, s_dummyItems);
   }
 
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
      View customView = super.getView(position, convertView, parent);
      State state = (State) customView.getTag();      TextView txtView = (TextView) customView.
              findViewById(R.id.adapter_bold_text);      String text = txtView.getText().toString();
      if (state != null && state.isCaps(position)) {
         txtView.setText("' " + text.toUpperCase() + " '");
      } else {         // undo if any changes you make to the parent view also      }      return customView;
   }
}

Also note the blank else block. This is a place holder to undo any changes done to the View object itself. Suppose, in addition to changing the case of the text, you also changed the background color of the TextView element itself, for the clicked item. Since the same View instance is reused, you might also notice the color change on the items where the user has not yet clicked which  is undesirable. You can undo such changes within the else block if necessary.

ListView with multiple selections

MultiChoiceMode

• Specify the “android:choiceMode” attribute in the XML layout as “multipleChoice”
• Use the android.R.layout.simple_list_item_multiple_choice instead of android.R.layout.simple_list_item_1 as the TextView layout in the ArrayAdapter constructor.

Custom Layout for the ListView

Next, lets use a custom layout instead of the predefined layouts that we have been feeding into the constructor of the ArrayAdapter.  Lets customize by add a image before each string in the ListView. To keep it simple, we’ll be adding the default launcher image that comes with Android and resort to using a smaller font size. The resulting output is a ListView that looks as shown below.

• Create a new xml layout with a ImageView and a TextView element. Specify the source attribute in the ImageView element to point to the launcher image in the res/drawable-* directory in your project.

Custom XML layout for ListView

<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">
 
    <ImageView android:id="@+id/adapter_img"
               android:src="@drawable/ic_launcher"               android:layout_height="wrap_content"
               android:layout_width="wrap_content"/>
 
    <TextView android:id="@+id/adapter_tv"            android:layout_height="wrap_content"
            android:layout_width="wrap_content"/>
 
</LinearLayout>

• Next in the constructor of the ArrayAdapter class specify the  custom layout resource and the id of the TextView element (adapter_tv) within it as arguments.
  

  ListView with custom layout

• Bind the the adapter using the setListAdapter () method.
• To track the user clicks like we did in the previous example, we need to get the reference to the TextView element that was clicked and append its Text to the ClickTracker. However this time, we get our custom layout as the View argument to  the onListItemClick () method instead of the actual TextView element.  So we use the findViewById () method to get the TextView element within it as shown below.

Java Code for ListView with Custom Layout

public class ListViewCustomLayout extends ListActivity {
   private TextView m_clickTracker;
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.listdemo);
      m_clickTracker = (TextView) findViewById(R.id.listdemo_tv1);
      String[] platforms = getResources().getStringArray(R.array.dev_platforms);
      ListAdapter listAdapter =
              new ArrayAdapter<String>(this,
                                      R.layout.img_text_adapter_view,                                      R.id.adapter_tv, platforms);      setListAdapter(listAdapter);   }
 
   @Override
   protected void onListItemClick(ListView l, View v, int position, long id) {
      StringBuilder text = new StringBuilder(m_clickTracker.getText());
      if (text.length() > 0) {
         text.append(", ");
      }
      TextView tv = (TextView) v.findViewById(R.id.adapter_tv);      text.append(tv.getText());
      m_clickTracker.setText(text.toString());
   }
}

Reusing Views

If you take a quick look into the internals of the ArrayAdapter’s getView () method, among other things you ‘ll find the following lines:

     

Partial code snippet from ArrayAdapter class

View view;
TextView text;
 
if(convertView==null){
        view=mInflater.inflate(resource,parent,false);
} else{
         view=convertView;
}
 
 // ...

The convertView shown above is the View object that is passed as one of the arguments to the getView() method. The view can be null sometimes  ( such as the first time its called) in which case a new view object is inflated ( i.e created)  using the Inflater class available in android. If its not null, the existing view is reused. This  usually happens when the user scrolls the list and the getView () method is called again for rendering the new set of  elements on the screen.  As a performance optimization, android automatically recycles the views of the rows that are no longer visible on the screen and uses them for rendering the currently viewable elements.  Its recommended to follow the same pattern if you are writing your own Adapters and inflating the views. The performance gain is significant when compared to creating new view objects each time.

Adapters

ListView and ListActivity

1. Declare the ListView element in the XML layout file.
2. Source the layout in the Activity class using the setContentView  method
3. Create a Adapter such as an ArrayAdapter to feed the input items to be listed
4. Bind the adapter to the activity class using the setAdapter () method.
5. Define the setItemClickListener () method to track the changes to the selections within the list

However you can skip a few of the above steps, if the main purpose of your activity is to display the list of items. You can

Demo output for Android ListView

extend your activity from ListActivity class instead of the usual Activity class. ListActivity is a convenience class provided by android to simplify list handling and comes with a default layout that contains a ListView Element.  So if all  you want to do in your activity is to display the ListView items, then you can skip step2 altogether. But if you do want to customize your layout, you should declare your ListView element  with id ”@android:id/list” ( see example below).

Example

XML layout file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">
 
    <TextView android:id="@+id/listdemo_tv1"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text=""
              android:gravity="center"/>
 
    <ListView android:id="@android:id/list"              android:choiceMode="multipleChoice"
              android:layout_width="match_parent"
              android:layout_height="match_parent"/>
</LinearLayout>

Array declaration in res/layout/strings.xml

<string-array name="dev_platforms">
    <item>Android</item>
    <item>Iphone</item>
    <item>Windows</item>
    <item>Bada</item>
    <item>WebOS</item>
</string-array>

Java code for ListViewDemo Activity class

public class ListViewDemo extends ListActivity { 
    private TextView m_clickTracker;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.listdemo);        m_clickTracker = (TextView) findViewById(R.id.listdemo_tv1);
        String[] platforms = getResources().getStringArray(R.array.dev_platforms);        ListAdapter listAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, platforms);        setListAdapter(listAdapter);    }
 
    @Override
    protected void onListItemClick(ListView l, View v, int position, long id) {        StringBuilder text = new StringBuilder(m_clickTracker.getText());
        if (text.length() > 0) {
            text.append(", ");
        }
        TextView tv = (TextView) v;
        text.append(tv.getText());
        m_clickTracker.setText(text.toString());
    }
}

• Our ListViewDemo extends from ListActivity class
• setContentView () method is used to source the layout within the Activity. This is done because  we have customized the layout with a TextView element to track user selections. If our layout were to say, just contain the ListView element, we can skip this step.
• We use the getResources ()  method that is available within the Activity to get hold of the string array that we declared above and pass it as input to the ArrayAdapter class. This version of the ArrayAdapter’s constructor takes the following arguments:
• • Context that provides access to environment data like local files, databases, system services etc. This is usually the Activity itself.
  • Layout file that represents a TextView element. By default, the ArrayAdapter converts the items within, into a String object ( using toString () ) and wraps it with the layout specified. This layout controls the appearance of the list elements on the screen. In this case we use one of the predefined layouts,  android.R.layout.simple_list_item_1 which represents a singe line TextView element. Android allows us to provide our own layouts to customize the look and feel.
  • The input list of items, in this case our string array.
• Call the setListAdapter () method to bind the Adapter to the ListActivity.
• Define the action to take when the user clicks on a item in the list by overriding the onListItemClick() method. The ListView itself , the view, position  and the id of the element that was clicked are available as arguments to this callback method.  We cast the view that was passed into a TextView element, grab its text and append it to the clickTracker which is nothing but the TextView element that we defined in the xml layout file.