Room basics – The starter project

In this chapter of the Room basics tutorial we are going to create the starter project. It means, that we are going to add the needed dependencies, add the fragments, implement the RecyclerView, which will hold our todos, create the data class and finally we will create the navigation graph as well.

Because we will use in this tutorial Kotlin Coroutines, Navigaion– and Lifecycle components, we have to add to the project some other dependencies. Thenafter we can start to implement the RecyclerView for our todos.

So, let’s start coding! 😎

Jump

As you can see, this chapter is a bit longer and it still doesn’t contain to much things about Room. In this chapter we are going to prepare the sample project to use Room.

If you want, then you can jump to the next chapter, because there you can continue the tutorial from the end of this chapter.

BUT, we highly recommend you to do this chapter as well. Why? Because, if you want to be a good programmer, then you have to practice all the time, and this chapter is a good opportunity for this.

Step 1 – Create new project

Our first step is to create a whole new project. For this, launch Android Studio and create a new project. If you see the “Welcome page” of Android Studio, then click on the “Start a new Android Studio project”.

If you have an open project, then from the “File” menu select “New”, then “New Project”. After thet, this window will popup.


Here select the “Empty Activity” option.

In the next window, we should provide some information about the newly created app.


As always, this tutorial will be written in Kotlin. So, select from the dropdown list the Kotlin language.

From the next list of the “Minimum SDK” select API 21. In our case API 21 gonna be enough.

There is a link, called “Help me choose”. If you click on it, then a colorful figure will show you the different Android versions and their imported innovations.

If you are done, click on the “Finish” button. The build can take few minutes. Be patient! 😉

When the build has been finished, then you should see the open MainActivity:class and next to this the activity_main.xml files. For now you can close both of them.

Step 2 – Add the needed dependencies

Next step is to enable for the project the dependencies, what we are going to use.

So, to add them to the project, go to the top left corner of Android Studio. There will be the tab called “Project”. Click on it and change the view to Android. Then open the Gradle Scripts menu and double click on the build.gradle (Module: app) file.
Kotlin Annotation Processing Tool

In the top of the file you will find some lines, which are starting like “apply plugin:…”. There paste the below line:

apply plugin: ‘kotlin-kapt’

This will enable us to use the Kotlin annotations in our project. It is needed, because we will use many annotations for Room.

Enable Safe Args

When we will modify an item from the RecyclerView, we will pass a ToDo object to the modification dialog. We can pass this data class with the Safe Args extension of the Navigation Component. To enabled them paste the below line after the previuos one.

apply plugin: ‘androidx.navigation.safeargs.kotlin’

Set the target JVM

Now, go a bit down, until the end of the android {} section. There paste the below lines also.


Target JVM

We need these line to use Navigation Componenets.

Enable Data Binding

Also here, after the JVM lines, paste the below lines also. These will enable in the project Data Binding.


Enabling Data Binding
Dependencies

Next is to add the dependencies. They are going to the dependencies {} section of the build.gradle (Module: app) file.

Copy and paste the below lines at the end of the dependencies.


Dependencies
The versions
The last step before we can synchronize the app is to define the versions of the above mentioned dependencies. We are going to do it in one place, which is located in the build.gradle (Project: app) file. You can find this file next the build.gradle (Module: app) file.

At the top of the file, inside of the buildscript{} section you should have the version of Kotlin.

After it paste the needed versions. After thet the versions should look like below.


The versions
Safe Args, one more thing

Ok, I promise, this will be the very last thing, what we have to do before synching. 😊

To use Safe Args, we have to add it to the build.gradle (Project: app) file also. Inside of the buildscript{} section should be a subsection, called dependencies{}

Copy and paste there the below line.


Safe Args Vol.2
Sync the project

Finally click on the “Sync Now” text, what you can find at the top right corner of Android Studio.
This can take some minutes, so be patient. 😊

Step 3 – Create the fragments

In this application we will have two screens. The first one will contain the RecyclerView, the second one will be responsible to create and modify the ToDos.

RecyclerViewFragment

So, click with the right mouse button on the name of the package from the left “Project” tab. Then, in the menu select New, then Package. In the popup window name this package as “fragments”. In this folder will be the two fragments.

Now, click on this new package again with the right mouse button, select New, and in this case go the Fragment and select the Fragment (Blank) option. Give it the name of “RecyclerViewFragment” and click on the Finish button.

Android Studio will automatically open for us the RecyclerViewFragment::class. There, we have many lines of code, what we don’t need. So, remove all of the not needed lines and paste the below code in place of them.


RecyclerViewFragment 

After the paste you will have some errors. Don’t worry, we are going to fix them later on in this chapter.

Now, open up the fragment_recycler_view.xml file from the res->layout folders.

First, change the rootview from FrameLayout to ConstraintLayout. Then, move your cursor to the ConstraintLayout. Press there on you keyboard the Alt+Enter hot keys on Windows or Control/Option+Enter on Mac. This will open up a quick menu, the Show Context Actions menu. There, select the first option, which is “Convert to data binding layout”.

After the conversions, we will add the RecyclerView and a Floating Action Button to the layout.

The result should look like below.


