How To Create Custom ListView with ImageView and TextView In Android

androidlift | September 8, 2015 | Listview | No Comments

Custom Listview

Custom ListView. In this tutorial we implement the custom listview using BaseAdapter. In Custom ListView show the ImageView with TextView for each list item.

Create Project As : CustomListView

By Default Main Layout for our project is activity_main.xml which has display the list of android list item with image.

Output :

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"

tools:context=".MainActivity">

<TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="60dp"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:background="@color/colorPrimary"

android:gravity="center"

android:text="Simple ListView"

android:textAppearance="?android:attr/textAppearanceMedium"

android:textColor="#ffffff"

android:textStyle="bold" />

<ListView

android:id="@+id/lvList"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_below="@+id/textView"

android:dividerHeight="2dp" />

</RelativeLayout>

Create Custom list item layout by Name :inflate_list_view.xml

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

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

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="5dp">

<ImageView

android:id="@+id/ivImage"

android:layout_width="100dp"

android:layout_height="100dp" />

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="vertical">

<TextView

android:id="@+id/tvContent"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:layout_marginTop="10dp"

android:text="Medium Text"

android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

In MainActivity.java

package com.galaxystech.customlistview;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ListView;

import android.widget.Toast;

public class MainActivity extends Activity {

// Create ListView Object

private ListView lvList;

//Create object of custom adapter

ListViewAdapter adapter;

// Defined Array String values

String[] values = new String[]{"Android List View Item 1",

"Android List View Item 2",

"Android List View Item 3",

"Android List View Item 4",

"Android List View Item 5",

"Android List View Item 6",

"Android List View Item 7",

"Android List View Item 8",

"Android List View Item 9",

"Android List View Item 10",

"Android List View Item 11",

"Android List View Item 12",

"Android List View Item 13",

"Android List View Item 14",

"Android List View Item 15",

"Android List View Item 16",

"Android List View Item 17",

"Android List View Item 18"};

// Defined Array of images id

Integer[] imgid = {

R.drawable.pic1,

R.drawable.pic1

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Get ListView object from xml

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

//call list view adapter constructor

adapter = new ListViewAdapter(MainActivity.this, values, imgid);

//Assign Above Array Adapter to ListView

lvList.setAdapter(adapter);

//Create ListView Item click listener

lvList.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

Toast.makeText(getApplicationContext(), values[position], Toast.LENGTH_LONG).show();

}

});

}

Create ListViewAdapter.java new Class copy & paste the following code.

package com.galaxystech.customlistview;

import android.app.Activity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

/**

* Created by admin on 9/8/2015.

public class ListViewAdapter extends ArrayAdapter<String> {

private final Activity context;

private final String[] content;

private final Integer[] imgid;

public ListViewAdapter(Activity context, String[] content, Integer[] imgid) {

super(context, R.layout.inflate_list_view, content);

// TODO Auto-generated constructor stub

this.context = context;

this.content = content;

this.imgid = imgid;

}

public View getView(int position, View view, ViewGroup parent) {

LayoutInflater inflater = context.getLayoutInflater();

View rowView = inflater.inflate(R.layout.inflate_list_view, null, true);

TextView tvContent = (TextView) rowView.findViewById(R.id.tvContent);

ImageView ivImage = (ImageView) rowView.findViewById(R.id.ivImage);

tvContent.setText(content[position]);

ivImage.setImageResource(imgid[position]);

return rowView;

};

}

(1022)

How To Create Custom ListView with ImageView and TextView In Android

Custom Listview

Like this:

Related

Custom Listview

Share this:

Like this:

Related