Skip to main content

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



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&amp;lt;RecyclerView.ViewHolder&amp;gt; {

private List&amp;lt;String&amp;gt; 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&amp;lt;String&amp;gt; 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 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.

Comments

Post a Comment

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

Kotlin Parcelable Array Objects Send To Activity

We know that IPC (Inter Process Communication) between the activity is an extremely important part of any application development. We often required that we need to send some data to other activity. For example, we may be required to send an array of data, data could be an Integer, String, Long, Double, Float or any other custom data objects. So, In this example, we are going to learn how to implement the Kotlin Parcelable Array object to send the data from one activity to second activity. What is Parcel? The parcel class is designed as a high-performance IPC transport. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC, and references to live IBinde r objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. Create Kotlin Parcelable Array Objects Parcelable is API for placing the arbitrary objects into the Parcel. In Actual in android app development, Parcelable is an interface

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit. What is Retrofit? If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps. Further, you can check the Retrofit Library here . So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website. Prerequisite for using the Retrofit for WordPress Android App Ther