Read about Pull To Refresh ListView Android Studio Example Tutorial.
In this tutorial, you will learn how to make a listview which can be refreshed by pulling or swiping down.
You can find this similar functionality in the iOS.
In android, we have built in feature called SwipeRefreshLayout which enables the user to pull the view.
First of all, see the below video which shows the output of this example.
Step 1. Special Layout File
For making a listview layout, go to app->res->layout directory and make a new XML layout file.
Name of this file should be list_item.xml and you need to add the below source lines in this file.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="110dp"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium"
android:paddingLeft="20dp"
android:text="Name" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@color/colorAccent"/>
</LinearLayout>
You can see that above file have one text view. We will write some words like vehicle names, country names or players names in this text view.
Then there is one <view> is also there. It will work as the divider between two child rows of the listview.
Step 2. Model File Of ListView
Create a new JAVA file and set it’s name as MyModel.java
MyModel.java file should have the following code writings.
public class MyModel {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
There is one string variable in this model class.
For this string variable, two methods are there : getName() and setName()
These methods will help us to maintain the proper data into the listview. We will use these methods in adapter class.
Step 3. Writing Our Adapter Lines
Time to create another JAVA file with the name like ListAdapter.java
Write down the following lines in this ListAdapter.java file.
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.HashMap;
/**
* Created by Parsania Hardik on 03-Jan-2020.
*/
public class ListAdapter extends BaseAdapter {
private Context context;
private ArrayList<MyModel> imageModelArrayList;
public ListAdapter(Context context, ArrayList<MyModel> imageModelArrayList) {
this.context = context;
this.imageModelArrayList = imageModelArrayList;
}
@Override
public int getViewTypeCount() {
return getCount();
}
@Override
public int getItemViewType(int position) {
return position;
}
@Override
public int getCount() {
return imageModelArrayList.size();
}
@Override
public Object getItem(int position) {
return imageModelArrayList.get(position);
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
holder = new ViewHolder(); LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.list_item, null, true);
holder.tvname = (TextView) convertView.findViewById(R.id.name);
convertView.setTag(holder);
}else {
// the getTag returns the viewHolder object set as a tag to the view
holder = (ViewHolder)convertView.getTag();
}
holder.tvname.setText(imageModelArrayList.get(position).getName());
return convertView;
}
private class ViewHolder {
protected TextView tvname;
}
}
Above Adapter file will help us to fill the data inside every row of the listview.
Look at the getView() method in the above file. This method will first inflate the XML layout file list_item.xml
Then it will find the textview using it’s id and findViewById() method.
After this, it will set the text value inside the textView.
Step 4. Activity Files
There is just one activity in this tutorial. Let us write it’s code.
Go to activity_main.xml file and add the following lines in it.
<?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.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipeToRefresh"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
Now open your MainActivity.java file and write the below source block in it.
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ListView lv;
private ListAdapter customeAdapter;
private ArrayList<MyModel> imageModelArrayList;
private int currentList = 0;
private String[] firstList = new String[]{"Benz", "Bike",
"Car","Carrera"
,"Ferrari","Harly",
"Lamborghini","Silver"};
private String[] secondList = new String[]{"Roger", "Rafael",
"Novak","Maria"
,"Serena","Andy",
"Agasi","Tsitsipas"};
private String[] thirddList = new String[]{"India", "USA",
"Canada","Australia"
,"Singapore","Japan",
"UK","France"};
private SwipeRefreshLayout mSwipeRefreshLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
lv = (ListView) findViewById(R.id.lv);
mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipeToRefresh);
imageModelArrayList = populateList(currentList);
customeAdapter = new ListAdapter(this,imageModelArrayList);
lv.setAdapter(customeAdapter);
mSwipeRefreshLayout.setColorSchemeResources(R.color.colorAccent);
mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
if(currentList == 2){
currentList = -1 ;
}
currentList = currentList + 1;
imageModelArrayList = populateList(currentList);
customeAdapter = new ListAdapter(MainActivity.this,imageModelArrayList);
lv.setAdapter(customeAdapter);
mSwipeRefreshLayout.setRefreshing(false);
}
});
}
private ArrayList<MyModel> populateList(int number){
ArrayList<MyModel> list = new ArrayList<>();
for(int i = 0; i < 8; i++){
MyModel imageModel = new MyModel();
if(number == 0) {
imageModel.setName(firstList[i]);
}else if (number == 1){
imageModel.setName(secondList[i]);
}else if (number == 2){
imageModel.setName(thirddList[i]);
}
list.add(imageModel);
}
return list;
}
}
Explanation of Main Lines
First of all, see the following
private ListView lv;
private ListAdapter customeAdapter;
private ArrayList<MyModel> imageModelArrayList;
private int currentList = 0;
private String[] firstList = new String[]{"Benz", "Bike",
"Car","Carrera"
,"Ferrari","Harly",
"Lamborghini","Silver"};
private String[] secondList = new String[]{"Roger", "Rafael",
"Novak","Maria"
,"Serena","Andy",
"Agasi","Tsitsipas"};
private String[] thirddList = new String[]{"India", "USA",
"Canada","Australia"
,"Singapore","Japan",
"UK","France"};
private SwipeRefreshLayout mSwipeRefreshLayout;
First line is making the object of the ListView class. Then there is an object of ListAdapter in second line.
Third is making the arraylist with the objects of the MyModel class.
Fourth is making the integer variable currentList which has 0 (zero) as the value.
We are displaying three different types of list in the listview when user pull to refresh listview. First list is of cars, second is of player names and third is of Country names.
integer variable currentList will tell the compiler which list is currently hold by the listview.
We have also written three string array variables (firstList, secondList, thirdList) which holds the names of cars, players and countries respectively.
See the below line which is present inside the onCreate() method.
imageModelArrayList = populateList(currentList);
Here, a method populateList() will give data to the imageModelArrayList. Below is the code for populateList() method.
private ArrayList<MyModel> populateList(int number){
ArrayList<MyModel> list = new ArrayList<>();
for(int i = 0; i < 8; i++){
MyModel imageModel = new MyModel();
if(number == 0) {
imageModel.setName(firstList[i]);
}else if (number == 1){
imageModel.setName(secondList[i]);
}else if (number == 2){
imageModel.setName(thirddList[i]);
}
list.add(imageModel);
}
return list;
}
This method will get one integer value inside it’s parameter (int number). This integer value is defining which names listview should display.
If it’s value is 0 then compiler will display car names, for the value 1, it will display player names and for value 2 it will display country names in the listview.
Now just read the below source lines.
mSwipeRefreshLayout.setColorSchemeResources(R.color.colorAccent);
mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
if(currentList == 2){
currentList = -1 ;
}
currentList = currentList + 1;
imageModelArrayList = populateList(currentList);
customeAdapter = new ListAdapter(MainActivity.this,imageModelArrayList);
lv.setAdapter(customeAdapter);
mSwipeRefreshLayout.setRefreshing(false);
}
});
When the user pull or swipe down the listview, compiler will execute the above lines.
First of all, compiler will check the value of the integer variable currentList. If it is two then it will set the value of currentList as -1.
Then compiler will add 1 to the current value of the integer variable currentList .
After this, it will execute the populateList() method and will fill the data inside imageModelArayList.
Then it will simply bind the adapter to the listview.
Swipe To Refresh RecyclerView
If you want to create a recycler view which can be updated by swiping or pulling then please read the below
Swipe/Pull to Refresh RecyclerView Android Example
Download Source For Pull To Refresh ListView Android
https://github.com/demonuts/Pull-To-Refresh-ListView-Android