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. Read more about ArrayAdapter here.

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. It will subclass the ListActivity class.

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

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post