A look at the code!

Posted on Updated on

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.

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical” >

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!

<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/niktechs” />

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!

Advertisements

3 thoughts on “A look at the code!

    […] 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!. […]

    ct2020 said:
    July 25, 2012 at 4:12 am

    The text seems to be taken from a string in the res/values folder.

      Nikhil Gupta responded:
      July 25, 2012 at 9:26 am

      Yeah! The code has been taken from the main.xml file in the layout folder. I just wanted to explain various aspects of the code which is automatically generated when you create a new project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s