Having discussed most of the basic concepts required to start the development of Android apps, let’s not wait any more! Let’s go straight to the development!
Today, we will start building the simplest version of the Hello World app (other than the one which is automatically generated! Remember? Refer to Let’s Code!) , in which we will focusing on the use of buttons and toasts(?? Don’t worry! I will discuss!) in Android applications. In the coming few posts, I will be building upon this tutorial to discuss the various concepts finally leading to the development of the app.
So, Let’s start! Open the Hello World Project that we created in the post titled Let’s Begin!.
Go to main.xml in the layout folder, drag a button from Form Widgets and place it onto the WYSIWYG screen. Go to the code! Is there any difference from the code discussed earlier?
Yes! We have a new tag named Button with various attributes! Let’s focus on each of them. Clearly, android:layout_width and layout_height are used to define the width and the height of the button respectively. By default, they are set to wrap_content. I hope you are familiar with this term. If not, please refer to the post titled A look at the code!.
Change the android:layout_width attribute of the Button tag to fill_parent in order to make the button stretched to the entire width of the screen, and leave the android:layout_height as it is. Save main.xml. Your screen in the WYSISYG editor should look as follows:
Refer to the code again. There are two more attributes for the tag Button. The android:text attribute sets the text which is displayed on the button. By default, it is set to Button and that’s why, the default text on the Button widget is Button.
You may also find a warning on this line. Can you guess why is it so? Basically, in the code that is generated automatically, android:text attribute has been set to the string Button whereas as per the correct syntax, one must declare a string variable (for example, button) whose value is Button and then, reference it by using @string/button in the value of this attribute. To fix it, simply click on the attribute, right click and choose Quick Fix. You will be provided with various options. Simply, select Extract String which will display a dialog box, in which set the R.string value to button and String to Button. Click OK and save the file. The text Button will replaced to @string/button and the warning will be gone.
We will look at the android:id attribute later. For now, simply run the project. What do you see?
You will find that there will be a button on the screen but, when you click it, nothing happens! Why?
In the next post, we will discuss the android:id attribute and it’s use in implementing the functioning of a button.
Till then, BYE!
So, I am back again. This time, we will delve into the coding arena and try to understand the code that is automatically generated when you create a new project (Remember! when we had run the project in the post titled Let’s Begin! , an app was launched in the emulator in spite of the fact that we had not written any code ourselves).
How did that happen? We have already seen that the layout which is automatically created when we make a new project is exactly same to the screen of that app. What about the rest of the its functioning? Who tells Android to set the screen to that particular layout? Let’s see!
If you open the project, click on the package name (in our case, it was com.hello.world) and open the source file (which is HelloWorldActivity.java in our HelloWorld project discussed in previous posts), you will find a few lines of code. The code which does the task mentioned above. But, the question is How?
The first line of code is simply to tell the package name to which this class belongs to(Class? For now, it is sufficient to understand that it is the most basic component of a JAVA code, which encapsulates other functions and variables . We will look at them in a greater depth in the coming posts). It’s the same as selected while making the project. The second line of code simply imports the android classes that are already present in the Android framework and provide us the functions required in the code.
Now, you can see we have declared a class with an access modifier called public which poses no restriction on the access (For those who are unfamiliar with it, we will come to that later). The name of the class is same as the name of the java file. Now, the code says that this class extends an Activity. So, what is an Activity? An activity is the top level component ( a pre-built class) which controls what you see on the screen. It may either cover the entire screen or a part of it, but only one activity runs at a time in Android. So, even if the activity covers just a part of the screen, the remaining part will be inactive till the time that activity is running.
So, the third line of code basically declares a class with no access restrictions, which extends an Activity (because of which we call this class an Activity as well!) so that it can interact with the screen, which means that this class can use all the functions and variables provided by the Activity class.
The rest of the code simply defines a function which is automatically called when this activity is first created. We don’t have to remember the syntax as this function is automatically generated. There are two things happening in this function. We don’t need to discuss the first one.
What about the line setContentView (R.layout.main)? Can you guess what this line of code does?
In the next post, we will discuss this line of code and also, dive deeper into the coding world of Android App Development.
Till then, BYE!