Android ListView with Custom Adapter Tutorial

Total Views : 767
Zoom In Zoom Out Read Later Print

In this tutorial about customizing ListView with an image and text. . In this tutorial I explained how to create animation for scrolling.

For this tutorial we are going to create custom list adapter for our listview. For this tutorial we will use ArrayAdapter, simplest one for a adapter.

1. Creating a List row.

row.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">

<ImageView
android:id="@+id/item_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:src="@android:drawable/ic_menu_help" />

<TextView
android:id="@+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@android:color/black" />

<TextView
android:id="@+id/txtDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txtTitle"
android:layout_marginTop="5dp"
android:text="Description"
android:textColor="@android:color/black" />

</RelativeLayout>

Item class for storing a item information.

Item.java

package com.prodevsblog.customlist;

public class Item {
private int _id = -1 ;
private String title = "";
private String desc = "";
private String help = "";

public int getId() {
return _id;
}

public Item setId(int _id) {
this._id = _id;
return this;
}

public String getTitle() {
return title;
}

public Item setTitle(String title) {
this.title = title;
return this;
}

public String getDesc() {
return desc;
}

public Item setDesc(String desc) {
this.desc = desc;
return this;
}

public String getHelp() {
return help;
}

public Item setHelp(String help) {
this.help = help;
return this;
}
}

CustomListAdapter.java

package com.prodevsblog.customlist;

import android.content.Context;
import android.support.design.widget.Snackbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class CustomListAdapter extends ArrayAdapter<Item> implements View.OnClickListener{

private ArrayList<Item> items;
Context ctx;

// View lookup cache
private static class ViewHolder {
TextView txtTitle;
TextView txtDesc;
ImageView help;
}

public CustomListAdapter(ArrayList<Item> items, Context ctx) {
super(ctx, R.layout.row, items);
this.items = items;
this.ctx=ctx;

}

@Override
public void onClick(View v) {
int position=(Integer) v.getTag();
Item item= getItem(position);
switch (v.getId()) {
case R.id.item_help:
Snackbar.make(v, item.getHelp(), Snackbar.LENGTH_LONG) .setAction("No action", null).show();
break;
}
}

private int lastPosition = -1;

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// Get the data item for this position
Item item = getItem(position);

ViewHolder viewHolder;
final View result;
// Check if an existing view is being reused, otherwise inflate the view
if (convertView == null) {
viewHolder = new ViewHolder();
LayoutInflater inflater = LayoutInflater.from(getContext());
convertView = inflater.inflate(R.layout.row, parent, false);
viewHolder.txtTitle = convertView.findViewById(R.id.txtTitle);
viewHolder.txtDesc = convertView.findViewById(R.id.txtDesc);
viewHolder.help = convertView.findViewById(R.id.item_help);

result=convertView;
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
result=convertView;
}

Animation animation = AnimationUtils.loadAnimation(ctx, (position > lastPosition) ? R.anim.up : R.anim.down);
result.startAnimation(animation);
lastPosition = position;

viewHolder.txtTitle.setText(item.getTitle());
viewHolder.txtDesc.setText(item.getDesc());
viewHolder.help.setOnClickListener(this);
viewHolder.help.setTag(position);

// Return the completed view
return convertView;
}
}

MainActivity.java

package com.prodevsblog.customlist;

import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

ArrayList<Item> items;
ListView listView;
private static CustomListAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
void init(){
listView = findViewById(R.id.list_view);
items= new ArrayList<>();
//Add some data to items
for(int i = 1 ; i <= 50 ; i++ ) {
items.add(
new Item()
.setId(i)
.setTitle("Item "+ i)
.setDesc("Description for "+i)
.setHelp("Help for "+ i)
);
}

adapter= new CustomListAdapter(items,getApplicationContext());

listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Item item= items.get(position);
Snackbar.make(view, item.getTitle(), Snackbar.LENGTH_LONG) .setAction("No action", null).show();
}
});
}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

<ListView
android:id="@+id/list_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

Row Anmiation

Animation when scrolled from up to down.

down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="@android:anim/decelerate_interpolator">
<translate
android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="-100%" android:toYDelta="0%"
android:duration="400" />
</set>

Animation when scrolled from bottom to up.

up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="@android:anim/decelerate_interpolator">
<translate
android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="100%" android:toYDelta="0%"
android:duration="400" />
</set>

If you have any problem with above code you can comment or simply download our working code for this project.

See More

Latest Photos