ExpandableListView click group without expanding

Question

The situation:

I am working on setting up an ExpandableListView 's event handlers. I currently have a group click event and an expand event.

The codez:

    private void ListView_GroupExpand(object sender, ExpandableListView.GroupExpandEventArgs e)
    {
        var dialogBuilder = new AlertDialog.Builder(this);
        dialogBuilder.SetTitle(Resource.String.group_title);
        dialogBuilder.SetMessage(string.Format("Expanded group {0}", e.GroupPosition));
        dialogBuilder.Create().Show();
    }

    private void ListView_GroupClick(object sender, ExpandableListView.GroupClickEventArgs e)
    {
        var dialogBuilder = new AlertDialog.Builder(this);
        dialogBuilder.SetTitle(Resource.String.group_title);
        dialogBuilder.SetMessage(string.Format("Clicked group {0}", e.GroupPosition));
        dialogBuilder.Create().Show();
    }

The problem:

When I click a group header in the list, the click event fires, but the expand event does not. It doesn't matter if I click on the little expand carat to the left or just click in the middle of the list item.

The inquiry:

Is there any way of setting the view up so that clicking the carat only fires the expand event (and not the click event), and vice versa when clicking the middle of the list item instead? And if clicking the carat or the middle of the list item are one and the same thing, (how) can I get both expand and click handlers to fire off? Or do I just choose one over the other?

Answer 1

Is there any way of setting the view up so that clicking the carat only fires the expand event (and not the click event), and vice versa when clicking the middle of the list item instead?

Firstly you can create your own indicator for group header:

<ExpandableListView
    android:id="@+id/myExpandableListview"
    android:groupIndicator="@null"
    android:minWidth="25px"
    android:minHeight="25px"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

And create your header layout for example like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  <ImageView
      android:layout_height="50dp"
      android:layout_width="50dp"
      android:id="@+id/indicator"
      android:src="@drawable/downicon" />
  <TextView
      android:id="@+id/DataHeader"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:text="DataHeader"
      android:layout_margin="2dp"
      android:textStyle="bold"
      android:paddingStart="50dp"
      android:paddingLeft="50dp" />
</LinearLayout>

Then create your ExpandableDataAdapter for example like this:

public class ExpandableDataAdapter : BaseExpandableListAdapter
{
    private readonly Activity Context;

    private ExpandableListView _listview;

    public ExpandableDataAdapter(Activity newContext, List<Data> newList, ExpandableListView listview) : base()
    {
        Context = newContext;
        DataList = newList;
        _listview = listview;
    }

    protected List<Data> DataList { get; set; }

    public override View GetGroupView(int groupPosition, bool isExpanded, View convertView, ViewGroup parent)
    {
        MyViewHolder holder;
        var view = convertView;

        if (view != null)
            holder = view.Tag as MyViewHolder;

        holder = new MyViewHolder();
        view = Context.LayoutInflater.Inflate(Resource.Layout.ListGroup, null);
        holder.Header = view.FindViewById<TextView>(Resource.Id.DataHeader);
        holder.Indicator = view.FindViewById<ImageView>(Resource.Id.indicator);
        view.Tag = holder;

        holder.Header.Text = ((char)(65 + groupPosition)).ToString();

        holder.Indicator.Click += (sender, e) =>
        {
            if (!isExpanded)
            {
                _listview.ExpandGroup(groupPosition);
            }
            else
            {
                _listview.CollapseGroup(groupPosition);
            }
        };

        return view;
    }

    private class MyViewHolder : Java.Lang.Object
    {
        public TextView Header { get; set; }
        public ImageView Indicator { get; set; }
    }

    //...And more other code here
}

Finally use this adapter for example like this:

var adapter = new ExpandableDataAdapter(this, Data.SampleData(), listView);

Now you can click the indicator image of each header item to expand the list: