Guessing Game – Preparation

In this chapter of the Guessing Game tutorial we are going to talk about the preparation of the game. It means, we are going to build up the user interfaces, then we are going to add the needed dependencies and we gonna enable the Data Binding as well.

After that, we are going ot create the navigation graph. Finally, we gonna show you how you can transform the original layout to use Data Binding. So, let’s start coding. 😎

Step 1 – Create new project

First in this tutorial, we have to create a 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 dependencies

We are going to use in this tutorial Data Binding library to connect the data with the layout. For the fragment’s navigation the Navigation Component and observable LiveData as well to notify the UI.

If you are not familiar with Data Binding, then check out our basic tutorial: Data Binding – Basics

If you need to refresh your knowledge about Navigitaion Component, then read this tutorial also: Navigation Component

So, to enable this libraries for our project, open from the left Project tab, in Android view, the Gradle Script section. From here, open the Module build.gradle.
Kapt

First of all, we are going to enable the kapt, which stands for Kotlin Annotation Processing Tool. This will allow us later on to use annotations inside of the BindingAdapter.

So, at the top of the Module build.gradle file, paste the below line.

apply plugin: ‘kotlin-kapt’

Target JVM

Then, inside of the android{} section, we have to tell for Android the target JVM also. Otherwise, the Navigation Component won’t work properly.

Copy and paste the below line into the android{} section.


Target JVM
Enable Data Binding

To start using Data Binding in your project, you have to enable it inside of the Module build.gradle file. It means in practice, that we gonna add the below line also into the android{} section.


Enable Data Binding
Dependencies

Next, we are going to add 3 dependencies. With them, we gonna enable LiveData, Navigation Component and the Material Design.

Add the below lines at the end of the dependencies{} section.


Dependencies
The versions

As you can see, we have defined some variables, which store the versions of the above mentioned dependencies. In our case, we gonna define these versions in the Project build.gradle file.

So, open the Project build.gradle file also from the left Project tab. It is next to the Module build.gradle file.

In this file in the buildscript{} section, you can find the version of Kotlin. We gonna add the needed versions in the same way. So, copy and paste the below versions after the Kotlin‘s version.


Version
Sync the project

The last step after the modification is to syncronize the project. For this, click on the Sync now link at the top right corner of Android Studio.

After the successful sync, you can close the Gradle files.

Step 3 – Create the fragments

As we have talked about, our app will be very simple. It means in our case, that it will have only 2 user interfaces. One for the game and one to change our username.

GameFragment

First, we are going to add the GameFragment. For this, expand from the left Project tab the app and java folders. Then on the first folder, which holds the name of the project’s package, click with the right mouse button, select the New option from the quick menu, then Package. Finally, name the new package as “ui”.

Now, select the MainActivity.kt file and drag & drop it into the ui package. In the popup window click on the Refactor button.

Next, click with the right mouse button on the ui package, select again New, but in this case move you mouse to the Fragment submenu, then choose the Fragment (Blank) option. In the popup window name the new fragment as “GameFragment”.

In the created fragment will be many lines of code, what we won’t use. After the modifications, the fragment should look like below.


GameFragment
ChangePlayerDialogFragment

In the next step, we gonna create a fragment for the bottom sheet dialog either. So, create a new fragment in the same way as we did it before, and name it as “ChangePlayerDialogFragment”.

In this case we gonna change the super class from Fragment to BottomSheetDialogFragment.

After thet the class of the dialog should look like this:


ChangePlayerDialogFragment

Step 4 – Download the assets

Before, we can create the layouts of the UIs, we have to add to the project some pictures, shapes and new values, strings. They are already prepared. Your task is to download them by using the below link:

Download Assets

After the download, extract the ZIP file into the app\src\main\res folders.

Step 5 – Create the user interfaces

Next step is to prepare the UIs of the fragments.

Layout of the GameFragment

Open the fragment_game.xml file from the res->layout folders and paste there the below code.


fragment_game.xml

This layout contains first the name part. Later on, when we tap or the blue text or on the pen icon, the bottom sheet diolog pops up from the bottom of the screen.

The second part ot the layout is the game. First an EditText, where we can type in our guess. Then a Button, which will compare our guesse to the hidden generated number. Below them will be the result of the comparison visually.

Transform the layout to a Data Binding layout

As we have talked about, we are going to use Data Binding library in this project. So, to start using it, we have to transform the layout to use the library. For this, put the cursor to the word of the ConstraintLayout at the top of the layout file.

Then press Alt+Enter 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”.

The result is that the original root view gonna be moved inside of the <layout> tag, and at the beginning of the file you should have the <data> tag also. After that you can find the original view.

Layout of the ChangePlayerDialogFragment

Next, we are going to prepare the layout of the ChangePlayerDialogFragment also. So, open again from the res->layout folders, the fragment_change_player_dialog.xml file.

It will contain only a TextView, an EditText and a Close Button.


fragment_change_player_dialog.xml
Transform the layout to a Data Binding layout

As we have done it in case of the fragment_game.xml, we gonna transform this layout to a Data Binding layout also. So, in the same way, move you mose to the root view, then press Alt+Enter on Windows or Control/Option+Enter on Mac. From the Show Context Actions menu select “Convert to data binding layout”.

Finishing

That’s all for now. In the next chapter we are going to implement Navigation Component.

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 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 *