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.

Download Code