How to implement list view with two parallel imageview in a row

Question

Well I do not know what should be the proper title for the question , but my problem is quite amazing, do not know is it possible or not. Here is my question

I have series of images and I want to set them in a ListView. following is a ListView row Xml.(named anim_list_row)

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="100"
    >


    <ImageView
        android:layout_width="0dp"
        android:layout_height="350dp"
        android:scaleType="fitXY"
        android:id="@+id/iv_dummy_left"
        android:layout_marginLeft="5dp"
        android:layout_weight="50"/>

    <ImageView
        android:layout_width="0dp"
        android:layout_height="350dp"
        android:scaleType="fitXY"
        android:id="@+id/iv_dummy_right"

        android:layout_weight="50"
        android:layout_marginRight="5dp"/>
</LinearLayout>

in this you can see that I want to set the 2 different images in two different let say left and right ImageView. Following is my adapter class

public class MListAdapter extends BaseAdapter {


private Context context;
private ArrayList<AnimListItems> mAnimListItems;

public MListAdapter(Context context, ArrayList<AnimListItems> mAnimListItems){
    this.context = context;
    this.mAnimListItems = mAnimListItems;
}


@Override
public int getCount() {
    return mAnimListItems.size();
}

@Override
public Object getItem(int position) {
    return navDrawerItems.get(position);
}

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        LayoutInflater mInflater = (LayoutInflater)
                context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        convertView = mInflater.inflate(R.layout.anim_list_row, null);
    }

    ImageView imgIconLeft = (ImageView) convertView.findViewById(R.id.iv_dummy_left);
    ImageView imgIconRight = (ImageView) convertView.findViewById(R.id.iv_dummy_right);
    //TextView txtTitle = (TextView) convertView.findViewById(R.id.title);


    imgIconLeft.setImageResource(navDrawerItems.get(position).getIcon());
     //if I do not do +1 here it sets same image to both left and right ImageView 
    imgIconRight.setImageResource(navDrawerItems.get(position+1).getIcon());
    // txtTitle.setText(navDrawerItems.get(position).getTitle());



    return convertView;
}

}

so here is problem this list view is working but it is assigning the same images to both ImageView in the row. and if I do +1 as following

imgIconRight.setImageResource(navDrawerItems.get(position+1).getIcon())

then it helps in changing the image view at right side in the row, but the 2nd row repeat the image in its first imageview (I mean the image in the left ImageView of the 2nd row is same as the image in right ImageView of first row.)

So what is a solution of

• Repeating images in a rows.
• And How can I get each ImageView id and its resourceid of the image so that I can come to know which image has been clicked. And then I can able to set that image into another activity's ImageView. I mean I wanted to know which image has been clicked by the user , so I want to set same image in the ImageView of other activity.

Answer 1

Hello If you want to user one single array then i have made one demo example for your problem quickly i think it will help you.

MainActivity.java

public class MainActivity extends ActionBarActivity {

    Item item;
    ArrayList<Object> obj = new ArrayList<Object>();
    MListAdapter adapter;
    ListView lv;

    int[] arrEnabledImageIds = new int[] { R.drawable.ic_launcher,
            R.drawable.ic_delete_icon, R.drawable.ic_delete_icon,
            R.drawable.ic_launcher, R.drawable.ic_delete_icon,
            R.drawable.ic_launcher };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lv = (ListView) findViewById(R.id.listView1);

        for (int i = 0; i < arrEnabledImageIds.length; i++) {
            Item itemInfo = new Item();
            itemInfo.image1 = arrEnabledImageIds[i];
            i++;
            itemInfo.image2 = arrEnabledImageIds[i];

            obj.add(itemInfo);
        }

        adapter = new MListAdapter(this, R.layout.row, obj);
        lv.setAdapter(adapter);

    }
}

activity_main.xml

<LinearLayout 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:orientation="vertical"
     >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

Item.java

public class Item implements Serializable {

    public static final long serialVersionUID = 1L;
    public int image1;
    public int image2;
}

row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/ivLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/ivRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

MListAdapter.java

public class MListAdapter extends ArrayAdapter<Object> {

    private Context context;
    int resId;
    private ArrayList<Object> mAnimListItems;

    public MListAdapter(Context context, int textViewResourceId,
            ArrayList<Object> mAnimListItems) {
        super(context, textViewResourceId, mAnimListItems);
        this.resId = textViewResourceId;
        this.context = context;
        this.mAnimListItems = mAnimListItems;

    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            LayoutInflater mInflater = (LayoutInflater) context
                    .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            convertView = mInflater.inflate(resId, null);
        }

        ImageView imgIconLeft = (ImageView) convertView
                .findViewById(R.id.ivLeft);
        ImageView imgIconRight = (ImageView) convertView
                .findViewById(R.id.ivRight);
        // TextView txtTitle = (TextView) convertView.findViewById(R.id.title);

        Item item = (Item) mAnimListItems.get(position);

        imgIconLeft.setImageResource(item.image1);
        // if I do not do +1 here it sets same image to both left and right
        // ImageView
        imgIconRight.setImageResource(item.image2);
        // txtTitle.setText(navDrawerItems.get(position).getTitle());

        return convertView;
    }
}

Answer 2

try to use two different array/arraylist to store left and rightside images seprately. settag as l+position for left image settag as r+position for right image you can identify the clicked image by

 imgIconLeft.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
        if(v.getTag.toString().contains("l"){
      // then it's a left button.

String position=v.getTag.toString().subString(1,v.getTag.toString().length()-1);
// to get position

}
});