RecyclerView – Add new items

In this chapter of the RecyclerView Andorid tutorial we are going to add new items to the list. Our application already contains the RecyclerView, the action buttons, and the user interface of the dailog, where we can add the detailes of the new ToDo item.

In the very last chapter (Adapter + ViewHolder) we have created the adapter, which handels the items of the list. We have created the view holder as well. The view holder’s task is to set the itemss’ values and to handle the click listeneres.

We are going to add the action for the Send button. This will call a method inside of the viewmodel, which will update the list and the RecyclerView, that a new item had been inserted.

So let’s start coding. 😎

GitHub

If you haven’t done the previous chapters, then from GitHub you can download the starter project for this chapter.

GitHub – adapter_and_viewholder branch

Step 1 – Add new to ToDo to the list

As we have talked about earlier, we have created already a ViewModel, where we store the list of the RecyclerView. We are going to have there all of the operations on the RecyclerView either.

First, we are going to add to the ToDoViewModel::class the addToDo() method. So, open the ViewModel, and paste the below code there.


addToDo()

First in this method, we gonna add the new item to the list. Then, we gonna add the whole list to the MutableLiveData, whose value is returned by the listOfToDosLiveData LiveData.

That’s all about the ToDoViewModel::class.

Step 2 – Set the observer

From now on, we can observe everywhere in our app the changes. We gonna have only one observer, which will be in the RecyclerFragment::class.

So open the class. There, we will create the observer inside of the onCreateView() method. 

Copy and paste the below code into the onCreateView() method. Be careful to paste it before the line of return.


The observer

Briefly, this method will be called, when the value of the MutableLiveData had been changed. When this happens, then the observer will notify the RecyclerView about the changes. The result is, that the new item will be added at the end of the list.

Step 4 – Create variables

We are going to handle the action of the create new item inside of the AddToDoDialog::class. For this, we will need some variables, and changes.

First of all, we have to create 2 new member variables inside of the class. So open the AddToDoDialog::class, and paste there the next 2 variables.


Member variables

The rootView variable will hold the layout of the dialog. The toDoViewModel can be familiar for you, because this will hold an instance of the ToDoViewModel::class from the Navigation Component.

rootView

The rootView is still not initialized. Because we have to use the views from the layout in other methods as well, we have to have this as a member variable and we will initialize it inside of the onCreateView() method. Here, we have to change the return and first save the View into this variable.

So, refactor the code like this:


Init rootView

From now on, we can use rootView in the method of the createToDo().

Step 5 – The createToDo() method.

Because we have to return a ToDo object and add to the list of the RecyclerView, we have to create an instance regarding the information from the filled dialog.

This method will get back a ToDo object directly. So, copy and paste the below code into the AddToDoDialog::class.


createToDo()

Note some things in this method. First, how we create the due date, then how we get the selected item from the Spinner.

Step 6 – Handle the actions

The last step of this chapter is to add actions to the Close and Send buttons inside of the dialog. The click listeners will be located in the onViewCreated() method.

The Close button

We can close the dialog, if we tap somewhere outside of the dialog, but to have a better user experince, we gonna implement a Close button also. Inside of the click listener of this button, we will call the dismiss() method.

Copy and paste the below code snippet into the onViewCreated() method, after the initSpinner().


tv_cancel
The Send button

The click listener of the Send button won’t be difficult neither, because it will call the addToDo() method from the ToDoViewModel, then we will close also the dialog.

Paste the below code after the click listener of the Close button.


btn_add

Run the app

Finally run the app. After a successful build, when you create a new ToDo item, then it will be inserted to the RecyclerView.

GitHub

The source code is available on GitHub

GitHub – add_new_item branch

Questions

I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

 


 

Follow and like us:
Click to rate this post!
[Total: 0 Average: 0]

Leave a Reply

Your email address will not be published. Required fields are marked *