Guessing Game – BindingAdapter

In this chapter of the Guessing Game tutorial we are going to implement some custom attributes using BindingAdapter to show the result on the screen.

It means, we are going to create a new file, a Binding Adapter, where we will define some methods. These methods will be responsible to tell for the user visually whether the number is smaller, larger or you could find the number to guess. 

In the very last chapter (Guessing Game – Play the game), we have implemented the main part of the game. It means, that the game works perfectly, you can play with it, but still we can’t see visually the result, only in the Logcat of Android Studio.

GitHub

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

GitHub – play_the_game branch

Step 1 – Create a new file

To visualize the result, we are going to use a Binding Adapter, which takes the result as a GuessResult object.

So, with the right mouse button click on the utils package. Then, from the quick menu select the New -> Kotlin File/Class options and name the new file as “BindingAdapters”.

Step 2 – Text of the button

In the very last chapter we could play the game, but the blue button, which is repsonible to start a new game, or send the guessed number, still has no text. The text depends on the state of the game, is it runnig or not.

If the game doesn’t run, then the text should be “New game”, but if does run, then it should be “Guess”.

Using BindingAdapters and the annotations of the Data Binding library, we can make our own attribute for this Button.

The “app:state” attribute

Copy and paste the below method into the BindingAdapters.kt file.


gameRunning()
Notes
      • The @BindingAdapter annotation: It is usually a static method, and perform data conversion and injection for specific attribute in layout file.
        • “app:state”: This is the name of the attribute, what we can use for the Button.
        • “android:context”: We can have multiple attributes for one binding adapter. In this case the sequence of the attributes and the arguments has to be the same.
      • Context: We can pass the context as an argument. In this case it is the GameFragment. We are going to use it to get the string value from the strings.xml file.
      • The first attribute of the method has to be always the type of the view, where you want to use the custom method.
      • The when-expression will check whether the game is running or it doesn’t.
Usage of the attribute

To start using the above defined custom attribute, open the fragment_game.xml file from the res->layout folders.

Add the next lines to the btn_guess Button.


Custom attributes for the Button

Run the app

Run the first time the app. Now, you will have the text of the Button. Depending on the state of the game, it will be “New game”, or “Guess”. When, the game will be finished, then it will be again “New game”.

Step 3 – Image of the result

The next binding adapter will be responsible to show for the user visually the result. When the the guessed number is lower then the number to guess, then a down arrow, otherwise an up arrow will be visible. If the numbers are equal, then a nice trophy will appear on the screen.

The binding adapter

After the sort introduction, copy and paste the below below method into the BindingAdapters.kt file.


resultImage()

Note the annotation. There we have only the “app:resultImage” attribute. So, we can pass the GuessResult object by calling later on this attribute on the iv_guess_result ImageView.

Note also the .let lambda. This lambda expression will check the value of the result argument. If it is null, then the body of it won’t be executed. This can happen, when you just opened the app or the game has been finished.

When the result is not null, then a when-expression will decide which case should be executed.

The usage in the XML layout

As we have done before, we can start using the above created attribute by adding it to the iv_guess_result ImageView.

So, open again the fragment_game.xml file from the res->layout folders and add the below line to the iv_guess_result ImageView.

app:resultImage=“@{gameViewModel.result}”

Step 4 – Text of the result

Before we test again the app, we are going to implement one more Binding Adapter. The third adapter will show in texts the result under the image. 

The binding adapter

So, go back to the BindingAdapters.kt file and paste there the below method.


resultText()

Note again, thet we gonna ask here the context in the attribute and as an argument as well, to get the string value from the strings.xml file.

The usage in the XML layout

The usage goes again into the fragment_game.xml file from the res->layout folders, but in this case add the below 2 attributes to the tv_guess_result TextView.

app:resultText=“@{gameViewModel.result}”
android:context=“@{context}”

Run the app

Finally, our app contains all of the methods, what it needs. So, run again the app, and play with it. 😊

GitHub

The source code is available on GitHub

GitHub – BindingAdapter 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 *