Wednesday, April 3, 2013

Implement custom ArrayAdapter to display icon on ListFragment

It's extended version of the exercise "ListFragment", to implement custom ArrayAdapter to display icon on ListFragment.

Implement custom ArrayAdapter to display icon on ListFragment

Create /res/layout/row.xml to define the layout of each row, add a ImageView to display icon.
<?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="wrap_content"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:id="@+id/month"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>


Modify MyListFragment1.java to implement custom ListFragment, MyListFragment1. Override the getView() method to prepare and custom the view of each row. And setListAdapter with it.
package com.exercise.AndroidListFragment;

import android.app.ListFragment;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MyListFragment1 extends ListFragment {
 
 public class MyListAdapter extends ArrayAdapter<String> {
  
  Context myContext;

  public MyListAdapter(Context context, int textViewResourceId,
    String[] objects) {
   super(context, textViewResourceId, objects);
   myContext = context;
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   //return super.getView(position, convertView, parent);
   
   LayoutInflater inflater = 
     (LayoutInflater)myContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
   View row=inflater.inflate(R.layout.row, parent, false);
   TextView label=(TextView)row.findViewById(R.id.month);
   label.setText(month[position]);
   ImageView icon=(ImageView)row.findViewById(R.id.icon);
   
   //Customize your icon here
   icon.setImageResource(R.drawable.ic_launcher);
   
   return row;
  }

 }

 String[] month ={
   "January", 
   "February", 
   "March", 
   "April",
   "May", 
   "June", 
   "July", 
   "August",
   "September", 
   "October", 
   "November", 
   "December"
 };

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  /*
  ListAdapter myListAdapter = new ArrayAdapter<String>(
    getActivity(),
    android.R.layout.simple_list_item_1,
    month);
  setListAdapter(myListAdapter);
  */
  MyListAdapter myListAdapter = 
    new MyListAdapter(getActivity(), R.layout.row, month);
  setListAdapter(myListAdapter);
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  return inflater.inflate(R.layout.listfragment1, container, false);
 }

 @Override
 public void onListItemClick(ListView l, View v, int position, long id) {
  Toast.makeText(
    getActivity(), 
    getListView().getItemAtPosition(position).toString(), 
    Toast.LENGTH_LONG).show();
 }

}



download filesDownload the files.

6 comments:

Anonymous said...

Thanks a lot

Anonymous said...

This was the last thing i needed to know about ListFragment. I already knew how to put this this kind of ListView into the NavigationDrawer but I always got excetions by trying to put a customized ListView into the SlidingPaneMenuLayout. Thanks a lot for this tutorial.

Erik said...

please read ListFragment inside DrawerLayout

Anonymous said...

great adapter but just 1 problem, i am getting two list side by side in fragment instead of 1. please help.

ListView.And said...

What happens when instead of a String have an Array of Strings?

ListView.And said...

What happens when instead of a String have an Array of Strings?