Android ListActivity – With Images,Text and OnItemClick [ArrayAdapter]

Android ListActivity – With Images,Text and OnItemClick [ArrayAdapter]







Android ListActivity Images Text

This is an android custom listview tutorial.How to show images and text in a listview.We are using arrayadapter as our adapter of choice.We also see how to handle custom listview itemclicks.

Cheers.

Section 1 : CustomAdapter Class

  • Subclasses android.widget.arrayadapter

 

package com.tutorials.customlistviewarrayadapter;
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 CustomAdapter extends ArrayAdapter<String>{
  final Context c;
  String[] values;
  //CONSTRUCTOR
  public CustomAdapter(Context context, String[] values) {
    super(context,R.layout.activity_main, values);
    this.c=context;
    this.values=values;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater inflator=(LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    //INFLATE OUR XML LAYOUT TO ROW
    View row=inflator.inflate(R.layout.activity_main, parent,false);
    //DECLARE FIELDS CONTAINED IN OUR LAYOUR
    TextView tv=(TextView) row.findViewById(R.id.textView1);
    ImageView img=(ImageView) row.findViewById(R.id.imageView1);
    //GET AN ITEM FROM ARRAY
    String item=values[position];
    //DYNAMICALLY SET TEXT AND IMAGES DEPENDING ON ITEM IN ARRAY
    if(item.equals("android"))
    {
      tv.setText(item+" Programming language");
      img.setImageResource(R.drawable.android);
    }else if(item.equals("java"))
    {
      tv.setText(item+" Programming language");
      img.setImageResource(R.drawable.java);
    }else if(item.equals("c#"))
    {
      tv.setText(item+" Programming language");
      img.setImageResource(R.drawable.csharp);
    }else if(item.equals("mysql"))
    {
      tv.setText(item+" Database language");
      img.setImageResource(R.drawable.mysql);
    }else if(item.equals("access"))
    {
      tv.setText(item+" Database language");
      img.setImageResource(R.drawable.access);
    }else if(item.equals("excel"))
    {
      tv.setText(item+" Microsoft");
      img.setImageResource(R.drawable.excel);
    }
    return row;
  }
}

 

 

Section 2 : MainActivity

 

package com.tutorials.customlistviewarrayadapter;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends ListActivity {
  String[] languages={"android","java","c#","mysql","access","excel"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
      //  setContentView(R.layout.activity_main);
        CustomAdapter adapter=new CustomAdapter(this, languages);
        setListAdapter(adapter);
    }
    @Override
    protected void onListItemClick(ListView l, View v, int position, long id) {
    	// TODO Auto-generated method stub
    	super.onListItemClick(l, v, position, id);
    	String item=(String) getListAdapter().getItem(position);
    	Toast.makeText(getApplicationContext(),"Welcome to "+ item+" Programming language", Toast.LENGTH_SHORT).show();
    }
}

 

 

Section 3 : Layouts

ActivityMain.xml

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="17dp"
        android:src="@drawable/ic_launcher" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/imageView1"
        android:layout_marginLeft="16dp"
        android:layout_toRightOf="@+id/imageView1"
        android:text="TextView" />
</RelativeLayout>

 

 

Section 4 : Results

ListActivity ListView With Images and Text

ListActivity ListView With Images and Text



    COMMENTS