Adding text hint to Android SwipeRefreshLayout

Question

How do I add a hint on the top of a listView like "Pull down to refresh" which is contained in a swipeRefreshLayout from android.support.v4.

The pull down to refresh works but I want to add a text whenever the user pulls the listview slightly down.

Answer 1

---

EDIT 10/21/2014

If you update the support-v4 to the latest version (at least 21.0.0) you can use the built-in loading indicator!

---

I just came up with a simple, yet effective, solution.

The idea is to add a custom ViewGroup that grows its height when the SwipeRefreshLayout child gets pulled down. In this ViewGroup you will put everything you need for your hint (TextViews, ImageViews, ...).

I chose to extend a RelativeLayout because it makes easier to position your "hint" elements.

1) Create a custom widget as follows:

public class SwipeRefreshHintLayout extends RelativeLayout {

    public SwipeRefreshHintLayout(Context context) {
        super(context);
    }

    public SwipeRefreshHintLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SwipeRefreshHintLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public void setSwipeLayoutTarget(final SwipeRefreshLayout swipeRefreshLayout) {

        final View swipeTarget = swipeRefreshLayout.getChildAt(0);
        if (swipeTarget == null) {
            return;
        }

        swipeTarget.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            private Rect oldBounds = new Rect(), newBounds = new Rect();

            @Override
            public boolean onPreDraw() {
                newBounds.set(swipeTarget.getLeft(), swipeRefreshLayout.getTop(), swipeTarget.getRight(), swipeTarget.getTop());

                if (!oldBounds.equals(newBounds)){
                    getLayoutParams().height = newBounds.height();
                    requestLayout();
                    oldBounds.set(newBounds);
                }
                return true;
            }
        });

    }

}

2) In your Fragment or Activity layout use this custom widget.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.widget.SwipeRefreshHintLayout
        android:id="@+id/swipe_hint"
        android:layout_width="match_parent"
        android:layout_height="0dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/label_swipe_to_refresh"/>

        <!-- Any other view positioned using RelativeLayout rules -->

    </com.example.widget.SwipeRefreshHintLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </android.support.v4.widget.SwipeRefreshLayout>

</RelativeLayout>

3) Then, in your Activity onCreate() or in your Fragment onCreateView(), put those lines:

mSwipeRefreshLayout = (SwipeRefreshLayout) rootView.findViewById(R.id.swipe_container);
mSwipeRefreshHintLayout = (SwipeRefreshHintLayout) rootView.findViewById(R.id.swipe_hint);
mSwipeRefreshHintLayout.setSwipeLayoutTarget(mSwipeRefreshLayout);

Done!