fbpx
Add Pull To Refresh to your Android app using Kotlin

Add Pull To Refresh to your Android app using Kotlin

Pull to Refresh is a gesture that is being used in a lot of 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‘.

Twitter uses Pull To Refresh to update user’s timeline

Add Pull To Refresh to our app

First, in our XML layout, we’re going to change the parent layout to LinearLayout and add the orientation to vertical (or you can use ConstraintLayout).

Next, we going to add the SwipeRefreshLayout, this adds the pull to refresh gesture, and inside that, we’re adding our RecyclerView, just like that:

<?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:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              tools:context=".MainActivity">

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

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

</LinearLayout>

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() {

    lateinit var itemsCells: ArrayList<String?>
    lateinit var adapter: Items_RVAdapter

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

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

        //** Set the adapter of the RecyclerView
        setAdapter()

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

        //** Set the colors of the Pull To Refresh View
        itemsswipetorefresh.setProgressBackgroundColorSchemeColor(ContextCompat.getColor(this, R.color.colorPrimary))
        itemsswipetorefresh.setColorSchemeColors(Color.WHITE)

        itemsswipetorefresh.setOnRefreshListener {
            itemsCells.clear()
            setItemsData()
            adapter = Items_RVAdapter(itemsCells)
            itemsrv.adapter = adapter
            itemsswipetorefresh.isRefreshing = false
        }
    }
}

Inside in the setOnRefreshListener listener what we do is:

  • Clean our array from the previous data (line 24)
  • Call backend to download the data again. In our example, it just creates a list of numbers (line 25)
  • Pass the adapter to RecyclerView’s adapter (lines 26 – 27)
  • Stop Pull-To-Refresh animation (line 28)

…and done!

You can find the final project here

If you have any questionsplease feel free to leave a comment below

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Taha

Great explanation with Kotlin <3 !
thank u.