Android Tutorial: How to Implement Pull To Refresh Android UI Pattern To Display On Demand Feeds

You might have seen that a lot of android applications such as Google+, Twitter, and Gmail have already added pull to refresh Android UI pattern to refresh feed contents. When the user swipes down, a loader will show at the top and once it disappears, the app’s content gets refreshed.

Here’s How it Looks Like:

So, how you can implement it in your native Android app?

The answer is, ‘SwipeRefreshLayout’ pattern widget.

Implementing SwipeRefreshLayout is easy. When you want to apply swipe down on any view, just wrap the view around SwipeRefreshLayout element. Also, implement your activity class from SwipeRefreshLayout.OnRefreshListener. Now, when you pull to refresh the view, OnRefresh() method will be triggered.

However, let us make it simpler for you by showing the step-by-step process of Android refresh listview with an example.

Creating Android Project

In Android Studio, create one new project. Go to File→ New Project and fill the required details. When a tab prompts for choosing a default activity, select Blank Activity and proceed.

 

Once the new project is created, start implementing the below code.

Code Implementation

1) Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.spaceo.swiperefreshdemo.MainActivity">
<Button
android:id="@+id/btnaddrecord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/add_record"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<Button
android:id="@+id/btnviewrecord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/view_record"
android:layout_below="@+id/btnaddrecord"
android:layout_centerHorizontal="true"
android:layout_marginTop="22dp"/>
</RelativeLayout>

2) MainActivity.java

public class MainActivity extends AppCompatActivity {
private Button btnaddrecord;
private Button btnviewrecord;
ArrayList<String> nameList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Declare view in initControls()
initControls();
}
private void initControls() {
Bundle b = getIntent().getExtras();
if(b!=null){
nameList = (ArrayList<String>)b.getStringArrayList("array_list");
System.out.println(nameList);
}
btnaddrecord = (Button)findViewById(R.id.btnaddrecord);
btnviewrecord = (Button)findViewById(R.id.btnviewrecord);
btnaddrecord.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
try {
Intent addrecord = new Intent(MainActivity.this, AddRecordActivity.class);
startActivity(addrecord);
} catch (Exception e) {
e.printStackTrace();
}
}
});
btnviewrecord.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
try {
Intent viewrecord = new Intent(MainActivity.this, ViewRecordActivity.class);
viewrecord.putExtra("array_list", nameList);
startActivity(viewrecord);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
}

3) Activity_addrecord.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/editName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="86dp"
android:hint="@string/name"
android:maxLength="15"
android:inputType="textPersonName"
android:digits="@string/myAlphaNumeric"
android:singleLine="true"
android:cursorVisible="true"
android:textColorHint="@color/colorHint"
android:layout_marginLeft="@dimen/scal_8dp"
android:layout_marginRight="@dimen/scal_8dp"
android:textSize="@dimen/txt_17sp"/>
<Button
android:id="@+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/submit"
android:layout_marginTop="@dimen/scal_5dp"
android:layout_below="@+id/editName"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

4) AddRecordActivity.java

package com.spaceo.swiperefreshdemo;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.WindowManager;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import java.util.ArrayList;
/**
* Created by SpaceO on 14/9/16.
*/
public class AddRecordActivity extends AppCompatActivity {
private EditText editName;
private Button btnSubmit;
private ArrayList<String> nameList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);
setContentView(R.layout.activity_addrecord);
initControls();
}
private void initControls() {
nameList = new ArrayList<String>();
editName = (EditText)findViewById(R.id.editName);
btnSubmit = (Button) findViewById(R.id.btnSubmit);
btnSubmit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
closeKeyboard(true);
if(isValidate()){
String name = editName.getText().toString().trim();
nameList.add(name);
Intent mIntent = new Intent(AddRecordActivity.this,MainActivity.class);
mIntent.putExtra("array_list", nameList);
startActivity(mIntent);
}
}
});
}
@Override
public void onBackPressed() {
startActivity(new Intent(AddRecordActivity.this,ViewRecordActivity.class));
super.onBackPressed();
}
private boolean isValidate() {
//Check for name is not empty
if(editName.getText().toString().trim().length() == 0){
setErrorMessage(editName, getString(R.string.msg_empty_name));
return false;
}
return true;
}
// set error message to Edittext
private void setErrorMessage(EditText editName, String msg) {
editName.requestFocus();
editName.setError(msg);
}
public void closeKeyboard(boolean b) {
View view = this.getCurrentFocus();
if (b) {
if (view != null) {
InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(view.getWindowToken(), 0);
}
} else {
InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInput(view, 0);
}
}
}

5) Activity_viewrecord.java

<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">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/listViewName">
</ListView>
</android.support.v4.widget.SwipeRefreshLayout>

6) ViewRecordActivity.java

package com.spaceo.swiperefreshdemo;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.WindowManager;
import android.widget.Adapter;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;
/**
* Created by SpaceO on 14/9/16.
*/
public class ViewRecordActivity extends AppCompatActivity {
ListView mListViewName;
SwipeRefreshLayout mSwipeRefreshLayout;
ArrayList<String> nameList;
private Adapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);
setContentView(R.layout.activity_viewrecord);
initControls();
}
private void initControls() {
Bundle b = getIntent().getExtras();
if(b!=null){
nameList = (ArrayList<String>)b.getStringArrayList("array_list");
System.out.println(nameList);
}
mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout);
mListViewName = (ListView)findViewById(R.id.listViewName);
mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener(){
@Override
public void onRefresh() {
refreshContent();
}
});
}
private void refreshContent(){
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
adapter = new ArrayAdapter<String>(ViewRecordActivity.this, android.R.layout.simple_list_item_1, getNames());
mListViewName.setAdapter(adapter);
mSwipeRefreshLayout.setRefreshing(false);
};
});
}
private List<String> getNames() {
List<String> newNames = new ArrayList<String>();
for (int i = 0; i < nameList.size(); i++) {
newNames.add(nameList.get(i));
}
return newNames;
}
}

Now, run the project, and test it. You should be able to see the pull to refresh Android animation in the app. In this demo, first, you need to add few records by clicking on ‘Add Record’ button.

Once you add your records, click on ‘View Records’ button, you’ll be navigated to a blank screen. Now pull to refresh the records on that screen.

And there it is! This is the complete process of implementing Android refresh listview. If you face any problem implementing the same it, you can contact any of our highly experienced developers for help. We, Space-O Technologies – a mobile app development company, have implemented pull to refresh listview UI pattern in UI pattern in many of our Android projects and our other projects.

You can also download a copy of this Github demo from here.