[ Android ] DAY-5 XML – Based Layouts

Posted: January 19, 2011 in Android

Introduction:

In some developer books, we know that Android is support XML. But supporting XML is really meaningful? And why we need to use XML – based Layouts? Here is your answer.

1. Before we start, we should know what is XML – Based Layout. Actually, XML – Based Layout is a format which is made up by several parts. They are the Specifical widgets’ containers. If you have any experience about HTML, you will know how it looks like.  It looks like a tree, the containers are the elements of  the tree.

2. Alright, next is why we should use that? In the book (Beginning Android), it’s described:

Most everything you do using XML layout files can be acieved through Java code. For example, you could use setTypeface() to have a button render its text in bold, instead of using a property in an XML layout. Since XML layouts are yet another file for you to keep track of, we need good reasons for using such files.

From these words, we know that by using XML – Based Layouts can help us for programming. In fact, most UI is made up by the similar format as XML. Such as, XUL, XAML, HTML, and so on.

3. The next is our topic. What’s the difference between using XML – Based Layouts and not using.

Did you remember the previous sample of Now. We using that to compare the differences.

I show you the coding without using XML – Based Layouts:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

package com.android.Now;

import android.app.Activity;  // If you want to creat an Activity, must have this.
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import java.util.Date;

public class Now extends Activity implements View.OnClickListener {
    Button btn;
 
 /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        
        btn=new Button(this);
        btn.setOnClickListener(this);
        updateTime();
        setContentView(btn);
    }
    
    public void onClick(View view){
     updateTime();
    }
    
    public void updateTime(){
     btn.setText(new Date().toString());
    }   
}

After finish coding, we try to run AVD. This was the one that I used in DAY-3.

=====================================================

Now, using XML -Based Layouts. Coding:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

package com.android.Now_xml; //Create a new project and new app, named “Now_xml”

import android.app.Activity; 
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import java.util.Date;

public class Now_xml extends Activity implements View.OnClickListener {
    Button btn;
 
 /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);

       setContentView(R.layout.main); //There is  difference.
        
        btn=(Button) findViewById(R.id.button); //There also is difference.
        btn.setOnClickListener(this);
        updateTime();
    }
    
    public void onClick(View view){
     updateTime();
    }
    
    public void updateTime(){
     btn.setText(new Date().toString());
    }   
}

=============================================

But, finally display is the same.

 

Maybe someone will ask, but you didn’t use the XML. Yes, these just Java coding. And, only has these coding, cant run the program. We should edit something, that’s Layout.

I showed you the picture that is at the beginning of the blog, was the Layout without editing. So how to edit? We should find the correct place:

We find the main.xml of folder “layout”. We should do the following: (Change the xml coding to these)

And also don’t forget “Ctrl+S”, save the file. Now, you can run the AVD.

==========================================================

android:id —— anything you want to use in your java source needs it.

android:text —— indicates the intial text to be displayed on the button

android:layout_width and android:layout_height —– tell Android to have the button’s width and height fill the parent.

Now, I think you have already know what’s the difference by using XML – Based Layouts.

Hope you understand, and thanks for reading.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s