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:

enter image description here

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...

Didn't realise this was in the official android sdk. Apparently this guy has it figured out, http://antonioleiva.com/swiperefreshlayout/ — rperryng, Apr 11 '14 at 14:16
Check this http://www.tutecentral.com/android-pull-to-refresh/ — Zohra Khan, Apr 11 '14 at 14:31
@Rperryng I didn't. All I did is adding a listener that does nothing. The code itself is in the support library. so you say those are the only functions that are available? — android developer, Apr 11 '14 at 14:37
Still, a code snippet would definitely help us visualise what's going on. I mean how you've added it to your activity, and set the listener etc — rperryng, Apr 11 '14 at 14:40

score 57 · Accepted Answer · edited Feb 19 '21 at 20:54

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.

That's too bad that it lacks so many possible functions. Maybe it's open source, at least? — android developer, Apr 11 '14 at 20:13
It is open source. You can view the source code by navigating to the directory \sdk\extras\android\support\v4\src\java\android\support\v4\widget — rperryng, Apr 11 '14 at 20:29
Please check http://www.journaldev.com/10708/android-swiperefreshlayout-pull-swipe-refresh — Pankaj, May 29 '16 at 13:59

score 14 · Answer 2 · answered Apr 12 '14 at 06:15

MainActivity.java

public class MainActivity extends ActionBarActivity {
    TextView textView;
    private SwipeRefreshLayout mSwipeRefreshLayout;
    static int count = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    textView = (TextView) findViewById(R.id.scrollTextView);

    // /You will setup the action bar with pull to refresh layout
    mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.container);

     mSwipeRefreshLayout.setColorScheme(R.color.blue,
     R.color.green, R.color.orange, R.color.purple);
    mSwipeRefreshLayout.setOnRefreshListener(new OnRefreshListener() {
        @Override
        public void onRefresh() {
            Log.e(getClass().getSimpleName(), "refresh");
            new GetLinks().execute();
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

public class GetLinks extends AsyncTask<Void, Void, Void> {
    @Override
    protected void onPreExecute() {
        super.onPreExecute();

    }

    @Override
    protected Void doInBackground(Void... params) {

        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {

            e.printStackTrace();

        }
        return null;
    }

    @Override
    protected void onPostExecute(Void result) {
        super.onPostExecute(result);
         //Here you can update the view
        textView.setText(textView.getText().toString()+"--New Content Added" + ++count);

        // Notify swipeRefreshLayout that the refresh has finished
        mSwipeRefreshLayout.setRefreshing(false);
    }

}

}

activity_main.xml

<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" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/scrollTextView"
                android:text="TTT"
                android:textSize="40sp" />
    </ScrollView>

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

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <item name="blue" type="color">#FF33B5E5</item>
    <item name="purple" type="color">#FFAA66CC</item>
    <item name="green" type="color">#FF99CC00</item>
    <item name="orange" type="color">#FFFFBB33</item>

</resources>

It seems "setColorScheme" is now deprecated. which method should be used instead? setColorSchemeResources and setColorSchemeColors ? — android developer, Jun 29 '14 at 16:26
Use setColorSchemeResources Check this link https://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html#setColorScheme(int, int, int, int) — Zohra Khan, Jul 08 '14 at 09:51
Why does android studio says.. i cannot call from a static context the non static method, mSwipeRefreshLayout.setOnRefreshListener(this) ? — Miguel, Aug 03 '14 at 18:58

score 6 · Answer 3 · edited Jun 20 '20 at 09:12

SwipeRefreshLayout with Kotlin

Xml file code

 <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:layout_width="0dp"
        android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="90dp" app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="93dp" app:layout_constraintEnd_toEndOf="parent"
        android:id="@+id/swipe_refresh_layout"
>
    <androidx.recyclerview.widget.RecyclerView
            android:layout_width="0dp"
            android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="90dp" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_marginBottom="93dp" app:layout_constraintEnd_toEndOf="parent"
            android:id="@+id/recyclerView"
    />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Activity Code

Declare the following code above the oncreate method

    var mSwipeRefreshLayout: SwipeRefreshLayout? = null

Declare the following code inside the oncreate method after setContentView line

mSwipeRefreshLayout= findViewById<SwipeRefreshLayout>(R.id.swipe_refresh_layout)
mSwipeRefreshLayout!!.setOnRefreshListener {
   //API Calls
}

On success API Call or failure API calls

                mSwipeRefreshLayout!!.isRefreshing = false

Remember you need to add this in build.gradle (app) level file implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.1.0") — Stephen, Sep 25 '21 at 09:07

score 2 · Answer 4 · answered Oct 16 '14 at 04:18

You can by simply following below method (I am using swipelayout on Expandable list ) Test.xml

  <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/RelativeTop"
        android:background="@drawable/listbg" >

        <ExpandableListView
            android:id="@+id/lvExp"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:cacheColorHint="@android:color/transparent"
            android:groupIndicator="@null"
            android:listSelector="@android:color/white" />
    </android.support.v4.widget.SwipeRefreshLayout>

ListHeader.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:background="@drawable/sectionbg"
         android:orientation="horizontal"
         android:padding="8dp" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:contentDescription="@string/contentdescription"
    android:src="@drawable/expandbtn" />

<TextView
    android:id="@+id/lblListHeader"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="3dp"
    android:text="this is test"
    android:textColor="@android:color/white"
    android:textSize="17sp" />

ChildItem.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:background="@color/GrayProductBackground" >

<TextView
    android:id="@+id/lblListItem"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginLeft="35dp"
    android:layout_marginRight="20dp"
    android:gravity="center_vertical"
    android:paddingBottom="5dp"
    android:textColor="@color/GrayTextProduct"
    android:textSize="17sp" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignRight="@+id/lblListItem"
    android:layout_centerVertical="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:contentDescription="@string/arrowdescription"
    android:gravity="center"
    android:src="@drawable/navigationarrow" />

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_alignParentBottom="true"
    android:background="@android:color/white" >
</RelativeLayout>

colors used

<color name="pDarkGreen">#8ec549</color>
<color name="pDarskSlowGreen">#c1f57f</color>
<color name="pLightGreen">#f7ffed</color>
<color name="pFullLightGreen">#d6d4d4</color>

Mainactivity.java

        swipeView = (SwipeRefreshLayout) findViewById(R.id.swipe2);
        swipeView.setColorSchemeResources(R.color.pDarkGreen, R.color.Gray, R.color.Yellow, R.color.pFullLightGreen);

swipeView.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
                @Override
                public void onRefresh() {

                        swipeView.setRefreshing(false);

                    }
                    (new Handler()).postDelayed(new Runnable() {
                        @Override
                        public void run() {

                            Log.d("Swipe", "Refreshing Number");

                        }
                    }, 0);
                }
            });

You can set swipeView.setRefreshing(false); to false or true according to your requirment this swipeing mechanisam will work in android's all API level

score 0 · Answer 5 · answered Oct 20 '18 at 06:52

activity_main.xml

 <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipe_refresh_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:visibility="gone"/>

MainActivity.java

public class MainActivity extends AppCompatActivity
    implements SwipeRefreshLayout.OnRefreshListener {

      static ViewPager viewPager;

     @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout);
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    swipeRefreshLayout.setOnRefreshListener(this);
    swipeRefreshLayout.post(new Runnable() {
                                @Override
                                public void run() {
                                    swipeRefreshLayout.setRefreshing(true);
                                    setupViewPager(viewPager);
                                }
                            }
    );
}



 private void setupViewPager(ViewPager viewPager) {


swipeRefreshLayout.setRefreshing(false);


 }


}