Thursday, June 9, 2011

Change the Properties of the Interface Element

Android Layout Tutorial 04

With this post we are going to discuss how change properties of interface element manually and by code too. This require java coding a bit, but don't worry, you will be able to through out. lets move to the tutorial. 

Change properties from property menu in Eclipse 

This is very simple thing and even this may not suitable to make a post also. Actually this is not about Android :), this is just about function require in the Eclipse IDE for Android SDK. With this option you can change the properties of the element (buttons , textareas, etc.) by without editing the layout xml file.

1. Open layout xml file and select the "Graphical layout " as usual way.
2. Now add new button to the interface or if available one on the screen already, Click on that button.
3. Check left side of the IDE for Property window. like below image. IF NOT DON'T WORRY, just follow next bullet.

4. If it not appear as before, just add the window to the eclipse window. follow this steps.

There is a small button in bottom left corner by saying "Show view as fast view" Click on it > Others > General > Properties
Then Property window will appear on the window and you can position as you want by dragging to some positions.






















5. OK, Can you see the property window on the main Eclipse window?  then change the properties as you want. there are huge list of properties have listed down. change colours, text , gravity, etc. simply from properties. DON"T FORGET TO GO AND SEE THE LAYOUT XML AFTER CHANGING ANY PROPERTY VALUE, IT GIVES YOU A KNOWLEDGE ABOUT HOW THESE CHANGES  HAPPEN IN XML.

Change properties when running the application. 

I you are a programmer you feel why we need some value of component when running application, as an example when you going to fill a form in web some of them says your email is wrong by changing that text box colour in to red, just after entering your email with missing important part of an address. In suck event dynamically we have to change the propertied. In android also it is important as before.

Still we didn't learn about Eventhandling in Android, so with this section I'll illustrate how the property change when  load the application. (WITHIN onCreate() METHOD)
Then you can use that on any where you want after leaning other around functions on Android.

1. If you have a button on the layout just open the Activity file within the "src" folder, Or add a button and open the Activity file. ( In my case Activity file is "MyMain.java", if you follow my past post list)

2. Now go to the inside of theonCreate() method.

     public class MyMain extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    // here you are in the method, type your code here :)
    }

Now we should learn a bit about layout objects,
Go to the layout xml and you check out the xml section related to button. It include record mentioning something about ID. All the Objects in the XML have unique ID and it allows us to point out that object from wherever. 
 <Button 
    android:id="@+id/button1" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Button2" 
    android:gravity="center_vertical|center_horizontal">
    </Button>


This button's ID is button1.
You can change the object ID from properties menu, but make sure to each ID unique from others.


3. Now we should create button object in the onCreate method.
    this seems bit different and I'll explain a bit about the code and how it works.
Button button1 = (Button)findViewById(R.id.button1);

In normally we start to create button object and then we should cast the object return by findViewById(int) method. OK, this may be some what difficult to understand people who are not really familiar with java. Anyway in simple word this is doing create an object referring the element that we added to the XML. 


What is findViewById(int) ?


Now look at the findViewById(int) method. This method declared in the Android.App package as a public method.  This method coming from API level 1. findViewById(int) return a View, that's why we should cast in to the type of object .

public View findViewById (int id)

Since: API Level 1
Finds a view that was identified by the id attribute from the XML that was processed in onCreate(Bundle).
Returns
  • The view if found or null otherwise.


Create Button 
     Add below code in to onCreate() methode, make sure ID of your button is "button1" if not it gives you an error.

 Button button1 = (Button)findViewById(R.id.button1);
button1.setText("new button");

IF GOT AN ERROR CHECK :    (R.id.button1) (your button name may be different)


     public class MyMain extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    // here you are in the method, type your code here :)
 Button button1 = (Button)findViewById(R.id.button1);
button1.setText("new button");
    }


Easy way to add the button name, 


After successfully creating the Buotton object, we can edit its properties from Action. 


Place  "OBJECTNAME . "  then you will see list of properties of the object.




Change what you want and run the application, When running the application it shows what you change in the onCreate() method. see below image, button text are change when application running on the phone.




OK, GOT IT? If there is any problem place a comment :). I want to discuss about the int parameter passed to findViewById method. 

findViewById (int id)

 this post Is bit longer than others and it exhausted you and I'll discuss about that in next post, with few around things :) 


Thank You All


Next post :
More About Android Resources and Manipulation

                                                                                                                                                                                     By MIthila Karunarathna

No comments:

Post a Comment