Wednesday, August 13, 2014

how to make a customized list view with images and text

1) Create a new Android project go to
    file-> new Android application->
    Type the Application name as:- ListView
    package name as:-com.example.listview
    then click next


2) Then follow these steps:-


     click next
3) 

click next

4)


5) click next and change the Activity name according to your need in my case i am using the default 
name as MainActivity


and click finish

6) The layout file will open  


    click to activity_main.xml next to graphical layout tab
    and write this code
    
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:orientation="vertical" >

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
     />
    </LinearLayout>

7)  Create one more Xml file by right clicking on layout folder->New->Others
     ->Android Xml file  name it as list_item  and write this code
      
      <?xml version="1.0" encoding="utf-8"?>
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" >

     <ImageView
        android:id="@+id/icon"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:contentDescription="@string/image"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/icon"
        android:paddingBottom="10dp"
        android:textColor="#CC0033"
        android:textSize="16sp" />

    </RelativeLayout>

8)  Now click on source folder (src folder) go to the package open MainActivity.java
     and write the following code.
      
    package com.example.listview;


    import java.util.ArrayList;
    import java.util.List;
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemClickListener;
    import android.widget.ListView;
    import android.widget.Toast;


   public class MainActivity extends Activity implements OnItemClickListener{

public static final String[] itemTitles = new String[] { "Twitter",
"Facebook","Linkedin" ,"ImportContact", "Google","Hello Android"};
        
        //  Create the drawable folder in the res folder and put all these images in that particular folder

public static final Integer[] itemImages = { R.drawable.twitter_icon,
R.drawable.fb_icon, R.drawable.linkedin_logo,  
                R.drawable.contact_icon,R.drawable.ic_launcher,R.drawable.ic_launcher };

      
ListView listView;
List<Item> listItems;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

listItems = new ArrayList<Item>();
for (int i = 0; i < itemTitles.length; i++) {
Item item = new Item(itemImages[i], itemTitles[i]);
listItems.add(item);
}

listView = (ListView) findViewById(R.id.list);
CustomArrayAdapter adapter = new CustomArrayAdapter(this,
R.layout.list_item, listItems);
listView.setAdapter(adapter);
listView.setOnItemClickListener(this);
}

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
// TODO Auto-generated method stub
Toast.makeText(this,"Clicked:-"+itemTitles[arg2],Toast.LENGTH_SHORT).show();
 }
   }

9) Create Other class in the same package name it as Item.java
     and write this code
     
    package com.example.listview;

    public class Item {
   
int imageIds;
String title;
public Item(int imageIds, String title) {
super();
this.imageIds = imageIds;
this.title = title;
}
public int getImageIds() {
return imageIds;
}
public void setImageIds(int imageIds) {
this.imageIds = imageIds;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}

@Override
public String toString() {
return "Item [title=" + title + "]";
}
   }
 
10) Create Other class in the same package name it as CustomArrayAdapter.java
     and write this code
     
     package com.example.listview;

     import java.util.List;
     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 CustomArrayAdapter extends ArrayAdapter<Item> {
    
    Context context;
 
    public CustomArrayAdapter(Context context, int resourceId,
            List<Item> items) {
        super(context, resourceId, items);
        this.context = context;
    }
     
    /*private view holder class*/
    private class ViewHolder {
        ImageView imageView;
        TextView txtTitle;       
    }
     
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        Item itemList = getItem(position);
         
        LayoutInflater mInflater = (LayoutInflater) context
                .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        if (convertView == null) 
      // Checking the convert view against null helps in reusing the resources instead of creating them every time
       {    
            convertView = mInflater.inflate(R.layout.list_item, null);
            holder = new ViewHolder();
            holder.txtTitle = (TextView) convertView.findViewById(R.id.title);
            holder.imageView = (ImageView) convertView.findViewById(R.id.icon);
            convertView.setTag(holder);
        } else
            holder = (ViewHolder) convertView.getTag();                 
     
        holder.txtTitle.setText(itemList.getTitle());
        holder.imageView.setImageResource(itemList.getImageIds());
         
        return convertView;
      }
    }
    
11) Your done now Compile the code run it on emulator and check the results.

     
     
    

No comments:

Post a Comment