So folks in the last part we saw how to edit UI. Now let’s add some functionality to the app.
Caution: If you haven’t read the last part, it’s quite very possible that you won’t understand somethings over here. I recommend going over the last part.
At the end of the DIY task of the previous post your code should look something like the one shown below.
Now , what we will do is display the picture shown below when the user clicks the text odd number of times, i.e. 1, 3, 5, etc. And hide the picture when the user clicks the text even number of times, i.e. 0, 2, 4, 6, etc.
Let’s get started with the coding part.
Now we need to display 2 elements one below another. The simplest way is to use linear layout. Change the value of layout tag as shown below.
The linear layout is like a table. The android:orientation attribute decides the orientation of the table. Now as we need to display 2 elements in a vertical manner we will set the attribute to vertical. The android:gravity attribute decides the overall position of the contents. It’s like using the alignment option in a word processor.
We now want to display an image. In this layout, the contents of the screen are displayed in the exact same order as they are defined in the xml file, i.e. if you want to display the image above the text, add the ImageView above the TextView, and if you want it to be displayed below it just add the ImageView below the TextView.
We need to define an image view tag to display an image. Now let’s discuss the attributes.
Here, the android:id attribute is used to give a name to the view using which we can later refer to it in the JAVA code. The “@+id/” value is used to create a new id, while “@id/” value is used to refer to an object having the particular id.
The android:layout_width and android:layout_height attributes are used to define the size taken up by the view on the screen of the phone.
We will discuss about android:visibility later on, when we use it. For the time being add it with the attribute mentioned.
The android:src attribute defines the location of the image. Here, we are using the launcher icon of the app. You can also use any other image instead. For that you need to import an image into the project.
Naming the text view
Let’s give our TextView a name, so that we can later refer to it in our code. It’s a good practice to give meaningful ids to the views, so we don’t have to go back to the xml file to check the id of the view.
Here, I am using the id ‘txt’.
This is how our app finally looks.
Making things work
For each and every view we need to control, we need a variable of the same type to handle the input and output. So we need a TextView and an ImageView variable. The int variable ctr is to keep the track of number of taps on the TextView.
The first line links the variable mTxt to the TextView in the layout. This is the place where we use the id which we declared in the xml file.
The setOnClickListener asks the system to do some action when the user clicks the TextView. Here, we increase the value of ctr by 1, when the user clicks the view. Copy the code as it is shown in the last image.
Here, the android:visibility attribute which we added in the layout comes handy for making the image appear and disappear.
In the last line we link the mImg variable to the ImageView of our layout.
Now, you know how to add functionality to your app. We will explore more functions and libraries in the future posts. Also, I will show you how to test your app without making an apk file in the next post.
Till then if you want to run your app on a phone, you need to make an apk file. For the instructions on how to make apk files click here.