Creating custom list view in android using arraylist items

Question

I would like to know how to create custom list view in android for my app. My app has a navigation drawer in it which contains several fragments. In one fragment I have to show a custom list view containing the following text fields (name, designation,phone number) and an image view (photo) in the fragment. There are arraylists such as (name designation phone number) etc of string type and an arraylist (image) of bitmap type. The values to this array list are obtained from the sqlite database. So I need a custom list view which should populate values from this arraylists. I have created a layout file for each row in my activity. It is shown below: I don't know where to include this xml file in my code. Also I have only seen tutorials which do not suit to my situation. I have tried to implement it. But failed to implement it.

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:paddingTop="0dip" android:layout_gravity="top">
<TableRow>
  <LinearLayout 
        android:layout_width="110dp"
        android:layout_height="match_parent"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        >
    <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="left|top"  
        android:scaleType="centerCrop"
        android:id="@+id/image"

        />
    </LinearLayout>
<TableLayout 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:paddingTop="0dip" android:layout_gravity="top" 
  >
  <TableRow>      
     <TextView
          android:id="@+id/text"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:layout_weight="1" android:layout_gravity="left|center_vertical" 
          android:textSize="16sp" 
          android:layout_marginLeft="10dip"
          android:layout_marginTop="4dip"
          android:textColor="#000000"
          android:layout_span="1"
          android:text="Designation:text"
          /> 
    </TableRow>
    <TableRow>        
       <TextView
          android:text="Name : text1"
          android:id="@+id/text1"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:layout_weight="1" 
          android:layout_gravity="left|center_vertical" 
          android:textSize="16sp" 
          android:textColor="#000000"
          android:layout_marginLeft="10dip"
          android:layout_marginTop="4dip"
          android:gravity="left"/>
    </TableRow>
    <TableRow>    
     <TextView
          android:id="@+id/text2"
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:layout_weight="1" android:layout_gravity="left|center_vertical" 
          android:textSize="16sp" 
          android:layout_marginLeft="10dip"
          android:layout_marginTop="4dip"
          android:textColor="#000000"
          android:layout_span="1"
          android:text="Phone No : text2"
          /> 
    </TableRow>
    <TableRow>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_menu_call" />

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_dialog_email" />


        </LinearLayout>



    </TableRow>
  </TableLayout>

Answer 1

You need to create your own custom list adapter and inflate your custom row layout for each row of your list. Simply create a class that extends BaseAdapter or ArrayAdapter. Something like this

public class MyListAdapter extends ArrayAdapter<YourObjectItem> {

    private Context context; 
    private List<YourObjectItem> items;
    private LayoutInflater mInflater;


    public TerritoryListAdapter(Context context, List<YourObjectItem> listOfStuff) {
        super(context, territories);
        this.context = context; 
        this.items= listOfStuff;
        this.mInflater = LayoutInflater.from(context);

    }

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

       //here inflate your view
      if(convetView == null) {
          convertView = mInflater.inflate(R.layout.list_item, null);
      }
       //now obtain an object from your list of objects
       YourObjectItem item = items.get(position);

       //use the fields to fill out your list item layout
       TextView text1 = (TextView) convertView.findViewById(R.id.text1);
       text1.setText(item.getSomethingFromYourObject);

       //and so on...

    }

}

You should also override the other public methods of this class like getCount and getItemId and so on. In that case just return the size of the list and the position of the item in the list respectively. Hope this helps

Edit: I should add that in your layout with the listView, you should call mListView.setAdapter(mListAdapter) in your Activity's onCreate method.