Create a custom list

The example below will show a list that represents some menu options with a picture attached.

image

To create a custom list we need to:

  • Extend activity from ListActivity
  • Update layout for activity to contain a ListView and set the default id (@android:id/list)
  • Create a new layout for the list item
  • Create a new string array as data for the list
  • Add to your project some pictures

 

Create arrays.xml in res/values

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

    <string-array name="options">
        <item>About</item>
        <item>Contact</item>
        <item>Settings</item>
    </string-array>

</resources>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Update the main layout

<?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"
    android:orientation="vertical" >

    <ListView
        android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Create list_item.xml in res/layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/imageViewMenuIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scaleType="fitStart"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textViewMenuOption"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:gravity="left"
        android:paddingLeft="10dp"
        android:text="TextView"
        android:textSize="25sp" />

</LinearLayout>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Update activity class to look like this one:

public class CustomListWithArrayActivity extends ListActivity {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);
        setListAdapter(new MenuOptAdapter(this, R.layout.list_item,
                R.id.textViewMenuOption, getResources().getStringArray(
                        R.array.options)));
    }

    private class MenuOptAdapter extends ArrayAdapter<String> {

        private String[] data = null;

        public MenuOptAdapter(Context context, int resource,
                int textViewResourceId, String[] objects) {

            super(context, resource, textViewResourceId, objects);
            this.data = objects;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            // inflate the new layout into list row
            LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View row = inflater.inflate(R.layout.list_item, parent, false);

            // grab the text from array and put it in the
            // text view control
            TextView tv = (TextView) row.findViewById(R.id.textViewMenuOption);
            tv.setText(data[position]);

            // a way of setting the image view control
            // of an item list
            ImageView iv = (ImageView) row.findViewById(R.id.imageViewMenuIcon);
            if (data[position].equals("About")) {
                iv.setImageResource(R.drawable.cube);
            } else if (data[position].equals("Contact")) {
                iv.setImageResource(R.drawable.database);
            } else {
                iv.setImageResource(R.drawable.direction);
            }

            // return the new build as we want
            return row;
        }

    }
}
 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

More about LayoutInflater can be found at http://developer.android.com/reference/android/view/LayoutInflater.html.

Advertisements