Android Programming

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.

Section 1 : CustomAdapter Class

This is our CustomAdapter class. It will subclass android.widget.ArrayAdapter.

It is our Adapter class.

    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

Our main activity.


    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

Our main activity's layout.

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

Good day.