fragment_recycler_view.xml
Add the ic_add image

After the past, you will have an error, because our project still doesn’t contain the ic_add image.

So, click again with the right mouse button on the drawable folder, which is located in the res directory. From the menu select New, then Vector Asset option. By default, the Android icon will be there. Click on it in the line of Clip Art. Type in the search field “add” and select from the right icons the add icon, then click on the OK button, name the icon as ic_add. Finally, click on the Next and Finish buttons.

The error shouldn’t be there anymore. 😎

Change the class

To start using Data Binding, we have to change the RecyclerViewFragment::class again a bit.

Add the next line as a member variable.

private lateinit var binding: FragmentRecyclerViewBinding

Then initialize the binding variable in the onCreate() method.

binding = DataBindingUtil.inflate(
    layoutInflater,
    R.layout.fragment_recycler_view,
    container,
    false
)

AddToDoDialog

The second fragment is the AddToDoDialog. As we have done it before, create a new blank fragment in the fragments package.

Now, open the fragment_add_to_do_dialog.xml file from the layout folder, which is in the res directory.

Already now, we are going to add the needed views to the layout. So, replace the current xml code with the below lines.


fragment_add_to_do_dialog.xml
The colors

The colors are defined in the colors.xml file. You can find it in the values folder, what you can find in the res directory.

Repleace its value with the below colors.


colors.xml

If you don’t like these colors, then you can change them by your own, it depends on you. 😀

The AddToDoDialog::class

In this tutorial we won’t go into the detailes of how you we can implement this dialog, nor the RecyclerView

If you are still interested in, how you can create it, what is the meaning of the lines, then check out our RecyclerView basics tutorial.

So, copy and repleace the current code of the AddToDoDialog::class with the below one.


AddToDoDialog::class

Don’t worry because of the many errors, we are going to fix them.

Strings.xml

First open the strings.xml file from the res->values folders and replace the values with the below lines.


strings.xml

Step 4 – Enum of Prioirities

We are going to use an enum to identify the priority of the todo items.

What does enum mean? Check out our tutorial.

Enum

For this enum, we are going to create a new package, called “enums”. Do it as we have done it in case of the “fragments” package.

Insid of the “enums” package create a new Kotlin file. So, click on it with the right mouse button, and from the menu select New, then Kotlin file/class. Then name it as “Prioirities”.

Paste the below few lines into the Prioirities::enum.


Prioirities

Now, go back to the AddToDoDialog::class and import the Prioirities::enum, there move the cursor to the error and press there on you keyboard the Alt+Enter hot keys on Windows or Control/Option+Enter on Mac. This will open up a quick menu, the Show Context Actions menu. There, select the first option, which is the Import.

Step 5 – Create the ToDo data class

The next step in this chapter is to create the ToDo data class. This class will hold the data for a todo item and this will be shown in the RecyclerView as well.

Don’t you know what does data class mean? Check out our tutorial.

Data Class

For the ToDo data class create again a new package, called “model”, then create inside of it a Kotlin file, which has the name of “ToDo”. Thenafter paste the below into it.


data class ToDo

Again, go back to the AddToDoDialog::class and import the ToDo::class there.

Step 6 – The adapter for the RecyclerView

We have three things left, what we are going to in this chapter. The first one is the adapter, which will handle the items of the RecyclerView.

Download the assets

The items of the RecyclerView will show us the priority of the ToDo item. For this, we are going to use a green, an orange and a red circle. You can download them using the below link.

Donwload assets

After the donwload, unzip the files into the your project’s res folder.

Layout of the item

Next, we have to create the layout of the item as well. So click with the right mouse button on the layout folder from the res directory, then select New and Layout Resource file. In the popup window name the new file as “item_todo_recyclerview”.

Copy and paste the below code into the new layout file.


item_todo_recyclerview.xml
The adapter

After the item, we can create the adapter for the RecyclerView as well. As before, create again a new package called “adapter” and create inside of it a new Kotlin file, called “ToDoAdapter”.

Copy and paste there the below code.


ToDoAdapter

Agaaain… an error??? 😡
Don’t worry. In the next step the navigation_graph will solve this as well. 😎

Step 7 – The Navigation Component

The Navigation Component will be responsible for the navigation inside of the app, and it will help us to pass the ToDo item, when we want to modify it.

The navigation_graph

Do you know what will be the next step? Yes, of course, a new directory. 😀

Create a new directory called “navigation” inside of the res folder. Then in this folder create a new resource file, called “navigation_graph”.

Then paste there the below code.


navigation_graph
The <fragment>

Aaa finally, the last step, which is an easy one. For the Navigation Component, we have to have a host fragment. It means a simple <fragment> view, which will be in our case in the activity_mail.xml file.

So, open it form the res->layout folder and paste there by replacing the TextView.


The host fragment

Run the app

And here it’s time to run the app….. but unfortunetly we can’t do too much things. What you can do now, is to tap on the Floating Action Button and open the dialog, which still doesn’t do anything when you click on the Add button.

GitHub

The source code is available on GitHub

GitHub

Questions

I hope the description was understandable and clear. But, if you have still questions, then leave me a comment 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 *