Create Custom ListView in Androd

What is Custom ListView:

custom list view means custom Layouts and show custom Item in listview. in simple listview use only text or image show in list using ArrayAdapter but in custom listview we use CustomAdapter.

custom listview may be many image or text.

Custom ListView in Android

Why Use Custom Listview: 

as we discuss simple listview contain only simple layout so we need custom layout for custom listview. custom listview contain images and text and many more.

Custom ListView:

Create Custom ListView by using Custom Adapter and Model Class(For Set and Get Value.Getter Setter Class) and first set value then add to Custom Array and set to ListView 

Model Class:

Model Class(Getter Setter Classs) creare Constructor for intialize and set value  in this ListView show single image and single text, so model class of this is:


public class ModelClass {
int image = 0;
String text = "";

public int getImage() {
            return image:
}

public void setImage(int image) {
this.image = image;
}

public String getText() {
return text;
}

public void setText(String text) {
this.text = text;
}

public ModelClass(String text_, int image_) {
// TODO Auto-generated constructor stub
text = text_;
image = image_;
}

CustomAdapter:

for custom adapter create XML file for show view like create Layout for show image and text.it will repeat in listview.

public class CustomAdapter extends ArrayAdapter<ModelClass> {

Context context;

int Layout = 0;

ArrayList<ModelClass> arrayOfList;

public CustomAdapter(Context context_, int resource,

ArrayList<ModelClass> objects) {

super(context_, resource, objects);

// TODO Auto-generated constructor stub

context = context_;

Layout = resource;

arrayOfList = objects;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

// TODO Auto-generated method stub

ViewHolder viewHolder = null;

if (convertView == null) {

viewHolder = new ViewHolder();

                      /// inflate custom layout by id

LayoutInflater inflater = (LayoutInflater) context

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

convertView = inflater.inflate(Layout, null);

                       // find custom layouts elements by their ids

viewHolder.textView = (TextView) convertView

.findViewById(R.id.textView);

viewHolder.imgView = (ImageView) convertView

.findViewById(R.id.imgView);

convertView.setTag(viewHolder);

} else {

viewHolder = (ViewHolder) convertView.getTag();

}

                 // set value in custom layout elements 

viewHolder.textView.setText(arrayOfList.get(position).getText());

viewHolder.imgView.setBackgroundResource(arrayOfList.get(position)

.getImage());

return convertView;

}

class ViewHolder {

TextView textView;

ImageView imgView;

}

}

Main Activity:

In this  activity Fill CustomArray and set in Custom Adapter then set in ListView:

public class MainActivity extends Activity {

ListView listView;

private ArrayList<ModelClass> arrayOfList;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main_layouts);

listView=(ListView) findViewById(R.id.listView);

arrayOfList=new ArrayList<ModelClass>();

arrayOfList.add(new ModelClass("Hello", R.drawable.ic_launcher));

arrayOfList.add(new ModelClass("Iphone", R.drawable.ic_launcher));

arrayOfList.add(new ModelClass("Wondow", R.drawable.ic_launcher));

CustomAdapter adapter=new CustomAdapter(MainActivity.this, R.layout.custom_layouts, arrayOfList);

listView.setAdapter(adapter);

}

}

Now Layouts Of ListView and Custom Adapter:

Custom Adapter XML View:contain only image and text

Layout For Custom Adapter

<RelativeLayout

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    

    <ImageView 

        android:id="@+id/imgView"

        android:layout_height="100dp"

        android:layout_width="100dp"

        android:layout_alignParentLeft="true"

        android:layout_marginTop="10dp"

        android:layout_centerInParent="true"

        android:layout_marginLeft="10dp"

        android:src="@drawable/ic_launcher"/>

    

    <TextView 

        android:id="@+id/textView"

        android:layout_height="wrap_content"

        android:layout_width="wrap_content"

        android:layout_marginLeft="20dp"

        android:layout_marginTop="10dp"

        android:layout_centerInParent="true"

        android:layout_toRightOf="@+id/imgView"/>

</RelativeLayout>

Main Activity XML View:

show ListView  in main layout. 

<RelativeLayout

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

    <ListView

        android:id="@+id/listView"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent" >

    </ListView>

</RelativeLayout>

Download Here:  Click Here to Download Complete Source Code

Note: if any issue to implement then please comments.

Visit For More Tutorials in Android: InvokeCode

Follow Us On Facebook:  InvokeCode

Thank You !!