Add Pull To Refresh to your Android app using Kotlin

Last updated on: June 14, 2022

Pull to Refresh is used in many popular apps, apps where content updates are frequent, like news, social media e.t.c.

In Android development this gesture it’s called ‘Swipe to Refresh‘.

Add Pull To Refresh to our app

Go to your app-level build.gradle file and add the following library:

// ...

dependencies {
    // ...

    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
    
    // ...
}Code language: Kotlin (kotlin)

Next, in our XML layout, we have to change the parent layout to LinearLayout and add the orientation to vertical (or use ConstraintLayout).

Then, we have to add the SwipeRefreshLayout, this adds the pull to refresh gesture, and inside that, we’ll add the RecyclerView, like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
        tools:context=".MainActivity">

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@+id/items_swipe_to_refresh"
            android:layout_width="wrap_content"
            android:layout_height="0px"
            android:layout_weight="1">

        <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/items_rv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/colorPrimaryDark" />
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

</LinearLayout>Code language: HTML, XML (xml)

After our layout is ready, let’s go to our file with the RecyclerView. In this example, it’s the MainActivity.kt, and set the Color Scheme for our Pull To Refresh icon.

Also, we’re going to set the setOnRefreshListener. This listener called every time we pull down to refresh.

class MainActivity : AppCompatActivity() {

    private lateinit var itemsCells: ArrayList<String?>
    private lateinit var adapter: ItemsRVAdapter
    private lateinit var itemsRv: RecyclerView
    private var refreshTimes = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Set the data for our ArrayList
        setItemsData(refreshTimes)

        itemsRv = findViewById(R.id.items_rv)
        
        // Set the adapter of the RecyclerView
        setAdapter()

        // Set the Layout Manager of the RecyclerView
        setRVLayoutManager()

        // Set the colors of the Pull To Refresh View
        val itemsSwipeToRefresh = findViewById<SwipeRefreshLayout>(R.id.items_swipe_to_refresh)
        itemsSwipeToRefresh.setProgressBackgroundColorSchemeColor(ContextCompat.getColor(this, R.color.colorPrimary))
        itemsSwipeToRefresh.setColorSchemeColors(Color.WHITE)


        itemsSwipeToRefresh.setOnRefreshListener {
            itemsCells.clear()
            refreshTimes = +refreshTimes + 5
            setItemsData(refreshTimes)
            adapter = ItemsRVAdapter(itemsCells)
            itemsRv.adapter = adapter
            itemsSwipeToRefresh.isRefreshing = false
        }
    }
    
    // ...

}Code language: Kotlin (kotlin)

Inside in the setOnRefreshListener listener what we do is:

• Clean our array from the previous data
• Download the data again from the server. In our example, it just creates a list of numbers
• Pass the adapter to RecyclerView’s adapter
• Stop Pull-To-Refresh animation

You can find the final project here

If you have any questions, please feel free to leave a comment below