Android Custom ListView with Images and Text – Example

Create Layout:

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <ListView

       android:id="@+id/list"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" >

    </ListView>

</RelativeLayout>

 

list_single.xml

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

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <TableRow>

        <ImageView

            android:id="@+id/img"

            android:layout_width="50dp"

            android:layout_height="50dp"/>

        <TextView

            android:id="@+id/txt"

            android:layout_width="wrap_content"

            android:layout_height="50dp" />

</TableRow>

</TableLayout>

 

Create Activity:

CustomList.java

public class CustomList extends ArrayAdapter<String>{
    private final Activity context;
    private final String[] web;
    private final Integer[] imageId;
    public CustomList(Activity context,
            String[] web, Integer[] imageId) {
        super(context, R.layout.list_single, web);
        this.context = context;
        this.web = web;
        this.imageId = imageId;
    }
    @Override
    public View getView(int position, View view, ViewGroup parent) {
        LayoutInflater inflater = context.getLayoutInflater();
        View rowView= inflater.inflate(R.layout.list_single, null, true);
        TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);
        ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
        txtTitle.setText(web[position]);
        imageView.setImageResource(imageId[position]);
        return rowView;
    }
}

MainActivity.java

public class MainActivity extends Activity {

  ListView list;

  String[] web = {

    "Google Plus",

      "Twitter",

      "Windows",

      "Bing",

      "Itunes",

      "Wordpress",

      "Drupal"

  } ;

  Integer[] imageId = {

      R.drawable.image1,

      R.drawable.image2,

      R.drawable.image3,

      R.drawable.image4,

      R.drawable.image5,

      R.drawable.image6,

      R.drawable.image7

  };

  @Override

  protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    CustomList adapter = new

        CustomList(MainActivity.this, web, imageId);

    list=(ListView)findViewById(R.id.list);

        list.setAdapter(adapter);

        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {

                @Override

                public void onItemClick(AdapterView<?> parent, View view,

                                        int position, long id) {

                    Toast.makeText(MainActivity.this, "You Clicked at " +web[+ position], Toast.LENGTH_SHORT).show();

                }

            });

  }

}