Getting Started With Android: Part3 - User Interface

In this part I will show you how the UI is build up.

You have two options, declarativ or programatic. Both have there benefits and drawbacks, in some cases it is impossible to declare it. But your first and preferred option should be the declarativ way.

Declarativ
Benefits:

• Clean separation of logic and UI
• Usage of the visual designer.

The UI is declared in a XML layout file. All the layout files of an application are stored in the res/layouts folder.
The default layout file that gets created for every new application is called main.xml.
Lets have a look into ours. If you double click on the file in the resource tree, the visual designer will open up. It takes some time but you have a nice graphical representation of it.

For the moment we are more interested in the plain xml. Switch the bottom tabs from 'Graphical Layout' to 'main.xml'.

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="vertical"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent"  
   >  
      <TextView   
        android:layout_width="fill_parent"   
        android:layout_height="wrap_content"   
        android:text="@string/hello"  
        />  
 </LinearLayout>  

Layouts
LinearLayout is a layout type. There are a lot of layout types like:

• LinearLayout
• RelativeLayout
• FrameLayout
• TableLayout

Layouts are containers for other Views that arange their child Views in different ways.

Views
TextView is a class that derives from View. Views are the basic classes for the UI. Even Layouts are derived from View.

• TextView
• ImageView
• Button

To assign a layout to an Activity we have a look into our HelloWorldActivity from Part2. We find the callback method onCreate(). That is called from the Activity at the time it changes from the state Create to Running. This happens exactly once in the life cycle of every Activity.
Here we initialize our Activity.
In line 4 we tell the Activity that it should inflate from the resources the R.layouts.main layout.

1:  @Override  
2:  public void onCreate(Bundle savedInstanceState) {  
3:      super.onCreate(savedInstanceState);  
4:      setContentView(R.layout.main);  
5:  }  

To get access to the inflated Views the View must have an id. Go to the layout and add android:id="@+id/text1" to the tag of the TextView.

 <TextView android:id="@+id/text1"  
        android:layout_width="fill_parent"   
        android:layout_height="wrap_content"   
        android:text="@string/hello"  
        />  

Now you can use the method findViewById() to obtain the instance of your desired view.

 TextView textView = (TextView)findViewById(R.id.text1);  

Programatic
Benefits:

• Allows you to build up dynamic UIs like a month view of a callendar

The same UI as above looks coded like this.

   public void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
 //    setContentView(R.layout.main);  

     LinearLayout layout = new LinearLayout(this);  
     layout.setLayoutParams(new LayoutParams(
          LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));  

     TextView textView = new TextView(this);  
     textView.setText("Hello World, HelloWorldActivity!");  
     textView.setLayoutParams(new LayoutParams(
          LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));  

     layout.addView(textView);  
     setContentView(layout);  
   }  

As you can see, the layout parameter are lengthy and the code completion for the parameters that you have in the xml layout file is missing.

Part0 Part1 Part2 Part3