Android Custom ListView

In android, we can populate the listView with single textView. But what if we want button, images etc. in each item of the listView. For achieving this, we have to implement a customized adapter.

Let's take an example where listView contains name and a delete button for each name like this-

1. Create a new project in android studio, fill all the necessary details.
2. Open activity_main.xml, and add a listView in the code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.gunjan.andriodcodesnippets.MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/lv_demo"/>
</RelativeLayout>

3. Now, add a new xml file representing the layout of each item of the listView. 
Add listview_row.xml like this res => layout => new => layout resource file. Add the following code-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp">
    <TextView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:id="@+id/tv_row"/>
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ib_delete"
        android:src="@android:drawable/ic_delete"
        android:background="@null"/>
</LinearLayout>

4. Now, add a new java class CustomAdapter.java and  type the following code-

public class CustomAdapter extends BaseAdapter {

    ArrayList<String> arrayListName;
    Context context;
    private LayoutInflater inflater;

    public CustomAdapter(Context context, ArrayList<String> arrayListName){
        this.context=context;
        this.arrayListName=arrayListName;
        inflater=LayoutInflater.from(context);
    }
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        LinearLayout ll=(LinearLayout) inflater.inflate(R.layout.listview_row,parent,false);

        TextView tv_row=(TextView)ll.findViewById(R.id.tv_row);
        ImageButton ib_delete=(ImageButton)ll.findViewById(R.id.ib_delete);

        //Get name from arrayList
        String currentName=arrayListName.get(position);
        
        //Assign name to the textView
        tv_row.setText(currentName);
        
        //Delete name on click of delete button
        ib_delete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                arrayListName.remove(position);
                notifyDataSetChanged();
            }
        });
      
        ll.setTag(position);
        return ll;
    }
    @Override
    public int getCount() {
        return arrayListName.size();
    }
    @Override
    public Object getItem(int position) {
        return null;
    }
    @Override
    public long getItemId(int position) {
        return 0;
    }
}

5. Open MainActivity.java and type the following code-

public class MainActivity extends AppCompatActivity {

    ListView lv_demo;
    CustomAdapter customAdapter;
    ArrayList<String> arrayListName;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lv_demo=(ListView)findViewById(R.id.lv_demo);
        arrayListName=new ArrayList<>();
        getNames();
        customAdapter=new CustomAdapter(this,arrayListName);
        lv_demo.setAdapter(customAdapter);
    }
    //Populate arrayList
    private void getNames() {
        arrayListName.add("Jane");
        arrayListName.add("Ace");
        arrayListName.add("Sam");
        arrayListName.add("Rachel");
        arrayListName.add("Mark");
        arrayListName.add("Matt");
        arrayListName.add("Michael");
        arrayListName.add("Nancy");
        arrayListName.add("Max");
    }
}

6. Run the code.