Android Custom ListView Adapter Example

ListView in android arrange views vertically scrollable automatically. If you want to display your items vertically and make it scrollable the ListView is the best choice but customizing ListView appearance get little tricky.

Now we are going to customize the background color and put icon on the left corner of each item.


Let's create our MainActivity.java.

package com.example.customlistview;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ListView;

public class MainActivity extends Activity {

    String label[] = {"GREEN","YELLOW","GRAY","LIGHT GRAY","WHITE","BLUE"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
       
        //*** SET THE CONTENT VIEW
        LinearLayout contentView = new LinearLayout(this);
        contentView.setOrientation(LinearLayout.VERTICAL);
        
        //*** CREATE OUR LISTVIEW
        ListView listView = new ListView(this);
        listView.setAdapter(new CustomArrayAdapter(this, label));
        
        //*** ADD OUR LISTVIEW TO CONTENT VIEW
        contentView.addView(listView);
        
        
        //*** SET CONTENT VIEW
        setContentView(contentView);
    }
}

And now our CustomArrayAdapter.java

package com.example.customlistview;

import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class CustomArrayAdapter extends ArrayAdapter<String> {

 Context context;
 String label[];
 
 public CustomArrayAdapter(Context context, String label[]) {
  super(context,0,label);
  // TODO Auto-generated constructor stub
  
  this.context = context;
  this.label = label;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
  // TODO Auto-generated method stub
  
  String label = this.getItem(position);
  CustomLinearLayout customLayout = (CustomLinearLayout) convertView;
  
  //*** CHECK IF customLayout is NULL
  if(customLayout == null){
   
   customLayout = new CustomLinearLayout(context);
   
   
  }
  
  //*** IF customLayout IS NOT NULL SET THE TEXT AND BACKGROUND COLOR
  if(customLayout !=null){
   
   customLayout.textView.setText(label);
   customLayout.setBackgroundColor(0);
   
   if(label.equalsIgnoreCase("GREEN")){
    
    customLayout.setBackgroundColor(Color.GREEN);
    
   }else if(label.equalsIgnoreCase("YELLOW")){
    
    customLayout.setBackgroundColor(Color.YELLOW);
    
   }else if(label.equalsIgnoreCase("GRAY")){
    
    customLayout.setBackgroundColor(Color.GRAY);
    
   }else if(label.equalsIgnoreCase("LIGHT GRAY")){
    
    customLayout.setBackgroundColor(Color.LTGRAY);
    
   }else if(label.equalsIgnoreCase("BLUE")){
    
    customLayout.setBackgroundColor(Color.BLUE);
    
   }
  }
  
  
  return customLayout;
 }
 
 
 /*
  * OUR CUSTOM LINEARLAYOUT
  * 
  */
 class CustomLinearLayout extends LinearLayout{
  Context context;
  protected ImageView icon;
  protected TextView textView;
  
  public CustomLinearLayout(Context context) {
   super(context);
   // TODO Auto-generated constructor stub
   this.context = context;
   this.icon = new ImageView(this.context);
   this.textView = new TextView(this.context);
   
   
   icon.setImageResource(R.drawable.home);
   
   
   this.addView(icon);
   this.addView(textView);
   
   
   this.setPadding(0, 15, 0, 15);
   
  
   
  }
   
 }
}

We used LinearLayout as convertView in our custom ArrayAdapter just for simple layout design but if you want we can also use other layout like RelativeLayout, FrameLayout, TableLayout and other. We can also add more view in convertView base on what we need.

Download Source Code

Happy coding everyone!!!