Tuesday, February 5, 2013

Android CustomListView Example



ListView is a view group that displays a list of scrollable items. 
Here is a result of this tutorial:



This project is developed in Eclipse 4.2.0.

CustomlistviewActivity.java

package jitesh.example.customlistview;
 
import java.util.ArrayList;
import java.util.List; 

import jitesh.example.customlistview.R;
 
import android.os.Bundle; 
import android.app.Activity;
import android.content.Context;  
import android.view.View;
import android.widget.AdapterView; 
import android.widget.ListView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Toast;

public class CustomlistviewActivity extends Activity {

private ListView listViewFootballLegend;
private Context ctx;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_customlistview);        
        ctx=this;
List<FootballLegend> legendList= new ArrayList<FootballLegend>();
legendList.add(new FootballLegend("Pele","October 23, 1940 (age 72)","pele","brazil"));
legendList.add(new FootballLegend("Diego Maradona","October 30, 1960 (age 52)","maradona","argentina"));
legendList.add(new FootballLegend("Johan Cruyff","April 25, 1947 (age 65)","cruyff","netherlands"));
legendList.add(new FootballLegend("Franz Beckenbauer","September 11, 1945 (age 67)","beckenbauer","germany"));
legendList.add(new FootballLegend("Michel Platini","June 21, 1955 (age 57)","platini","france"));
legendList.add(new FootballLegend("Ronaldo De Lima","September 22, 1976 (age 36)","ronaldo","brazil"));

listViewFootballLegend = ( ListView ) findViewById( R.id.FootballLegend_list);
listViewFootballLegend.setAdapter( new FootballLegendListAdapter(ctx, R.layout.legend_row_item, legendList ) );
    
// Click event for single list row
listViewFootballLegend.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
FootballLegend o = (FootballLegend) parent.getItemAtPosition(position);  
Toast.makeText(CustomlistviewActivity.this, o.getName().toString(), Toast.LENGTH_SHORT).show();
}
});
    } 
}


FootballLegend.java

package jitesh.example.customlistview;
public class FootballLegend {
public FootballLegend(String name, String born, String image, String nation) {
super();
this.name = name;
this.born = born;
this.image = image;
this.nation = nation;
}
private String name;
private String born;
private String image;
private String nation;

public String getName() {
return name;
}
public void setName(String nameText) {
name = nameText;
}
public String getNick() {
return born;
}
public void setNick(String born) {
this.born = born;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public String getNation() {
return nation;
}
public void setNation(String image) {
this.image = nation;
}
}


FootballLegendListAdapter.java

package jitesh.example.customlistview;
import java.util.List;

import jitesh.example.customlistview.R;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class FootballLegendListAdapter extends ArrayAdapter<FootballLegend> {
private int resource;
private LayoutInflater inflater;
private Context context;
public FootballLegendListAdapter ( Context ctx, int resourceId, List<FootballLegend> objects) {
super( ctx, resourceId, objects );
resource = resourceId;
inflater = LayoutInflater.from( ctx );
context=ctx;
}
@Override
public View getView ( int position, View convertView, ViewGroup parent ) { 
convertView = ( RelativeLayout ) inflater.inflate( resource, null ); 
FootballLegend Legend = getItem( position );
TextView legendName = (TextView) convertView.findViewById(R.id.legendName);
legendName.setText(Legend.getName());
 
TextView legendBorn = (TextView) convertView.findViewById(R.id.legendBorn);
legendBorn.setText(Legend.getNick());
 
ImageView legendImage = (ImageView) convertView.findViewById(R.id.legendImage);
String uri = "drawable/" + Legend.getImage();
   int imageResource = context.getResources().getIdentifier(uri, null, context.getPackageName());
   Drawable image = context.getResources().getDrawable(imageResource);
   legendImage.setImageDrawable(image);
   
   ImageView NationImage = (ImageView) convertView.findViewById(R.id.Nation);
uri = "drawable/" + Legend.getNation();
   imageResource = context.getResources().getIdentifier(uri, null, context.getPackageName());
   image = context.getResources().getDrawable(imageResource);
   NationImage.setImageDrawable(image);

return convertView;
}
}


res/layout/activity_customlistview.xml

<?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" >

    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Foolball Legends"
        android:textColor="#008000"
        android:textSize="25dp"
        android:layout_margin="3dp"
        />
    <ListView
        android:id="@+id/FootballLegend_list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:paddingTop="5dp" >
    </ListView>
    
</LinearLayout>


/res/layout/legend_row_item.xml


<?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="wrap_content"
    android:background="@drawable/list_selector"
    android:orientation="horizontal"
    android:padding="5dip" >
 
    <!--  ListRow Left side Thumbnail image -->
    <LinearLayout android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dip"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip"> 
        <ImageView
            android:id="@+id/legendImage"
            android:layout_width="50dip"
            android:layout_height="50dip" /> 
    </LinearLayout>
  
    <TextView
        android:id="@+id/legendName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:text="Rihanna Love the way lie"
        android:textColor="#040404"
        android:typeface="sans"
        android:textSize="15dip"
        android:textStyle="bold"/>
 
    <TextView
        android:id="@+id/legendBorn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/legendName"
        android:textColor="#343434"
        android:textSize="10dip"
        android:layout_marginTop="1dip"
        android:layout_toRightOf="@+id/thumbnail"  />
  
    <ImageView
        android:id="@+id/Nation"
        android:layout_width="45dp"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="5dp"
        android:layout_centerVertical="true" />
 
</RelativeLayout>

/res/drawable
/list_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selector style for listrow -->
<item 
 android:state_selected="false"
    android:state_pressed="false" 
    android:drawable="@drawable/gradient_bg" />
<item android:state_pressed="true" 
    android:drawable="@drawable/gradient_bg_hover" />
<item android:state_selected="true"
 android:state_pressed="false" 
    android:drawable="@drawable/gradient_bg_hover" />
</selector>


/res/drawable
/
gradient_bg


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <!--  Gradient Bg for listrow -->
  <gradient
      android:startColor="#78ADC9"
      android:centerColor="#417592"
      android:endColor="#DC5EE5"
      android:angle="270" />
</shape>


/res/drawable
/
gradient_bg_hover

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <!-- Gradient BgColor for listrow Selected -->
  <gradient
      android:startColor="#DF6DB2"
      android:centerColor="#447F70"
      android:endColor="#498742"
      android:angle="270" />
</shape>

download the code from the link CustomListView

No comments:

Post a Comment