Multiple Clickable Zones ( Thumb imageview + textview + listview row ) w. Base Adapter

Question

Long story short im trying to add the clickable functionality from the top half of the code below to the custom adapter below.

I found this tut(modified version of the source in the top part of the code below-currently not working):

http://wiresareobsolete.com/wordpress/2011/08/clickable-zones-in-listview-items/

but, my entire project uses the custom adapter from this tut(custom adapter at the bottom of the code below): http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/

All I would like to do is maintain my ability to use my existing data structure(ArrayList w. hash maps ) via a listview that will allow me to click on

*The thumbnail imageview *The bold title text(in the image its the textview that reads "someone like you" *the list row ( all the area besides the imageview & textview)

I would prefer to keep my custom adapter from the second link and just add the functionality from the first link, but if that complicates things im cool with suggestions to anything that allows me to plug in my existing data set ( Arraylist>) while providing the described functionality.

import java.util.ArrayList;
import java.util.HashMap;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.Toast;

public class MyActivity extends Activity implements AdapterView.OnItemClickListener, View.OnClickListener
{

    // All  static variables
    // XML node keys
    static final String KEY_FEED =  "feed";
    // parent node
    static final String KEY_UID_FK = "uid_fk";  
    static final String KEY_FIRST_NAME = "first_name";
    static final String KEY_LAST_NAME = "last_name";
    static final String KEY_NAME =  "name";
    static final String KEY_MESSAGE = "message";
    static final String KEY_CREATED = "created";
    static final String KEY_THUMB_URL = "thumb_img"; 
    private static final String TAG = "MyApp"; 
    ListView list;
    LazyAdapter adapter;
    JSONArray feed = null;
    Button add;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        ListView list = new ListView(this);
        setContentView(list);



        ArrayList<HashMap<String, String>> feedList = new ArrayList<HashMap<String, String>>();

        // Creating JSON Parser instance
        JSONParser jParser = new JSONParser();

        // getting JSON string from URL
        JSONObject json = jParser.getJSONFromUrl(URL);

        try {
         // Getting Array of Contacts
         feed = json.getJSONArray(KEY_FEED);

         // looping through All Contacts
         for(int i = 0; i < feed.length(); i++){
          JSONObject c = feed.getJSONObject(i);

          // Storing each json item in variable
          String uid = c.getString(KEY_UID_FK);
          String first_name = c.getString(KEY_FIRST_NAME);
          String last_name = c.getString(KEY_LAST_NAME);
          String name = first_name + last_name;
          String http = "http://10.0.2.2/CI_BUHZ/IMGS/";
          String base_url = c.getString(KEY_THUMB_URL);
          String thumb_url = http + base_url;
          String message = c.getString(KEY_MESSAGE);
          String created = c.getString(KEY_CREATED);


          // creating new HashMap
          HashMap<String, String> map = new HashMap<String, String>();

          // adding each child node to HashMap key => value
          map.put(KEY_UID_FK, uid);
          map.put(KEY_NAME, name);
          map.put(KEY_MESSAGE, message);
          map.put(KEY_CREATED, created);
          map.put(KEY_THUMB_URL, thumb_url);


          // adding HashList to ArrayList
          feedList.add(map);
         }
        } catch (JSONException e) {
         e.printStackTrace();
        }

           Log.i(TAG, "I am logging something informational!");  


        //Supply this adapter with either R.layout.row_button, R.layout.row_view, or R.layout.row_view_noparent
        ArrayAdapter<HashMap<String, String>> adapter = new ArrayAdapter<HashMap<String,String>>(this, R.layout.row_view,
feedList) {
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                View row =  super.getView(position, convertView, parent);

                View left = row.findViewById(R.id.left);
                left.setTag(position);
                left.setOnClickListener(MyActivity.this);
                View text = row.findViewById(R.id.text);
                text.setTag(position);
                text.setOnClickListener(MyActivity.this);

                return row;
            }
        };

        list.setAdapter(adapter);
        list.setOnItemClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch(v.getId()) {
        case R.id.left:
            Toast.makeText(this, "Left Accessory "+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        case R.id.text:
            Toast.makeText(this, "text Accessory "+v.getTag(), Toast.LENGTH_SHORT).show();
            break;
        default:
            break;
        }
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
        Toast.makeText(this, "Item Click "+position, Toast.LENGTH_SHORT).show();
    } }

//previously I was using this custom adapter that extends base adapter: 


import java.util.ArrayList;
import java.util.HashMap;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;





public class LazyAdapter extends BaseAdapter {

    private Activity activity;
    private ArrayList<HashMap<String, String>> data;
    private static LayoutInflater inflater=null;
    public ImageLoader imageLoader; 

