Custom Listview images With Refresh adapter

Custom Listview images With Refresh adapter



In this tutorial we will learn to implement android custom listview which contains images and textual data. This tutorial presents an android listview with image example. Here you will learn to create your own custom adapter with the help of ArrayAdapter and refresh the list when you add new items


MainActivity.java


package com.example.customlist;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ListView;

public class MainActivity extends Activity {

Button adButton;

// String color_names[] = { "red", "green", "blue", "yellow", "pink",
// "brown" };
/*
* Integer image_id[] = { R.drawable.ic_launcher, R.drawable.ic_launcher,
* R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher,
* R.drawable.ic_launcher };
*/

ArrayList<String> color_names = new ArrayList<>();
ArrayList<Integer> image_id = new ArrayList<>();
Customlistadapter adapter ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
color_names.add("red");
color_names.add("green");
color_names.add("blue");
color_names.add("yellow");
color_names.add("pink");

image_id.add(R.drawable.ic_launcher);
image_id.add(R.drawable.ic_launcher);
image_id.add(R.drawable.ic_launcher);
image_id.add(R.drawable.ic_launcher);
image_id.add(R.drawable.ic_launcher);

adapter = new Customlistadapter(this, image_id,
color_names);
ListView lv = (ListView) findViewById(R.id.listView);
lv.setAdapter(adapter);

adButton = (Button) findViewById(R.id.addbtn);
adButton.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub

color_names.add("NEW VALUSE ADDED");
image_id.add(R.drawable.ic_launcher);
adapter.notifyDataSetChanged();
}
});


}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}


Customlistadapter.java



package com.example.customlist;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
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 Customlistadapter extends ArrayAdapter {
/* String[] color_names;
Integer[] image_id;*/
Context context;
private ArrayList<String> color_names;
private ArrayList<Integer> image_id;

/* public Customlistadapter(Activity context, Integer[] image_id, String[] text) {
super(context, R.layout.list_row, text);
// TODO Auto-generated constructor stub
this.color_names = text;
this.image_id = image_id;
this.context = context;
}*/

public Customlistadapter(MainActivity context,
ArrayList<Integer> image_id2, ArrayList<String> color_names2) {


super(context, R.layout.list_row, color_names2);
// TODO Auto-generated constructor stub
this.color_names = color_names2;
this.image_id = image_id2;
this.context = context;

// TODO Auto-generated constructor stub
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View single_row = inflater.inflate(R.layout.list_row, null, true);
TextView textView = (TextView) single_row.findViewById(R.id.textView);
ImageView imageView = (ImageView) single_row
.findViewById(R.id.imageView);
textView.setText(color_names.get(position));
imageView.setImageResource(image_id.get(position));
return single_row;
}
}


actviy_main .xml

<RelativeLayout 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"
    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=".MainActivity" >

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >
    </ListView>

    <Button
        android:id="@+id/addbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/listView"
        android:layout_below="@+id/listView"
        android:layout_marginTop="17dp"
        android:text="ADD" />

</RelativeLayout>



list_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="40dp"
        android:text="TextView" />

</LinearLayout>


Download Full source code from here