Hiding the Header view in ListView

Question

I'm trying to add a header view to my list, and hide it all the time unless we scroll to it (like the pull-to-refresh mechanism). The problem is: if the list is not tall enough to fill the screen - the header view is shown on top of the list.

Is there a way to hide it, and make it visible only when we scroll to it? I've been trying a lot of stuff, but I can't figure out a good and simple way to do so.

Thanks

Solution 1

Here's a blog post describing a simple way of hiding and showing the header view.

The idea is to to put the content you wish to hide in a LinearLayout that wraps it, and hiding the content only. That way, the wrapping LinearLayout will collapse when its content is hidden, resulting in a headerView that is technically still present, but 0dip high.

Note: If you would try to hide the content without the enclosing layout, you would be left with unwanted space in the header view.

An example layout with a spinner representing the content:

<LinearLayout
      xmlns:a="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content">
      <ProgressBar
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

Then you can hide the spinner (content) as follows:

spinnerLayout.findViewById(R.id.spinner).setVisibility(View.GONE);

Solution 2

You could look into ListView.setOverscrollHeader() or ListView.setOverscrollFooter(). Is this the behavior you are looking for?

If not, could you post some code showing what you have so far?

EDIT:

Ok so I looked into Overscrolling headers/footers and you're right, I don't think that's what you want at all.

Instead you should probably look into the Pull to Refresh mechanism from the Twitter app that others have tried to emulate. You can look into the answers from this question.

The most promising answer seems to be the custom ListView written by Johan Nilson, the code for which can be found here:

https://github.com/johannilsson/android-pulltorefresh

EDIT #2:

I took a look at the PullToRefresh custom ListView and what you want to do is probably possible, though not necessarily easy. Allow me to explain.

The PullToRefreshListView is essentially just a hack that exploits the optional Header in standard ListViews. The hidden "Pull To Refresh" that you see is really just the header of the ListView. When the list is displayed, this line is executed:

setSelection(1);

This scrolls the list to the first item on the list, effectively hiding the Header. When the List is short enough to be displayed entirely on screen, no scrolling is necessary, hence the "Tap to Refresh" button.

When this "Tap to Refresh" is visible, the pull to refresh mechanism is disabled, but it's easy enough to fix that. The pull to refresh effect is accomplished by increasing the top padding of the header view so that it appears that you are pulling the list down (when really it's more accurate to say that the Header is pushing the rest of the list down).

The amount of padding added is controlled by the applyHeaderPadding() function on line 199 of the source code. In that function there is an if statement on line 220 that only applies the padding when the list is in RELEASE_TO_REFRESH mode:

if (mRefreshState == RELEASE_TO_REFRESH)
{
    //Some code that eventually adds padding to the header...
}

If you eliminate this condition or change it to apply padding no matter what mode you are in you can drag to refresh even if the list is short and the header says "Tap to Refresh"

if (true)
{
    //Some code that eventually adds padding to the header...
}

However, this doesn't exactly create the effect you're looking for. If the list is short, you can drag it down to refresh, but the "Tap to Refresh" header is still shown. Now the problem is "How can I hide the header until the dragging motion begins?" This is a difficult problem on it's own, with several Stack Overflow questions dedicated to it.

If you want a header, you must add it BEFORE you set the adapter for the ListView, otherwise you get all sorts of errors.

I had some success with this, but I haven't come up with anything stable, because my solution is a kind of nasty hack on top of the already hacked PullToRefreshListView. I set an empty FrameLayout as the header and added the original pull to refresh header to that Frame Layout. Then, as I dragged the list, I edited the height in the LayoutParameters of the Frame Layout to grow and shrink much like the padding had originally. It sort of worked, but would eventually force close, and I haven't figured out why yet.

Anyway, if I get it to work I'll post the code, otherwise someone wiser than I might propose a solution based on the info I just provided.

Solution 3

Here is a solution for the current PullToRefreshListView (updated November 4, 2011):
https://github.com/johannilsson/android-pulltorefresh

based on the Hiding Header Views article:
http://pivotallabs.com/users/joe/blog/articles/1759-android-tidbits-6-22-2011-hiding-header-views

1) Copy pull_to_refresh_header.xml from the library's res/layout to your app's res/layout.

2) Edit your app's pull_to_refresh_header.xml. Wrap topmost RelativeLayout in a LinearLayout and then wrap the LinearLayout in a RelativeLayout again. Why? Topmost layout must be RelativeLayout because that's what's expected in code, second level layout must be LinearLayout because that's the only layout that collapses with View.GONE. Third level layout must be the same as original top-level RelativeLayout (except id) to preserve look.

3) Preserve same id on top RelativeLayout (pull_to_refresh_header), give second level LinearLayout an id of your choosing, give third level RelativeLayout another id (pull_to_refresh_header2 for example).

4) Move all padding from the topmost RelativeLayout to the second RelativeLayout.

5) In your code use findViewById and your LinearLayout id to set visibility to View.GONE. The LinearLayout will collapse, and if you moved all padding values appropriately to the inner RelativeLayout the header should take no space at all.

Comments

[Udinic]

Thanks for the reply. The methods you suggested are for a drawable to replace that Orange line when over scrolling, but you cannot add a View of your own.

[theisenp]

I tried it and it didn't replace the orange lines for me, but it also didn't have the behavior I was hoping for. I've edited my answer.

[Udinic]

I've already tried this one, but it doesn't take care of the case where the list is short, and cannot be scrolled. In that case, they just put a "Tap to refresh" header that is always seen.

[theisenp]

After all sorts of tinkering, I've made some discoveries. See my second edit.

[Udinic]

Thanks for the research on that matter. I've been working on that issue on the last few days, and got this thing working! I'll polish my code a little bit more and report back.

[Rainbowbreeze]

The only method that works out of the box, also inside the PullToRefreshListView library of Johan Nilsson!

[Avinash Kumar Pankaj]

@Udinic hey did u get correct answer for this issue as i am also facing same issue. If u solved then please help me

[Boris88]

Broken again. Here's the new link : blog.pivotal.io/labs/labs/…