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

Total Views :
2,173




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.