[Android][Development] Customized adapter in ListView

Recently, I try to write a ListView whose elements is consisted of one ImageView aligned to left and 2 TextView located on the right vertically.

To do this, the first thing is declare the layout. Therefore, I add an xml file under layout named scenelist_item.xml

The content of scenelist_item.xml is like below:

<?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="?android:attr/listPreferredItemHeight"
              android:padding="6dip">
    <ImageView
            android:id="@+id/leftimage"
            android:layout_width="48dip"
            android:layout_height="fill_parent"
            android:layout_marginRight="6dip"/>
    <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="fill_parent">
        <TextView
                android:id="@+id/toptext"
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="2"
                android:textAppearance="?android:attr/textAppearanceMedium"/>
        <TextView
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:id="@+id/bottomtext"
                android:singleLine="true"
                android:ellipsize="marquee" />
    </LinearLayout>
</LinearLayout>

The second thing I have to do is to have a customized Adapter for my ListView. Which is responsible for creating a customized view for each list item. Below it is:

    public class PlaceAdapter extends ArrayAdapter<HashMap<String, String>> {

        private List<HashMap<String, String>> items;

        public PlaceAdapter(Context context, int textViewResourceId, List<HashMap<String, String>> items) {
            super(context, textViewResourceId, items);
            this.items = items;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View v = convertView;
            if (v == null) {
                LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                v = vi.inflate(R.layout.scenelist_item, null);
            }

            HashMap<String, String> place = items.get(position);
            if (place != null) {
                ImageView leftImage = (ImageView) v.findViewById(R.id.leftimage);
                TextView topText = (TextView) v.findViewById(R.id.toptext);
                TextView bottomText = (TextView) v.findViewById(R.id.bottomtext);
                if (leftImage != null) {
                    leftImage.setImageBitmap(mPlacesIconList.get(position));
                }
                if (topText != null) {
                    topText.setText(place.get("place_name"));
                }
                if(bottomText != null){
                    bottomText.setText(place.get("vicinity"));
                }
            }
            return v;
        }
    }

As you could see,  the focus is on the member function - getView(). This member function is responsible for creating the view for each list item.

After that, of course, I have to set this adapter to ListView.

    
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_scenelist);

        mSceneList = (ListView) findViewById(R.id.scenelist_list);
        mPlacesList = new ArrayList<HashMap<String,String>>();
        mPlacesIconList = new ArrayList<Bitmap>();
        mAdapter = new PlaceAdapter(this, R.layout.scenelist_item, mPlacesList);

        mSceneList.setAdapter(mAdapter);        

 };

Below is the result.

It finally finishes. Based on this example, you could have your own list view. Have a try.

In my App, the icon comes from internet. Thus, I have to download each icon and transform to Bitmap. In the next example, I will go through this part.