Implementation of SwipeRefreshLayout in RecyclerView

SwipeRefreshLayout is the layout can be used when user want to update the content of the view using swipe to refresh gesture.

For example, ListView, GridView, RecyclerView  or any other place where we need to update the content of the view using vertical swipe gesture.

Here in the tutorial we will learn how to implement  the SwipeRefreshLayout in RecyclerView.

You May Like:-

• How to Create Video Gallery App Using Recyclerview


• How to Read and Write JSON data using GSON


• Create Animated Video thumbnail in android

Create Swipe Refresh Layout Demo Project

For demonstration of SwipeRefreshLayout we will create a project in which we required following class and XML layout files.

MainActivity.java
RecyclerViewAdapter.java
activity_main.xml
item.xml

When you will create the project you will get the MainActivity.java and activity_main.xml by default. After that we need to update both as per our requirement to implement the Swipe Refresh Layout in RecyclerView.

Add RecycylerView and SwipeRefreshLayout to Layout File

Step1: First of all add the below dependency to our app level build.gradle file.

compile "com.android.support:recyclerview-v7:25.3.1"

Step2 : Add SwipeRefreshLayout to our main layout files

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

Step3: Add RecyclerView to under the SwipeRefreshLayout View as given below

<android.support.v4.widget.SwipeRefreshLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:id="@+id/swipeRefreshLayout">
 <android.support.v7.widget.RecyclerView
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:id="@+id/recyclerView">

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

Update Main Activity to use the SwipeRefreshLayout

Step4: Modify the MainActivity.java and add required variable

private SwipeRefreshLayout swipeRefreshLayout;
 private RecyclerView recyclerView;
 private Handler handler;
 private RecyclerViewAdapter adapter;
 private List<<String>> data=new ArrayList<<String>>();

Step5: Configure the RecyclerView and set the adapter

recyclerView= (RecyclerView) findViewById(R.id.recyclerView);
 recyclerView.setLayoutManager(new LinearLayoutManager(this));
 adapter=new RecyclerViewAdapter(this);
 adapter.setDAta(data);
 recyclerView.setAdapter(adapter);

Step6: Configure the SwipRefreshLayout and add Listener for this

swipeRefreshLayout= (SwipeRefreshLayout) findViewById(R.id.swipeRefreshLayout);
 swipeRefreshLayout.setEnabled(true);
 swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
 @Override
 public void onRefresh() {
 updateContent();
 }
 });

Step7: Create a function to create the random dummy data for RecyclerView

private void dummydata() {
 Random rand = new Random();
 data.clear();
 for (int i=rand.nextInt(50)>=100;i++){
 data.add("Random Item "+i);
 }
 }

Step8: Create a method which will update the content of the RecyclerView on vertical swipe gesture

private void updateContent() {

dummydata();
 adapter.setDAta(data);
 adapter.notifyDataSetChanged();
 swipeRefreshLayout.setRefreshing(false);
 }

Step9: Create the adapter for RecyclerView

package com.nplix.swiperefreshlayoutdemo;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

/**
* Created by PK on 9/20/2016.
*/
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

private List<String> data;
private Context context;

public RecyclerViewAdapter(Context context){
this.context=context;

}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new itemView(LayoutInflater.from(context).inflate(R.layout.item, parent, false));
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
((itemView) holder).itemName.setText(data.get(position));
Log.d("Item View","Binding Item "+position);
}

@Override
public int getItemCount() {
int itemCount=data.size();
return itemCount;
}
public void setDAta( List<String> data){
this.data=data;
}

public class itemView extends RecyclerView.ViewHolder {

protected TextView itemName;
public itemView(View v) {
super(v);
itemName = (TextView) v.findViewById(R.id.item_name);
}
}
}

Step10: Create Layout for Item of RecyclerView

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="2dp">
<TextView
android:layout_gravity="center"
android:layout_width="match_parent"
android:textColor="@android:color/black"
android:layout_height="40dp"
android:id="@+id/item_name"
/>
</LinearLayout>

Full MainActivity.java file are as given below

package com.nplix.swiperefreshlayoutdemo;

import android.graphics.Bitmap;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class MainActivity extends AppCompatActivity {

private SwipeRefreshLayout swipeRefreshLayout;
private RecyclerView recyclerView;
private Handler handler;
private RecyclerViewAdapter adapter;
private List<<String>> data=new ArrayList<<String>>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
handler = new Handler();
swipeRefreshLayout= (SwipeRefreshLayout) findViewById(R.id.swipeRefreshLayout);
dummydata();
recyclerView= (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
adapter=new RecyclerViewAdapter(this);
adapter.setDAta(data);
recyclerView.setAdapter(adapter);
swipeRefreshLayout.setEnabled(true);
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
updateContent();

}
});

}

private void dummydata() {
Random rand = new Random();
data.clear();
for (int i=rand.nextInt(50);i&amp;lt;=100;i++){
data.add("Random Item "+i);
}
}

private void updateContent() {
dummydata();
adapter.setDAta(data);
adapter.notifyDataSetChanged();
swipeRefreshLayout.setRefreshing(false);
}
}

How To change color of Swipe Refresh Layout

For changing the color of the swipe Refresh Layout just use the below code.

swipeRefreshLayout.setColorSchemeResources(R.color.accent_green,R.color.teal,R.color.purple,R.color.md_deep_orange_300);

[caption id="attachment_398" align="aligncenter" width="576"] SwipeRefreshLayout Demo App[/caption]

You can see the visual of the our demo app in above snap shot. You can create this app very easily if you follow the all steps given in this tutorial. However, if you face any challenge then please fill free in comment section of the post below.