How to show a layout containing buttons on clicking a row in a ListView generated using simpleAdapter in android?

Question

I have generated a ListView using SimpleAdapter.I have 2 child RelativeLayouts inside a parent LinearLayout. I have made the layout with id colorful invisible initially.

I want to show this layout on clicking the listview row. I have done the following coding, but the problem with it is that no matter whichever row I click the layout colorful gets visible only on the first row and not on the row clicked.

Can anyone guide me step by step what to do? My codes are as below:

senttask.java

public class senttask extends Fragment {

    public senttask() {

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.sentaskfragment, container,
                false);
        String font="font/Dosis-SemiBold.otf";
        //String font2="font/Dosis-SemiBold.otf";
        final Typeface tp=Typeface.createFromAsset(getActivity().getAssets(), font);
ListView sent=(ListView)view.findViewById(R.id.listViewtasksent);
  final Databasehandler2 db=new Databasehandler2(getActivity().getApplicationContext());
  HashMap<String, String> c=db.getAddedContacts();

  String name=c.get("ph");
 ArrayList<HashMap<String, String>>val=new ArrayList<HashMap<String,String>>();
 val=db.getTaskSent(name);

  ListAdapter k=new SimpleAdapter(getActivity(),val,R.layout.senttaskdata2,new String[]{"rname","heading","desc","id","path","receiver","sender"},new int[]{R.id.textView1,R.id.textView2,R.id.textView3,R.id.hide1,R.id.hide2,R.id.hide3,R.id.hide4})
  {

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        final View v = super.getView(position, convertView, parent);
        TextView myname=(TextView)v.findViewById(R.id.textView1);
        TextView mydes=(TextView)v.findViewById(R.id.textView2);
        TextView mytopic=(TextView)v.findViewById(R.id.textView3);


        myname.setTypeface(tp);
        mydes.setTypeface(tp);
        mytopic.setTypeface(tp);

        return v;
    }

  };
  sent.setAdapter(k);

  sent.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
            long arg3) {
        // TODO Auto-generated method stub

        RelativeLayout r=(RelativeLayout)arg0.findViewById(R.id.colorful);
        r.setVisibility(arg0.VISIBLE);


    }
});
        return view;

    }
}

senttaskdata2.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="vertical" >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="70dp"

    android:background="@android:color/transparent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        android:src="@drawable/test2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2"
        android:text="TextView"
        android:textColor="@android:color/darker_gray"
        android:textSize="11sp" />

    <TextView
        android:id="@+id/hide1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView1"
        android:layout_alignParentRight="true"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:visibility="gone" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_toRightOf="@+id/imageView1"
        android:text="TextView"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/imageView1"
        android:layout_toRightOf="@+id/imageView1"
        android:text="TextView"
        android:textColor="@android:color/darker_gray"
        android:textSize="11sp" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="70dp" 
    android:visibility="gone"
    android:id="@+id/colorful"
    >

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="80dp"
        android:layout_height="70dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@color/dblue"
        android:src="@drawable/ic_status" />

    <ImageView
        android:id="@+id/ImageView01"
        android:layout_width="80dp"
        android:layout_height="70dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@color/dblue"
        android:src="@drawable/ic_status" />

    <ImageView
        android:id="@+id/ImageView02"
        android:layout_width="80dp"
        android:layout_height="70dp"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imageView2"
        android:background="@color/yellow"
         android:adjustViewBounds="true"
          android:scaleType="centerInside"
        android:src="@drawable/ic_reminder" />

    <ImageView
        android:id="@+id/ImageView03"
        android:layout_width="80dp"
        android:layout_height="70dp"
         android:adjustViewBounds="true"
        android:layout_alignParentTop="true"
         android:scaleType="centerInside"
        android:layout_toRightOf="@+id/ImageView02"
        android:background="@color/green"
        android:src="@drawable/ic_action_edit" />

    <ImageView
        android:id="@+id/ImageView04"
        android:layout_width="80dp"
        android:layout_height="70dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@color/dblue"
         android:adjustViewBounds="true"
          android:scaleType="centerInside"
        android:src="@drawable/ic_status" />

    <ImageView
        android:id="@+id/ImageView05"
        android:layout_width="80dp"
        android:layout_height="70dp"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@color/red"
        android:src="@drawable/del" />

</RelativeLayout>

senttaskfragment.xml

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

<ListView
    android:id="@+id/listViewtasksent"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    >
</ListView>

Answer 1

The lines:

RelativeLayout r=(RelativeLayout)arg0.findViewById(R.id.colorful);
r.setVisibility(arg0.VISIBLE);

will always reference the RelativeLayout from the first visible row of the ListView because arg0 represents the ListView(all rows end up with the same id so the first occurrence of the view with that id will be returned). Instead of looking for the target RelativeLayout in the entire ListView you'll need to look for it in the actual clicked row view which is also pass in that callback as the arg1 parameter. This way you'll have:

RelativeLayout r=(RelativeLayout)arg1.findViewById(R.id.colorful);
r.setVisibility(arg0.VISIBLE);