Example for lvl 0 ^^

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

Example for lvl 0 ^^

Postby Ghalya » Sat Feb 09, 2008 8:04 pm

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


Pre-Requirement

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
    Image

Step 1: Analysis the Prototype


    Image

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 ]
    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.004 seconds, using GeSHi 1.0.8.4

      Image
      Screen shot for the emulator after implementing the first form

    The implementation of the second form
    Syntax: [ Download ] [ Hide ]
    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 ]
    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.032 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
Attachments
GTutorial.rar
In case you got problem, see the attached file, it contain the project
(32.53 KiB) Downloaded 276 times
Ghalya
Freshman
Freshman
 
Posts: 9
Joined: Sat Feb 09, 2008 4:07 pm
Location: Dubai, UAE

Top

Re: Example for lvl 0 ^^

Postby plusminus » Sun Feb 10, 2008 1:23 pm

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
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby Ghalya » Mon Feb 11, 2008 8:25 pm

thx :wink:
Ghalya
Freshman
Freshman
 
Posts: 9
Joined: Sat Feb 09, 2008 4:07 pm
Location: Dubai, UAE

Postby chonlatee » Wed Jan 21, 2009 5:17 am

Hello Ghalya,

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


regards,
chonlatee
User avatar
chonlatee
Once Poster
Once Poster
 
Posts: 1
Joined: Wed Jan 21, 2009 3:20 am

Top

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 3 guests