How to enable SwipeRefreshLayout and initial loading ListView ProgressBar at same time

Question

I have the following main.axml file

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/refresher"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:choiceMode="singleChoice"
        android:id="@+id/myListView" />
    <RelativeLayout
        android:id="@+id/loadingPanel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center">
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminate="true" />
    </RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>

I require the ability to swipe down on my listview to refresh and also I require a "spinning circle loading animated icon" on initial load. However if the Listview is above the relative layout as shown i do not get the spinning circle on initial load, but do get my Listview/refresh.

But if i change the RelativeLayout to be above the Listview i get the spinning circle on load but my Listview is not shown after?

In my onCreate method on the acitivity.

     protected async override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            // Find view components
            blogListView = FindViewById<ListView>(Resource.Id.myListView);
            listViewRefresher = FindViewById<SwipeRefreshLayout>(Resource.Id.refresher);
            loadingPanel = FindViewById<RelativeLayout>(Resource.Id.loadingPanel);

            blogListView.Adapter = new FeedAdapter(this, _blogPosts);

            //Register events
            listViewRefresher.Refresh += HandleRefresh;
            blogListView.ItemClick += OnListItemClick;

            // Populate views

            await PoplulateBlogPostsFromExternalWebUrl();

            loadingPanel.Visibility = ViewStates.Gone;
        }

Can you share your code where you handle the loading logic and show/hide your other views? Your layout is fine the way it is but you should be hiding the RelativeLayout (loadingPanel) when your content loads by setting the visibility of it to GONE. — Dr. Nitpick, Jul 04 '16 at 18:41
updated with my current onCreate method, also debugged and my listView is set to Visibility = true. thanks — James Baxter, Jul 04 '16 at 18:53
Thanks @DeveloperJam, I just realized that this is xamarin so I don't know if what caveats you may be running into, but your logic seems to be correct. One thing you could try is just getting rid of the Relative Layout and instead just having the progressBar (with the id loadingPanel on it). — Dr. Nitpick, Jul 04 '16 at 19:00
Yes i did try a progressBar on its own but made no difference. thanks — James Baxter, Jul 04 '16 at 19:08
AHH! I think I found the issue! SwipeRefreshLayout can only host one child: https://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html You will need to put the listView and the Relative Layout inside of another Relative Layout — Dr. Nitpick, Jul 04 '16 at 19:11
Cool! would you mind marking it as correct if I put an answer that explains that? — Dr. Nitpick, Jul 04 '16 at 19:47
Sorry seems like it's caused another issue where if i scroll downwards on my listview it will trigger the pull to refresh event regardless if i am scrolled to the top or not. hmm — James Baxter, Jul 04 '16 at 20:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116406/discussion-between-dr-nitpick-and-developerjam). — Dr. Nitpick, Jul 04 '16 at 20:23
I am pretty certain this is another issue. You need to add a listener to the listView that disables the SwipeToRefreshLayout whenever you are not at the top of the list. this blog post does a good job of explaining it (albiet, for android dev with java): http://nlopez.io/swiperefreshlayout-with-listview-done-right/ — Dr. Nitpick, Jul 04 '16 at 20:25
Yes thanks just saw this question http://stackoverflow.com/questions/25270171/scroll-up-does-not-work-with-swiperefreshlayout-in-listview, Answer states it works if the refresher is the direct parent of the listView. It is a separate issue as i will need to implement my own IOnScrollListener. Happy to accept your answer. — James Baxter, Jul 04 '16 at 20:33
Good find. Thanks mate, I made sure to include that as well in the answer. — Dr. Nitpick, Jul 04 '16 at 20:40

score 3 · Accepted Answer · edited May 23 '17 at 12:32

According to the android docs SwipeRefreshLayout can only host one child. As a result the second view is always being hidden. To get this to work you will have to wrap the ListView and RelativeLayout in another RelativeLayout. It's also worth noting that the RelativeLayout wrapping the ProgressBar can probably be removed if an id is put on the ProgressBar.

The OP discovered (in the comments above) that this caused the SwipeRefreshLayout to be triggered when the list was scrolled up. To address this you would need to disable the layout when the list view is not at the top.

Sample Code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/refresher"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout
        android:id="@+id/loadingContainer"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <ListView
            android:minWidth="25px"
            android:minHeight="25px"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:choiceMode="singleChoice"
            android:id="@+id/myListView" />
        <RelativeLayout
            android:id="@+id/loadingPanel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center">
            <ProgressBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:indeterminate="true" />
        </RelativeLayout>
    </RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>

How to enable SwipeRefreshLayout and initial loading ListView ProgressBar at same time

1 Answers1