ListView with ViewStub in Item Template - expanded controls not showing for last item

Question

I have the following application layout: Activity with a LinearLayout hosting a Fragment, which hosts a ListView in a LinearLayout. I've templated (not sure it's the right term - I'm coming from WPF) how the ListView is displayed. There's a 3 line part that is shown at all times, plus a ViewStub which is expanded when the item is clicked (and only one item is to be expanded at all times).

Upon the first click on each ListView item, the stub is inflated (works for all items), and then the details and myButton controls are configured. This works for all ListView items - however, for the last of them, details and myButton never show. On top of that, if another stub is expanded, the last ListView item becomes invisible - instead of it moving down to make space for the item that is currently expanded.

So, if I click on ListView item on position myListView.Items.Count -1, I don't see anything of the expansion. If I click on any other ListView item, the last ListView item disappears.

Here's the fragment layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px">
<TextView
    android:text="@string/active_calls"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/Calls_Header" />
<ListView
    android:minWidth="25px"
    android:minHeight="25px"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/ActiveCallsList" />
</LinearLayout>

And the layout for each ListView item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tableLayout1"
    android:shrinkColumns="*"
    android:stretchColumns="*">
    <TableRow
        android:id="@+id/tableRow1">
        <TextView
            android:text="Caller Name"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:id="@+id/CallerName"
            android:layout_column="0"
            android:layout_span="2" />
    </TableRow>
    <TableRow
        android:id="@+id/tableRow2">
        <TextView
            android:text="+41 12 345 6789"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/CallerNumber"
            android:layout_column="0" />
        <TextView
            android:text="00:01:25"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/CallDuration"
            android:layout_column="1" />
    </TableRow>
    <TableRow
        android:id="@+id/tableRow3">
        <TextView
            android:text="Ringing"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/CallStatus"
            android:layout_column="0" />
    </TableRow>
</TableLayout>
<ViewStub
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/viewStub1" 
    android:inflatedId="@+id/CallDetails"
    android:layout="@layout/CallDetails" />
</LinearLayout>

and the part to be expanded

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
    android:text="Text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/CallDetailsText" />
<Button
    android:text="@string/endCall"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/EndCallButton" />
</LinearLayout>

And the ItemClick handler associated to my own implementation of an ArrayAdapter deriving from BaseAdapter.

void calls_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
    {
        if (inflatedView != null)
            inflatedView.Visibility = ViewStates.Gone; // make sure only one item is inflated at all times

        var obj = e.Parent.GetItemAtPosition(e.Position);
        var listView = sender as ListView;
        Model.Call t = Model.Calls.MyCalls[e.Position];
        string text = t.CallerName + " " + t.CallState;

        Log.Debug("SmartAppMobile", "Call " + text + " clicked");

        //Toast.MakeText(this.Activity, text, ToastLength.Short).Show();
        ViewStub myStub = e.View.FindViewById<ViewStub>(Resource.Id.viewStub1);

        bool previouslyFound = false;
        if (myStub != null)
        {
            inflatedView = myStub.Inflate();
        }
        else
        {
            Log.Debug("myapp", "View stub not found for " + text);
            inflatedView = e.View.FindViewById<View>(Resource.Id.CallDetails);
            inflatedView.Visibility = ViewStates.Visible;
            previouslyFound = true;
        }

        TextView details = inflatedView.FindViewById<TextView>(Resource.Id.CallDetailsText);
        if (details != null)
            details.Text = "Call details go here... " + t.CallerNumber;
        else
            Log.Debug("myapp", "Call Details Text field not found for " + text);
        Button myButton = inflatedView.FindViewById<Button>(Resource.Id.EndCallButton);
        if (myButton != null)
        {
            if (!previouslyFound)
                myButton.Click += (x, y) =>
                {
                    Model.Calls.MyCalls.Remove(t);
                    //((ArrayAdapter)listView.Adapter).NotifyDataSetChanged();
                    inflatedView.Visibility = ViewStates.Gone;
                };
        }
    }

Also, if I click on myButton, the application reacts as if I had pressed the back button on the phone - and the ListView item is only removed if it is one that I added in code.

So I guess I have to add the way I call the activity hosting the fragment, and how the ListView items are bound as well:

In my fragment hosting the ListView:

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View fragment = inflater.Inflate(Resource.Layout.CallsFragment, null);
        calls = fragment.FindViewById<ListView>(Resource.Id.ActiveCallsList);
        calls.Adapter = new ActiveCallsAdapter(this.Activity, Model.Calls.MyCalls);
        calls.ItemClick += new EventHandler<AdapterView.ItemClickEventArgs>(calls_ItemClick);

        return fragment;
    }

and my Data model for the calls

public class Calls
{

    private static List<Call> myCalls;

    private static object myLock = new object();

    public static List<Call> MyCalls
    {
        get 
        {
            lock (myLock)
            {
                if (myCalls != null)
                    return myCalls;
                myCalls = new List<Call>();
                myCalls.Add(new Call { CallerName = "some name", CallerNumber = "some phone number", CallState = Model.CallState.Init });
                myCalls.Add(new Call { CallerName = "some other name", CallerNumber = "another number", CallState = CallState.Held });
                return myCalls;
            }
        }
    }

}

And the button I use in my main activity to add a new item to the list and display the list:

Button button = FindViewById<Button> (Resource.Id.myButton);
        button.Click += delegate 
        {
            button.Text = string.Format ("{0} clicks!", count++);
            Model.Calls.MyCalls.Add(new Model.Call { CallerName = "test " + count, CallerNumber = "" + count, CallState = Model.CallState.Active });
            StartActivity(new Intent(this, typeof(CallsActivity)));
        };

And of course, CallsActivity

[Activity(Label = "My Activity")]
public class CallsActivity : Activity
{
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);
        SetContentView(Resource.Layout.CallsActivity);
        // Create your application here
    }
}

Answer 1

This is a layout bug. When you inflate the selected call, the call layout gets bigger but its parent doesn't, so the bottom one falls off the edge. That's also why it looks like the bottom one is not expanding--the expanded content is falling off the bottom. You can see this in action if you edit CallDetails.axml to set layout_height for the button to 1dp.

You can fix this layout issue by changing activeCallsList/layout_height (in CallsFragment.axml) to match_parent or fill_parent instead of wrap_content. Instead of reserving just enough space to show the calls when first drawn, activeCallsList will reserve as much space as it can. This makes your call Views behave as expected.

-Max