Code (Android)

A Simple App! (Part 2)

Posted on Updated on

So, it’s time to continue with the development of the app (which we started developing in the previous post). First of all, let’s look at the android:id attribute of the tag Button.

By now, we know that id is used to provide a unique value to a component which can be used to access it later anywhere in the project. As an attribute, its value starts with @id. In our code, we can see that @+id has been used. Why is it so? Any guesses!

Actually, when a particular ID is used first time for a component, we need to use @+id to tell the compiler to assign the given value as the ID of the component.

Thus, the following line of code

android:id=”@+id/button1″

basically assigns the id button1 to the Button on the screen. Later, we can use @id/button1 to refer this component while defining a value of an attribute. What does that mean? Suppose, while defining the layout, I want to refer to this button in some attribute of some tag. In that case, I will be using @id/button1. But, We need to use something else in order to reference this button in the JAVA code. Let’s see!

We have understood the layout of the app. Now, let’s open HelloWorldActivity.java. So, we need to refer to that button. How will we do this? For simplicity, let us call a function setUpViews() in the onCreate funtion. Since, this function has not been created till now, Eclipse will show an error. To rectify, simply hover on it and Select “Create method”. It will automatically create this function as a member of the Activity.

In the function, write this line of code:

NotifButton = (Button) findViewById(R.id.button1);

Can you make out what this does? R.id.button is used to reference the button in the code. How? R.java is the file that acts as a link between the code and various components and resources. I think id.button1 is self-explanatory. (For curious readers, open the R.java file in gen folder and explore!).

findViewById is a function used to provide a handle to the component using which various functions provided by Android SDK related to a component can be accessed. Difficult? Don’t worry! Treat it simply as an identifier which can be used to interact with the component. You can also see that the output has been type-casted to type Button. This is required as this function is used for various components and returns a generic handle which must be type-casted according to the component.

After this long story, the conclusion is that NotifButton is a handle to the component Button (whose id is button1). Also, when you write this line, an error is shown since NotifButton has not been declared. Simply hover over it and select “create field NotifButton”. Why not others? Try to find out.

Now, it’s time to use a function which is executed every time button is clicked. This is done using the following syntax:

NotifButton.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

}
});

This is just a syntax used to access this kind of function. Anything written in the onClick block gets exceuted when the button is clicked. For now, write the following line of code in the onClick function.

Toast.makeText(getApplicationContext(), “Hello World!”,Toast.LENGTH_SHORT).show();

Save the file and run the project. What happens?

In the next post, we will look at the above line of code and discuss some other coding aspects in Android App Development.

Till then, BYE!

Advertisements

A Simple App! (Part 1)

Posted on Updated on

Hi everyone!

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!

 

Let’s Code!

Posted on Updated on

Hi all!

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!