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!
So, it’s time to culminate our initial discussion on layouts. Till now, we have looked at the WYSIWYG editor, the code for the layout and a visual editor for playing with strings. Now, we shall come to the query raised in the last post, i.e., the value taken by the android:string attribute of the TextView which is described in the line:
For those who have been following this blog, it must be really easy now. But, still I should give the details for the sake of completeness.
Clearly, @string is a way to tell the compiler that the variable which will follow after a ‘/’ represents a string. This is necessary to distinguish the different types of variables. Yes! There are other kinds of variables which represent color, dimension, array, etc. Right now, I am not going to discuss how to use those variables. But, if you are one of those who really like to stay ahead, open the strings.xml and click on add. You will see the following dialog box.
Now, it’s on you to explore!
Also, the name that follows the ‘/’ is the name of the variable whose value is to be given to the android:text and thus, is to be displayed on the screen. Here, since the name is niktechs, the text that is displayed on the screen will be same as the value of the variable niktechs which is Developing Android Applications with Nikhil Gupta.
Now, I think I have laid the foundation of discussing the other way of changing the text on the screen. Remember, in the post titled Laying out the screen!, we saw how to use WYSIWYG to change the text on the screen. For a quick flashback, we used the edit text option and created a new R.string whose value was the text that we wanted to display.
The other way results from our discussion in the previous post. There, I created a new variable of type string named Blog. Now, instead of using the WYSIWYG editor, we can simply change niktechs (in the code describing android:text attribute) to Blog and save the file.
Now, look at the GUI (click on main.xml and then, choose Graphical Layout tab). What do you see? Yes, the text has been changed to Android Development which is the value of the variable Blog. Why does this happen? I hope that it’s now trivial for all. Since Blog is just another string type variable like niktechs (discussed in the previous post), replacing the two will result in replacing the values of the android:text attribute and hence, the text on the screen.
So, we have looked at the basic layout features and understood each and every concept related to it. But there are various attributes that can be used in the code for layout which can greatly vary the screen. It’s up to you to explore them. I may discuss a few of them, but only in the later posts. If you want to explore, go to a tag, type android: and press Ctrl+Space. You will see the entire options that are possible.
In the next few post, we will finally go into the JAVA coding. So, a lot more interesting stuff coming soon!
Till next time, BYE!
In the last post, we looked at the code for the layout of an android application. But we didn’t discuss discuss the strange value taken by the text attribute of the tag “TextView” and how it decides the text display by this TextView. Were you able to find any correlation?
In this post, I will discuss about strings in an android app. The concepts discussed in this post will be used to anwer the above query in the next post. So, let’s start!
Click on the values folder (It’s in the same directory as the layout folder). Do you find something which is related to our interest? Yes, a file named string.xml. Let’s open it! What do you see?
You can see that strings.xml opens up in an interactive editor. This editor is used to add Resources (to be discussed later) to our android application. For now, it’s sufficient to know that strings are treated as resources in an android app and hence, this editor allows us to make, modify or delete strings.
We can see three Resource Elements (as specified in the header), all being of type String as mentioned in the brackets beside the name. Thus, our android application has three resources, all of them being strings. The names that are visible are the names of the variables that are used to store the string type values (similar to the fact that x is a variable used to store integer type values when I write int x = 10 in C). Thus, hello and app_name are two string type variables which are automatically created during the creation of a project.
To look at the values stored by these variables, simply click on them. On clicking hello, you will see a panel in the right which displays the name of the variable and it’s value. Now, looking at the value of the variable hello, I hope that you can make out how the text displayed at the screen originally came about. Yes!, the value of this variable is Hello World, HelloWorldActivity!, the original text on the screen.
You must have seen another line of text in the screen of the app. Look at the value of the variable app_name and try to find out the place at which it is used. Comment below if you are able to find it!
Now, do you see why a variable named niktechs is there in the list? How it was created? Do you remember, while editing the text on the screen (Refer to the post Laying out the screen) , we made a new string variable? Yes, that variable is the same as displayed here. The value given to the field R.string there, is the name of the variable and the value is the same as given that time. Thus, when we changed the text displayed at the screen, we actually created a new string variable and gave its value to the TextView.
As mentioned earlier, we can create a variable by using this editor. Simply click on Add. A dialog box opens up. Don’t be afraid to see so many options. We will look at them as we proceed. For now, simply select String. In the resulting window, simply set the name (let’s set it to Blog) and the value (I am setting it to Android Development) as required and save the file. This creates a new String type variable.
We can modify a string by simply changing its value and saving the file. To delete a variable, simply select Remove.
Thus, we have seen how to play with strings in an Android Application. What is left to discuss is how to use these strings in the app. How these variables relate to the text displayed on the screen? How it answers the query raised at the beginning of the post?
All of this coming in the next post!
Till then, BYE!
In the last post, we looked at the development of the layout of an Android app using the WYSIWYG editor. Now, it’s time to look at the code, which actually does the required work at the back end.
Code?? Yes, every layout file has an associated code and the WYSIWYG editor simply executes this code to show a replica of what the screen actually looks like. The main purpose of this code is to declare all the components, set their properties and describe how they are related. The relationship is defined by a hierarchy where the lower components constitute the upper components.
So, were you able to find the associated code?. If not, open the main.xml file and change the tab from Graphical Layout to main.xml (available at the border between editor and the console window).
So, how the code looks like? If you are familiar with XML or HTML, you may see a somewhat similar style but absolutely different content. For others, it may appear totally new! No problems, we do not have to worry about all the details. Let’s analyse!
The code declares every component using predefined tags. Just like an HTML code, every statement in this code has an opening and a closing tag (except the first line), i.e., it starts with <tag1> and ends with </tag1>. Every statement within these tags declare the components which constitute the component defined by the tag. Remember the hierarchical model we discussed before!
<?xml version=”1.0″ encoding=”utf-8″?>
This is a declaration with which almost every xml file starts with, declaring its version and encoding style. Since it is not a tutorial on xml, we will take it as a line of text which we have to include at the top.
This line basically declares a Linear Layout for the entire screen, a top-level component which can itself have various components within it. All the other components like Buttons, TextViews can be a part of a Linear Layout. A Linear Layout can have a linear layout within itself too. Since we have to place various components on the screen, we have to declare a linear layout for the entire screen. That’s why, its opening tag is situated in the very beginning of the code. Just check out the last line of the code. What do you see? Yes! It’s the closing tag for this linear layout, justifying the claim that it’s the highest level component in the code.
The rest of the statement basically sets some of the properties of this layout, by setting the values of the parameters of this linear layout called attributes. Thus, the above statement sets the values of four attributes. Since the first one will remain same for our discussions and is not going to affect us in programming, let’s leave it as it is!
Coming on to the other attributes, android:layout_width sets the width, android:layout_height sets the height and android:orientation sets the orientation of the linear layout. In the code above, both the height and the width have been set to fill_parent, a keyword to ensure that this linear layout is the topmost level component which fill the screen entirely both in width as well as height. I hope that you can make out the use of vertical orientation. If not, try to change it to horizontal and explore!
This is the line of text which declares the TextView which is responsible for the text displayed on the screen. It also has various properties like width (fill parent to ensure that it fills the entire width), height (wrap content to ensure that the height is adjusted automatically according to the length of the content) and text whose value decides which text to display. We will see why it has such a strange value in the next post. If you can make out, please comment!
Also, since this TextView will not have any other sub-component, we can use a self-closing tag as used above. A self-closing tag looks like <tag2 />.
Please note that this discussion is not at all necessary for the development of the apps as we can always use the WYSIWYG editor and forget completely about what goes in the back. My motto for discussing the code was just to tell you that it just doesn’t happen out of the blue, there’s something which is actually doing the things that you are seeing in the WYSIWYG editor.
OK! So, we have become familiar with most of the code except the value of the text attribute of TextVIew. In the next post, I will discuss it and also, look at some other ways of changing the text displayed on the screen by a TextView.
Till then, BYE!
Having talked about the project structure and various other basic concepts in the earlier posts, it’s time now to move towards the actual development of the app. So, How should we start? Should we simply start coding? According to me, the answer is NO!
The first thing that decides the success of an app is its GUI (Graphical User Interface). For those who are new to this word, it refers to the intermingling of design and interactive components, i.e., an app with a nice GUI will have the required number of menus, buttons and other interactive components placed according to a proper design. The effort should be made to ensure that the GUI reflects the purpose of the app. Also, it should be user-friendly, i.e., user should not be be made to search randomly in order to access a particular function, rather, the app should be automatically dictating the user where to go to find that function. How to achieve this? This is something that the developer gradually grasps over the course of time. I will try to help by explaining my motives of choosing a particular GUI, though it’s still your personal preference.
OK! So, the question is how do we set up a GUI in Android. This is achieved by a file named main.xml present in the layout folder ( in the res folder). So, let’s open it up and explore what it offers to us!
The above figure is the image of the editor after opening the main.xml file. The right portion is exactly the same as the screen when the app runs (Remember! We had seen it in the emulator!). An important characteristic of this view is that the changes done in it are automatically reflected in the screen of the app, hence, its also called WYSIWYG (What You See is What You Get). For now, we will be just dragging the various components onto this view, which will automatically change the layout of the screen. The left component called Palette provides all the various interactive components like buttons, text boxes, so on and so forth, which can be dragged and placed on this WYSIWYG view. In this post, I will be just be focussing on displaying a text on the screen.
The layout that is automatically generated also shows some text (Here it is, Hello World, HelloWorldActivity!. Hope that you can guess where it came from!). The component which simply displays a text is called a TextView. You can drag the TextView from the Palette( visible under Fom Widgets). There are three sizes available initially (you can choose whatever you want later). This is what happens when I drag a Large Size TextView onto the screen.
So, you can simply place a text view by dragging and dropping. You can delete it by selecting and pressing Delete.
Ok! Now, let’s try to change the text which is automatically generated. Right click on it and choose Edit Text.
In the dialog box that appears, click on New String. In the resulting dialog box, write the value of the string in the text box beside String. For now, write anything beside New R.string(We will discuss it later) .
Click Ok twice. What do you see?
There are various simpler ways to do this. But, I mainly wanted to make you familiar with the WYSIWYG editor. We will discuss the other ways as we proceed. Now, it’s on you to explore the other components and modify their properties.
In the coming posts, I will be discussing various other aspects related to the layout.
Hoping that the posts are really helpful!
Till next time, BYE!
So, it’s time for another post. Let’s start!
In the last post, we treated the entire project folder as a black box and just performed some steps to create, debug and run an Android project. We also touched upon the concept of emulator. Now, it’s time to go inside the project folder and discuss each component separately.
Let’s have a look at the project structure created yesterday.
The top level folder is the name of the project. It’s the folder in your work space where all the files related to your project will be placed.
There are various files and sub-folders under this heading:
- src: As the name suggests, it is the name of the folder where all the source files are stored. If you click at the package name, you will find a file called *.java where * depends on the name of the activity you chose while making the project (Remember?). Do you see any need of having a package at the top? If not, wait for sometime.
- gen: This folder has files that are automatically generated. We will look at these files a little later. No need to worry for now!
- res: (Folders in between! Not much important. I will discuss if you ask for it.) . The sub-folders whose name start with “drawable” store the images which act as icons for the app in the various places in Android platform (the different folders are used to store different sizes as the icon size in the menu is different from the one in task manager and so on. Doesn’t make any sense! Don’t worry, we will come to it when we will try to change the icons of our apps. There are two important sub-folders named layout and values. We will look upon them in a greater detail in the next post.
- Android Manifest.xml: This file acts like a template used to tell the Android about the components of the project and it’s specific requirements. For example, it specifies whether the project is compatible with Android 2.2 or it requires any higher version. It also specifies which java file is the starting file for the project. For those who are realy curious, double click on it and go to AndroidManifest.xml tab (bottom of the editor window) and try to make sense out of it. For the rest, we will modify this file only when we will be talking about something called an Intent.
This tutorial was meant to be an overview for the posts to follow. In the coming posts, we will be playing around with the layout and values folder, and look at their capabilities in changing the properties of the app. Please share with me any kind of difficulties that you may be having. I will be happy to help!
Coming up with the next post soon!
Till then, Bye!