Hello World in My Own Way
I sharing this example and hoping someone will benefit from it ;P


Pre-Requirement

1. Know the different between android layout
http://code.google.com/android/devel/ui/layout.html

2. Understand android GUI and how to implement it
http://www.droiddraw.org/widgetguide.html

The Idea
Based on the 2 forms … The first form will allow the user to enter value and pass it to the other form. The second form will only display the value that come from the first form

Step 1: Analysis the Prototype

Step 2: Implementing the GUI

1. Create 2 xml files in layout folder inside the res folder
-- Each xml file will represent the GUI for one form
-- Avoid using capital letter in naming the xml file, cause it affect the R.java which may cause you a problem in future.

2. Use the following code as sample to start implementing the GUI
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent“
……complete the code……….
</RelativeLayout>

3. To test your GUI
Go to your java file under the src folder, and edit onCreate method by adding the following line on it:
--- super.onCreate(savedValues);
---setContentView(R.layout.nameOfYourXmlFile);

The implementation of the first form

Syntax: [ Download ] [ Hide ]
Syntax: [ Download ] [ Show ]
Using xml Syntax Highlighting
1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"  android:layout_height="fill_parent"  
3. android:background="#FFFEE9"   android:padding="10px">
4.  
5.     <TextView id="@+id/nameLab"
6.              android:layout_width="fill_parent"
7.              android:layout_height="wrap_content"
8.              android:text="Type your name"/>
9.          
10.     <EditText id="@+id/yourName"
11.              android:layout_width="fill_parent"
12.              android:layout_height="wrap_content"
13.              android:layout_below="@id/nameLab"/>
14.  
15.     <Button id="@+id/okButt"
16.            android:layout_width="wrap_content"
17.            android:layout_height="wrap_content"
18.            android:layout_alignParentRight="true"
19.            android:layout_marginLeft="10px"
20.            android:text="OK"
21.            android:layout_below="@id/yourName"/>
22.  
23. </RelativeLayout>
Parsed in 0.003 seconds, using GeSHi 1.0.8.4



Screen shot for the emulator after implementing the first form

The implementation of the second form

Syntax: [ Download ] [ Hide ]
Syntax: [ Download ] [ Show ]
Using xml Syntax Highlighting
1. <?xml version="1.0" encoding="utf-8"?>
2.     <TextView id="@+id/myMsg"
3.             xmlns:android="http://schemas.android.com/apk/res/android"
4.              android:layout_width="fill_parent"
5.              android:layout_height="wrap_content"
6.              android:text="Welcome"
7.              android:textStyle="bold"/>
Parsed in 0.001 seconds, using GeSHi 1.0.8.4

Notice: you can’t test the second one cause it dun have container [Layout]

Step 3: Make the link between the GUI and the process
All logical process should be done in java file

1. Open your java file

2. Load the GUI for the first form by using:

setContentView(R.layout.nameOfYourXML);

3. Define the ok button in java file
Button okButt = (Button) findViewById(R.id.theIDforOkButton);

4. Set on click listener to ok button

okButt.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
//…write what you want to happen when u click..
}});

5. Modify on click method

EditText yourName = (EditText) findViewById(R.id.yourName);
setContentView(R.layout.secwindow);
TextView myMsg = (TextView) findViewById(R.id.myMsg);
myMsg.setTextSize(20);
myMsg.setAlignment(Alignment.ALIGN_CENTER);
myMsg.setText("Welcome "+yourName.getText().toString());

The final code for java code

Syntax: [ Download ] [ Hide ]
Syntax: [ Download ] [ Show ]
Using java Syntax Highlighting
1. class tutorial1 extends Activity {     
2. @Override          
3. protected void onCreate(Bundle savedValues) {                
4. super.onCreate(savedValues);         
5. setContentView(R.layout.mainwindow);                   
6. Button okButt = (Button) findViewById(R.id.okButt);        
7. okButt.setOnClickListener(new Button.OnClickListener() {                   
8. public void onClick(View v) {                    
9. EditText yourName = (EditText) findViewById(R.id.yourName);              
10. setContentView(R.layout.secwindow);                  
11.  TextView myMsg = (TextView) findViewById(R.id.myMsg);                             
12.  
13. // change the properties of msg                    
14. myMsg.setTextSize(20);                   
15. myMsg.setAlignment(Alignment.ALIGN_CENTER);                          
16. myMsg.setText("Welcome "+yourName.getText().toString());}       });        
17.  }     
18. }
Parsed in 0.033 seconds, using GeSHi 1.0.8.4

Notice: mainwindow refers to the first form xml file and secwindow refers to the second form

Problem that may appear

NullPointer Exception

- Check the order when you define the component
- All used component should be declare before using the method of it
- After you use setContentView again, notice that all previous value will be removed only if you store it before reuse this method

Error belong to updating R.java file

- You use import android.R; in one of your java files
- Your xml file name contain invalid char like capital letter
- Your project is not android project, convert it to android project

Error in xml file without knowing the source of it

- You may use invalid attribute
- You don’t specify the xmlns:android
- Check the tags

Notice: I am new in this platform, but I will be happy to answer any question belong to this example. and If there is any wrong information i provide, just told me ^^, thx

Best Regards,
Ghalya

Hello Ghalya,

thanks for sharing your tutorial

Ghalya wrote:I sharing this example and hoping someone will benefit from it ;P

You can be 200% sure of that

Regards,
plusminus

thx

Hello Ghalya,

sorry for my English, this tutorial helpful for me very much . i hope you will show next your tutorial.


regards,
chonlatee