Create custom listview and bind with ArrayList (using adapter) in android

So in this article we will learn how to bind a ListView with JSONArray in Android. We are using Eclipse as reference IDE for this article.

  1. First of all we have to create new project. So open eclipse -> select New (from file menu) -> select Android Application Project -> type application name, project name, package name and select target sdk, theme etc and click next -> click next two times (use default selecting for these two steps) -> select blank activity and click Next again -> Enter name of your main activity and view. We are going to use default values that is MainActivity (activity) and activity_main (view)
  2. After step 1 you will get default project configured with blank activity. We will add ListView in our view file that is activity_main.xml
    <ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:listitem="@layout/list_item"
    android:dividerHeight="5dp"
    android:divider="#000000"></ListView>

     

  3. Create event class (if you want to bind your ListView with ArrayList)
    package com.edunyte.listdemo;
    public class Event {
    //TODO add vairble used for creating list
    private String title;
    private String day;
    private String month;
    private String location;
    
    public String getTitle() {
    return title;
    }
    
    public void setTitle(String title) {
    this.title = title;
    }
    
    public String getDay() {
    return day;
    }
    
    public void setDay(String day) {
    this.day = day;
    }
    
    public String getMonth() {
    return month;
    }
    
    public void setMonth(String month) {
    this.month = month;
    }
    
    public String getLocation() {
    return location;
    }
    
    public void setLocation(String location) {
    this.location = location;
    }
    }
    

     

  4. Create ListAdapter
    package com.edunyte.listdemo;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.Button;
    import android.widget.TextView;
    
    import java.util.ArrayList;
    
    import com.exponyte.listdemo.R;
    
    public class ListAdapter extends BaseAdapter {
    private ArrayList<Event> list;
    private Context context;
    
    public ListAdapter(Context context, ArrayList<event> list) {
    this.list = list;
    this.context = context;
    }
    
    @Override
    public int getCount() {
    return list.size();
    }
    
    @Override
    public long getItemId(int i) {
    return i;
    }
    
    @Override
    public Object getItem(int i) {
    return list.get(i);
    }
    
    @Override
    public View getView(int position, View contentView, ViewGroup viewGroup) {
    ViewHolder holder;
    if (contentView == null) {
    contentView = LayoutInflater.from(context).inflate(R.layout.list_item, viewGroup, false);
    holder = new ViewHolder();
    //TODO init variables of holder class
    holder.titleTextView = (TextView) contentView.findViewById(R.id.title_textview);
    holder.dayTextView = (TextView) contentView.findViewById(R.id.day_textview);
    holder.button = (Button) contentView.findViewById(R.id.button);
    //TODO handle button click event
    holder.button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
    // get position of item which is clicked
    int position = (Integer) view.getTag();
    //TODO handle click event
    }
    });
    contentView.setTag(holder);
    } else {
    holder = (ViewHolder) contentView.getTag();
    }
    // TODO set text to textview of list item
    Event event = list.get(position);
    holder.titleTextView.setText(event.getTitle());
    holder.dayTextView.setText(event.getDay());
    holder.button.setTag(position);
    
    return contentView;
    }
    
    public static class ViewHolder {
    public TextView titleTextView;
    public TextView dateTextView;
    public TextView locationTextView;
    public TextView dayTextView;
    public TextView monthTextView;
    public Button button;
    }
    }
    

     

  5. Create layout of list items
    <LinearLayout
    android:id="@+id/date_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient_red"
    android:orientation="vertical"
    android:padding="8dp">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="september"
    android:textAllCaps="true"
    android:textAppearance="@android:style/TextAppearance.Medium"
    android:textColor="@android:color/white"
    android:textStyle="bold" />
    
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="08"
    android:textAllCaps="true"
    android:textAppearance="@android:style/TextAppearance.Medium"
    android:textColor="@android:color/white"
    android:textSize="30sp"
    android:textStyle="bold" />
    
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="2016"
    android:textAllCaps="true"
    android:textAppearance="@android:style/TextAppearance.Medium"
    android:textColor="@android:color/white"
    android:textStyle="bold" />
    
    </LinearLayout>
    
    <Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:background="@drawable/ic_action_play"
    android:minHeight="10dp"
    android:minWidth="10dp" />
    
    <TextView
    android:id="@+id/title_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_toRightOf="@+id/date_container"
    android:text="WWE Raw"
    android:textAllCaps="true"
    android:textAppearance="@android:style/TextAppearance.Medium"
    android:textColor="@android:color/white"
    android:textStyle="bold" />
    
    <TextView
    android:id="@+id/location_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/title_textview"
    android:layout_alignStart="@+id/title_textview"
    android:layout_below="@+id/title_textview"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="4dp"
    android:text="Moline, IL"
    android:textAllCaps="true"
    android:textAppearance="@android:style/TextAppearance.Medium"
    android:textColor="@color/gray_light"
    android:textStyle="bold" />
    
    <TextView
    android:id="@+id/day_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/title_textview"
    android:layout_alignStart="@+id/title_textview"
    android:layout_below="@+id/location_textview"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="4dp"
    android:text="Moline, IL"
    android:textAllCaps="true"
    android:textAppearance="@android:style/TextAppearance.Medium"
    android:textColor="@color/gray_light"
    android:textStyle="bold" />

     

  6. Create ArrayList of Event class and ListAdapter in onCreate method of MainActivity.java
    adapter = new ListAdapter(getApplicationContext(), eventList);ListView listView = (ListView) findViewById(R.id.listView);
    listView.setAdapter(adapter);
    addEvents();
    

     

  7. Create addEvents method to add your events details in the ArrayList. For this example I am hard-coding entries but you can use any mother like reading from database or getting it from web service. You should keep only on thing in mind that is calling adapter.notifyDataSetChanged(); after adding all entries to the list.
    private void addEvents()
    {
    Event evt = new Event();
    evt.setDay("26");
    evt.setMonth("January");
    evt.setTitle("Event Title");
    evt.setLocation("Event Location");
    eventList.add(evt);
    evt.setDay("26");
    evt.setMonth("January");
    evt.setTitle("Event Title");
    evt.setLocation("Event Location");
    eventList.add(evt);
    evt.setDay("26");
    evt.setMonth("January");
    evt.setTitle("Event Title");
    evt.setLocation("Event Location");
    eventList.add(evt);
    evt.setDay("26");
    evt.setMonth("January");
    evt.setTitle("Event Title");
    evt.setLocation("Event Location");
    eventList.add(evt);
    evt.setDay("26");
    evt.setMonth("January");
    evt.setTitle("Event Title");
    evt.setLocation("Event Location");
    eventList.add(evt);
    evt.setDay("26");
    evt.setMonth("January");
    evt.setTitle("Event Title");
    evt.setLocation("Event Location");
    eventList.add(evt);
    evt.setDay("26");
    evt.setMonth("January");
    evt.setTitle("Event Title");
    evt.setLocation("Event Location");
    eventList.add(evt);
    }
Now run the project and see the if it is working or not. This sample might need some more work related to values.xml and drawable. You can download the complete working Eclipse project code from here
 

Leave a Reply

Your email address will not be published.