    public LazyAdapter(Activity a, ArrayList<HashMap<String, String>> d) {
        activity = a;
        data=d;
        inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        imageLoader=new ImageLoader(activity.getApplicationContext());
    }

    public int getCount() {
        return data.size();
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        View vi=convertView;
        if(convertView==null)
            vi = inflater.inflate(R.layout.list_row, null);

        TextView name = (TextView)vi.findViewById(R.id.name); // title
        TextView message = (TextView)vi.findViewById(R.id.message); // artist name
        TextView created = (TextView)vi.findViewById(R.id.created); // duration
        ImageView thumb_image=(ImageView)vi.findViewById(R.id.list_image); // thumb image

        HashMap<String, String> update = new HashMap<String, String>();
        update = data.get(position); 

        // Setting all values in listview
        name.setText(update.get("name"));
        message.setText(update.get("message"));
        created.setText(update.get("created"));
        imageLoader.DisplayImage(update.get("thumb_url"), thumb_image);

        return vi;
    }
}

from this tutorial : http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/

Answer 1

Ruware was nice enough to do a Google Hangout with me to help me solve my problem. Extremely embarrassed I couldn't manage to figure this out myself:

Step 1. Import dl the project from link 2 in my original description & import it into Eclipse.

Step 2. LazyAdapter Class w. Clickable Imageview & Textview - Simply replace the lazy adapter from link 2 in my original description with the code below:

import java.util.ArrayList;
import java.util.HashMap;

import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;





public class LazyAdapter extends BaseAdapter {

    private Activity activity;
    private ArrayList<HashMap<String, String>> data;
    private static LayoutInflater inflater=null;
    public ImageLoader imageLoader; 

    public LazyAdapter(Activity a, ArrayList<HashMap<String, String>> d) {
        activity = a;
        data=d;
        inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        imageLoader=new ImageLoader(activity.getApplicationContext());
    }

    public int getCount() {
        return data.size();
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        View vi=convertView;
        if(convertView==null)
            vi = inflater.inflate(R.layout.list_row, null);

        TextView name = (TextView)vi.findViewById(R.id.name); // title
        TextView message = (TextView)vi.findViewById(R.id.message); // artist name
        TextView created = (TextView)vi.findViewById(R.id.created); // duration
        ImageView thumb_image=(ImageView)vi.findViewById(R.id.list_image); // thumb image

        HashMap<String, String> update = new HashMap<String, String>();
        update = data.get(position); 

        // Setting all values in listview
        name.setText(update.get("name"));
        message.setText(update.get("message"));
        name.setOnClickListener(new myOnClickListener(position));
        created.setText(update.get("created"));
        imageLoader.DisplayImage(update.get("thumb_url"), thumb_image);
        thumb_image.setOnClickListener(new myOnClickListener(position));

        return vi;
    }

    public class myOnClickListener implements OnClickListener{
        private int position;
        public myOnClickListener(int position){
            this.position=position;
        }
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub


            HashMap<String, String> update = new HashMap<String, String>();
            update = data.get(position); 
            Log.d("Testing Click", update.get("message"));
        }

    }
}

Step 3. list_row.xml - Replace the list_row layout w. the XML below:

android:layout_alignParentLeft="true" android:layout_marginRight="5dip"> android:layout_width="50dip" android:layout_height="50dip" android:src="@drawable/default_thumb"/>

<TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/thumbnail"
    android:layout_toRightOf="@+id/thumbnail"
    android:text="Chuck Kelly"
    android:textColor="#040404"
    android:typeface="sans" 
    android:textSize="15dip"
    android:textStyle="bold"/>


<TextView
    android:id="@+id/message"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/name"
    android:textColor="#343434"
    android:textSize="10dip"
    android:layout_marginTop="1dip"
    android:layout_toRightOf="@+id/thumbnail"
    android:text="This is a status Update" />


<TextView
    android:id="@+id/created"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/message"
    android:layout_below="@+id/message"
    android:layout_marginRight="5dip"
    android:text="5:45"
    android:textColor="#10bcc9"
    android:textSize="10dip"
    android:textStyle="bold" />



 <ImageView
     android:id="@+id/close"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentRight="true"
     android:layout_alignParentTop="true"
     android:src="@drawable/closeicon"
     android:visibility="invisible" />

You now have a listview w. click-able views in each row that also allows you to set the value of multiple views in each row similar to many of the popular social networks ( facebook , twitter , path ) Thanks again to Ruware for taking the time to help me with this.

Answer 2

If you set your parts of row as focusable (android:focusable="true") (default) than OnItemClickListener for ListView does not respond.

Try setting them all to false