It is a common practice that app users do find themselves swiping down to refresh to check whether there is newly added information to the app or the information is dynamic depending on the user at a specific time
The need to implement swipe down to refresh in android is always key such that the user will not have to go back to the homepage or back to the last activity and open again so that the app data can be refreshed
The swipe down to refresh in android is a feature supported by android such that you can swipe from the top in a vertical direction it will act as a refresh button has been clicked
In this article, we shall cover how to implement or add swipe down to refresh in android and show you an example of how the swipe down to refresh works
The prerequisites of this discussion is;
- how to create a list view in android using kotlin
- how to add a click listener in android using kotlin
Having discussed how to create a click listener and how to implement click listener in android, we shall now show how to implement the swipe down to refresh
- In the activity_main.xml, we shall add the swipe refresh layout to cover the listview property as shown
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/refreshonswipe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<ListView
android:id="@+id/listview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
</ListView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
The full activity_main.xml code will be as follows
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/refreshonswipe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<ListView
android:id="@+id/listview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
</ListView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
- In the MainActivity.kt, you will need to add the imports swipe refresh layout and swipe refresh listener. This ensures that the refresh layout properties are readily available for use in your app
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout.OnRefreshListener
- Initialize and assign a variable to the refresh layout
var refreshlayout = findViewById(R.id.refreshonswipe) as SwipeRefreshLayout;
- Next, you will need to set a color to the refresh icon such that it can be visible when the user swipes down. The color you choose must be defined in the colors resource file else you use color codes
refreshlayout.setColorSchemeResources(R.color.design_default_color_primary)
- Next, define what will happen when the swipe down to refresh is initiated.
You can decide either to fetch data again from the online server with the updated results or define the data that you want to be displayed.
For this example, we are reloading the second array list with an updated set of data such that when you swipe down, a different set of data will be displayed such that you will note the difference
refreshlayout.setOnRefreshListener(OnRefreshListener {
//set what happens when swipe down to refresh is initiated
val arrayAdapter = ArrayAdapter<String>(
this,
R.layout.listview_layout, carlist2
)
listViewlist.adapter=arrayAdapter
refreshlayout.setRefreshing(false)
})
The full MainActivity.kt is as follows
package com.example.listviewproject
import android.content.Intent
import android.os.Bundle
import android.widget.AdapterView
import android.widget.ArrayAdapter
import android.widget.ListView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout.OnRefreshListener
class MainActivity : AppCompatActivity() {
var carlist = arrayOf("Nissan", "Toyota", "Audi", "VW", "Benz", "KIA", "Suzuki", "Subaru", "Honda", "Mitsubishi");
var carlist2 = arrayOf("Chevrolet","Nissan", "Toyota", "Audi", "VW", "Benz", "KIA", "Suzuki", "Subaru", "Honda", "Mitsubishi");
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val listViewlist = findViewById<ListView>(R.id.listview1)
var refreshlayout = findViewById(R.id.refreshonswipe) as SwipeRefreshLayout;
val arrayAdapter = ArrayAdapter<String>(
this,
R.layout.listview_layout, carlist
)
listViewlist.adapter=arrayAdapter
listViewlist.onItemClickListener = AdapterView.OnItemClickListener { adapterView, view, position, id ->
val selectedItem = adapterView.getItemAtPosition(position) as String
val itemposition = adapterView.getItemIdAtPosition(position)
//to display a message once the item in list is clicked
Toast.makeText(
applicationContext,
"You have clicked $selectedItem at position $itemposition",
Toast.LENGTH_LONG
).show()
//to open a new activity when item in a list is clicked
val intent = Intent(applicationContext, MainActivity2::class.java)
intent.putExtra("itemname", selectedItem)
startActivity(intent)
}
refreshlayout.setColorSchemeResources(R.color.design_default_color_primary)
refreshlayout.setOnRefreshListener(OnRefreshListener {
//set what happens when swipe down to refresh is initiated
val arrayAdapter = ArrayAdapter<String>(
this,
R.layout.listview_layout, carlist2
)
listViewlist.adapter=arrayAdapter
refreshlayout.setRefreshing(false)
})
}
}
- Build and run your application
Remember to follow the other methods displayed in the articles that we defined as the prerequisites of this article, else your app will not work as intended
When you install your application and swipe down, a refresh icon will appear. Once the refresh icon appears, you will just need to release the swipe down and the app will perform as it has been set in the refresh listener method
That is how we implement swipe down to refresh in android using kotlin language.
