How to Code a Custom List View

How to code a Custom List View

A list View (as all of us know) can have only 1 entry per row, either some text / image, like this:

How to code something like this:

Note, the difference, a custom list View allows to format the row according to your requirements. Each row may have many TextView or combination of TextView and ImageView. Hence we define the layout of the row as a separate xml file.

Make a new project and start coding (copy and paste) as below:

// activity_main.xml file

LinearLayoutxmlns:android="
xmlns:tools="

android:layout_width="match_parent"
android:layout_height="match_parent"

android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:orientation="vertical"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".MainActivity"
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/listView" />
</LinearLayout

//list_layout.xml file(provides the layout for the row)

<?xml version="1.0" encoding="utf-8"?>
GridLayoutxmlns:android="
android:layout_width="match_parent"
android:layout_height="match_parent"
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowSpan="2"
android:id="@+id/imageView"
android:layout_row="0"
android:layout_column="0" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:layout_columnWeight="1"
android:id="@+id/textViewName"
android:layout_row="0"
android:layout_column="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:layout_columnWeight="1"
android:id="@+id/textViewDesc"
android:layout_row="1"
android:layout_column="1" />
</GridLayout

// MainActivity.java

package suvenconsultants.com.customlistviewdemo;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivityextends AppCompatActivity {
private ListViewlistView;
private String names[] = {
"HTML",
"CSS",
"Java Script",
"Wordpress"
};
private String desc[] = {
"The Powerful Hypter Text Markup Language 5",
"Cascading Style Sheets",
"Code with Java Script",
"Manage your content with Wordpress"
};
private Integer imageid[] = {
R.drawable.html,
R.drawable.css,
R.drawable.js,
R.drawable.wp
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
CustomListcustomList = new CustomList(this, names, desc, imageid);
listView= (ListView) findViewById(R.id.listView);
listView.setAdapter(customList);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, inti, long l) {
Toast.makeText(getApplicationContext(),"You Clicked "+names[i],Toast.LENGTH_SHORT).show();
}
});
}
}

// CustomList.java defines the code for the row

package suvenconsultants.com.customlistviewdemo;
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;
public class CustomListextends ArrayAdapter<String> {
private String[] names;
private String[] desc;
private Integer[] imageid;
private Activity context;
public CustomList(Activity context, String[] names, String[] desc, Integer[] imageid) {
super(context, R.layout.list_layout, names);
this.context= context;
this.names= names;
this.desc= desc;
this.imageid= imageid;
}
@Override
public View getView(intposition, View convertView, ViewGroup parent) {
LayoutInflaterinflater = context.getLayoutInflater();
View listViewItem = inflater.inflate(R.layout.list_layout, null, true);
TextView textViewName = (TextView) listViewItem.findViewById(R.id.textViewName);
TextView textViewDesc = (TextView) listViewItem.findViewById(R.id.textViewDesc);
ImageView image = (ImageView) listViewItem.findViewById(R.id.imageView);
textViewName.setText(names[position]);
textViewDesc.setText(desc[position]);
image.setImageResource(imageid[position]);
return listViewItem;
}
}

Run the code.

The code structure , should look like this :