How to implement material CircularProgressIndicator in kotlin

Question

I am trying to show CircularProgressIndicator while my data are fetching from server but I get this error root.findViewById(R.id.loadingbar) must not be null.

Logic

Hide recycler view items till data are fetched
Show Circular Progress while data are fetching
Hide Circular Progress when data are ready
Show recyclerview items

Code

xml

<LinearLayout
    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:orientation="vertical"
    android:layout_height="wrap_content">

    <!-- Circular progress indicator -->
    <com.google.android.material.progressindicator.CircularProgressIndicator
        android:id="@+id/loadingbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:layout_gravity="center" />

    <!-- RecyclerView items -->
    <androidx.cardview.widget.CardView
        android:id="@+id/cardView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:elevation="8dp">

        <TextView
            android:id="@+id/order_Iid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:gravity="start|top"
            android:text="@string/order_ID"
            android:textSize="12sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/order_status_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|start"
            android:layout_marginStart="5dp"
            android:layout_marginTop="35dp"
            android:text="@string/order_status"
            android:textColor="#5CDCBD"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/order_price_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|end"
            android:layout_marginEnd="5dp"
            android:text="@string/price"
            android:textSize="12sp"
            android:textStyle="bold" />

    </androidx.cardview.widget.CardView>

</LinearLayout>

Fragment

Code is commented for better understanding

class OrdersFragment : Fragment() {

    lateinit var sesssion: SessionManager
    lateinit var laundriesRecycler: RecyclerView
    lateinit var progressBar: CircularProgressIndicator
    lateinit var cardView2: CardView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
            inflater: LayoutInflater, container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val root = inflater.inflate(R.layout.fragment_orders, container, false)
        sesssion = SessionManager(context)
        laundriesRecycler = root.findViewById(R.id.orders_list)


        // get progress
        progressBar = root.findViewById(R.id.loadingbar)
        //get recycler item
        cardView2 = root.findViewById(R.id.cardView2)

        getOrders()
        return root
    }

    private fun getOrders() {

        //show progress
        progressBar.visibility = View.VISIBLE
        //hide items
        cardView2.visibility = View.GONE




        var session = SessionManager(context)
        session.checkLogin()
        var user = session.getUserDetails()
        var token: String? = user.get(SessionManager.KEY_ACCESS_TOKEN)
        val tokenFull = "Bearer $token"

        val queue = Volley.newRequestQueue(context)
        val url = "https://example.com/api/orders"

        val stringReq : StringRequest =
                object : StringRequest(
                        Method.GET, url,
                        Response.Listener { response ->


                            // hide progress
                            progressBar.visibility = View.GONE
                            //show items
                            cardView2.visibility = View.VISIBLE



                            val list = Gson().fromJson(response, OrderArr::class.java)
                            laundriesRecycler.layoutManager = LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false)
                            laundriesRecycler.adapter = OrdersAdapter(context, list)
                        },
                        Response.ErrorListener { error ->
                            Toast.makeText(context, error.message, Toast.LENGTH_LONG)
                                    .show()
                        }
                ){
                    override fun getHeaders(): Map<String, String> {
                        val headers = HashMap<String, String>()
                        headers["Content-Type"] = "application/json"
                        headers["Authorization"] = tokenFull
                        return headers
                    }
                }
        queue.add(stringReq)
    }
}

Any idea?

Maybe you should consider using `ViewBinding`? It can reduce these NPE error — Teo, Apr 06 '21 at 02:47
And also, you might need to change your question to `root.findViewById(R.id.loadingbar) must not be null` to avoid confusion. — Teo, Apr 06 '21 at 02:56

Teo · Answer 1 · 2021-04-06T03:02:30.423

1

In you build.gradle(app)

android{
    buildFeatures {
        viewBinding = true
        dataBinding = true
    }
}

// 1 - direct inflate the fragment layout into Fragment()
class OrdersFragment : Fragment(R.layout.fragment_orders) {

    // 2 - view binding
    private lateinit var binding: FragmentOrdersBinding
    lateinit var sesssion: SessionManager
    lateinit var laundriesRecycler: RecyclerView
    lateinit var progressBar: CircularProgressIndicator
    lateinit var cardView2: CardView

    // 3 - directly call onViewCreated() as the layout already inflated
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        
       // 4 - bind view to viewBinding variable
        binding = FragmentOrdersBinding.bind(view)
        sesssion = SessionManager(context)
        getOrders()
    }

    private fun getOrders() {
        
        // 5 - After that, basically every element just call binding to locate them
        //show progress
        binding.loadingBar.visibility = View.VISIBLE
        //hide items
        binding.cardView2.visibility = View.GONE

    }
}

edited Apr 06 '21 at 03:02

answered Apr 06 '21 at 02:55

Teo

876
9
22

cannot find `binding.loadingbar.visibility = View.VISIBLE` the `loadingbar` is red – mafortis Apr 06 '21 at 02:58
Can you try to type `binding.`? The IDE will suggest the correct value to you – Teo Apr 06 '21 at 02:59
cannot find it. Here is screenshot https://ibb.co/5rpmnRk – mafortis Apr 06 '21 at 03:01
try to add `dataBinding = true` in your gradle. I think it's belongs to databinding instead of viewBinding – Teo Apr 06 '21 at 03:03
what if i simply use `loadingBar.visibility = View.VISIBLE` and not using `binding`? – mafortis Apr 06 '21 at 03:06
That's so-called `ViewBinding` I think. But it is using Kotlin synthetics and this library will soon deprecated, it is better to stick with `Binding` https://developer.android.com/topic/libraries/view-binding/migration – Teo Apr 06 '21 at 03:09
By using `binding.`, it is more stable as you target it to corresponding layout. – Teo Apr 06 '21 at 03:09
ok, but still the error exist (cannot find the id) – mafortis Apr 06 '21 at 03:10
i think i got the issue, testing,,, – mafortis Apr 06 '21 at 03:12
Ok I've fixed it, I will vote up your answer because it was the reason I figure it out but I will publish working solution. Thank you so much. – mafortis Apr 06 '21 at 03:17
Thanks for your upvote, hope it helps :) – Teo Apr 06 '21 at 03:23
it definitely did, appreciate it – mafortis Apr 06 '21 at 03:24

mafortis · Accepted Answer · 2021-04-06T03:35:40.443

Solved

Special thanks to Teo who made me realize the issue.

Fixes

Instead of having my progress inside my items xml I had to add it into my fragment xml where my recycler code placed (#1 misplaced code)
Using binding (unlike Teo mentioned , there is no need to use onViewCreated infact that cause undefined binding error. Instead it should be defined inside onCreateView function) Here is the final code

    private lateinit var binding: FragmentOrdersBinding
    
    override fun onCreateView(
      inflater: LayoutInflater, container: ViewGroup?,
      savedInstanceState: Bundle?
    ): View? {
      // Inflate the layout for this fragment
      val root = inflater.inflate(R.layout.fragment_orders, container, false)
      sesssion = SessionManager(context)
      laundriesRecycler = root.findViewById(R.id.orders_list)
      binding = FragmentOrdersBinding.bind(root) // <--here
      getOrders()
      return root
    }
    
    private fun getOrders() {
      binding.loadingBar.visibility = View.VISIBLE
      binding.ordersList.visibility = View.GONE
      
      // API process and flip those 2 lines above in success response to
      binding.loadingBar.visibility = View.GONE
      binding.ordersList.visibility = View.VISIBLE
    }

How to implement material CircularProgressIndicator in kotlin

Logic

Code

2 Answers2

Solved

Fixes