android - How to use the SwipeRefreshLayout?

Question

Background

Google has recently published an update to its support library, which now has a new "SwipeRefreshLayout" view.

The view allows to wrap another view, while supporting swiping down in order to perform a refresh operation.

screenshot:

The problem

Google hasn't provided a sample (at least not one that I can find, yet), so I've tried using it myself.

At first I got a crash (NPE) whenever I swiped, but then I've found out that's because I didn't provide a "OnRefreshListener" for it.

But I still don't get how to use it, let alone customize it

Here's the XML of the layout file:

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.swiperefreshlayouttest.MainActivity"
    tools:ignore="MergeRootFrame" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />
        </LinearLayout>
    </ScrollView>

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

Code, though it doesn't do anything special at all:

public class MainActivity extends ActionBarActivity
  {
  @Override
  protected void onCreate(final Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final SwipeRefreshLayout swipeRefreshLayout=(SwipeRefreshLayout)findViewById(R.id.container);
    swipeRefreshLayout.setOnRefreshListener(new OnRefreshListener()
      {
        @Override
        public void onRefresh()
          {
          // do nothing
          }
      });
    }
  }

The question

What is the correct way to use this view?

How do I customize it? Currently it's just a black line...

Answer 1

I don't know what that ActionBarActivity class you're extending is, but I got it working just fine using a FragmentActivity

public class ActivityMain extends FragmentActivity implements OnRefreshListener {
    
    private SwipeRefreshLayout mSwipeRefreshLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.activity_main);
        mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.container);
        mSwipeRefreshLayout.setOnRefreshListener(this);
        
        super.onCreate(savedInstanceState);
    }

    @Override
    public void onRefresh() {
        Toast.makeText(this, "Refresh", Toast.LENGTH_SHORT).show();
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                mSwipeRefreshLayout.setRefreshing(false);
            }
        }, 2000);
    }
}

Worth Pointing out I copy pasted your xml layout exactly as it is

In terms of customization, there's really not much you can do other than change the color of the colored bar by calling setColorScheme(int colorResId, int colorResId, int colorResId, int colorResId);

e.g.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <color name="blue">#0099CC</color>
    <color name="purple">#9933CC</color>
    <color name="green">#669900</color>
    <color name="orange">#FF8800</color>
    
</resources>

mSwipeRefreshLayout.setColorScheme(R.color.blue, R.color.purple, R.color.green, R.color.orange);

It's kind of a disappointing addition really. The sensitivity on the refresh is fairly high and there is no setting to change it

Edit

I wrote this when this class (and the ActionBarActivity class) had just been added to the sdk. As such, some things have changed from when I wrote this answer. Furthermore, the type of Activity you use should not affect this solution.

setColorScheme is now deprecated, setColorSchemeResources(int... colorResIds) should be used instead. (you can put as many color ids in there as you like).

setDistanceToTriggerSync(int distance) can also be used to set how far down a user needs to swipe in order to trigger a refresh.

I recommend checking out the official documentation to see what else the class has to offer.