Android ListActivity - With Images,Text and OnItemClick \[ArrayAdapter\]

October 13, 2017 Oclemy Android Activity 2 minutes, 43 seconds

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.

```java 

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

   

Good day.

Comments