Change child LinearLayout visibility “onClick” ing a TextView inside parent LinearLayout

Question

I am trying to toggle the visibility of a child LinearLayout with an onClickListener for a TextView present in a parent LinearLayout. Can someone help me achieve this?

The following is a part of my layout file:

<LinearLayout android:id="@+id/main_space"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_weight="10"
    android:padding="2dp">
    <TextView android:id="@+id/currentUserHeader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="@dimen/currentuserheader_textsize"
        android:textColor="@color/currentuserheader_textcolor"/>
    <TextView android:id="@+id/currentUserBody"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="@dimen/currentuserbody_textsize"
        android:textColor="@color/currentuserbody_textcolor"
        android:clickable="true"
        android:onClick="toggleUserActionBar"/>
    <LinearLayout android:id="@+id/useractions"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:visibility="gone"
        android:background="@color/useractions_background">
        <TextView android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Save"
            android:textColor="@color/useractions_label"
            android:textSize="@dimen/useractions_textsize"
            android:layout_weight="1"
            android:gravity="center"/>
        <TextView android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Delete"
            android:textColor="@color/useractions_label"
            android:textSize="@dimen/useractions_textsize"
            android:layout_weight="1"
            android:gravity="center"/>
        <TextView android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Forward"
            android:textColor="@color/useractions_label"
            android:textSize="@dimen/useractions_textsize"
            android:layout_weight="1"
            android:gravity="center"/>
    </LinearLayout>
</LinearLayout>

When I click on the TextView "currentUserBody", I want to toggle the visibility of the LinearLayout "useractions" which is right under that text view.

This layout is actually a layout for a row inside a ListView. So I want this functionality to work for every row in that ListView. The user can simply tap the text and it should open up options just under the text for performing those actions quickly.

Can you help me achieve this?

PS: I have created a custom ArrayAdapter to populate the in the ListView.

Answer 1

A quick and dirty solution could be:

public void toggleUserActionBar(View v) {
    View actions = v.getParent().findViewById(R.id.useractions);
    if(actions.getVisibility() == View.VISIBLE) {
         actions.setVisibility(View.GONE);
    } else {
         actions.setVisibility(View.VISIBLE);
    }
}

A cleaner solution would be inflating the item layout in a custom view, that can handle all this inside itself.

Answer 2

Here is an example of a getView method that does what you want:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // do the normal thing you would do, inflate stuff, use the view holder pattern etc 
    // set as the tag for the clickable TextView the current position
    ((TextView) convertView.findViewById(R.id.currentUserBody)).setTag(Integer.valueOf(position));
    // set the listener for the TextView
    ((TextView) convertView.findViewById(R.id.currentUserBody)).setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // retrieve the position value
            Integer realPos = (Integer) v.getTag();
            // get the parent and then search for the useractions LinearLayout
            View hiddingLayout = ((LinearLayout) v.getParent()).findViewById(R.id.useractions);
            // modify a status holder with the new value
            status[realPos] = !status[realPos];
            // change the visibility 
            hiddingLayout.setVisibility(status[realPos] ? View.VISIBLE : View.GONE);
        }
    });
    // this is required so we don't mess up the rows with visible/gone layouts 
    convertView.findViewById(R.id.useractions).setVisibility(status[position] ? View.VISIBLE : View.GONE);
    return convertView;
}

The status array is a boolean array which will hold the visibility status for each row(a false value means GONE , VISIBLE otherwise). You would create this array in the constructor based on the size of your data. If you plan to call notifyDataSetChanged on your adapter you would need to reset the array.

Edit:

Another option is to break the current layout file in two and use an ExpandableListView where the hidden layout is a child view.