Smartphones

Using Android UI kit for programmatic layouts

Everything that can be done using an XML layout can also be done programmatically in Android. Follow this Android development tutorial on creating a dynamic user interface.

You don't get to work at Google without being smart. So while there are some things I'm not wild about when it comes to Android, there is no denying the framework team really understood what they were doing when they set about creating the Android SDK. Sure, there are a number of programming paradigms that are easier to use, and there are programming environments I've used before (especially in the embedded landscape) that offer unlimited flexibility; however, the folks at Google took a look at both extremes and opted to strike a balance right down the middle. It works well because it's all about options.

Nowhere is the underlying principle of options more prevalent on Android than when it comes to programming the user interface. It takes almost no time to learn the meta-language involved in designing an Android screen, and the simple but effective layout tool is nothing if not intuitive. Examples are abundant both in the official Google documentation as well as on the web at popular sites like Stack Overflow. But the Google framework team didn't stop there. Everything that can be done using an XML layout can also be done programmatically. I know what you are thinking: Did he say everything? I did. The result is that, when called for, a developer has the option of creating an entirely dynamic UI.

The example that follows is a very basic demonstration of a dynamic user interface. You can follow along or download the entire tutorial and import it directly into Eclipse.

1. Create a new Android project in Eclipse. Target Android 1.6 or higher. Be sure to rename the startup activity Main.java and the associated XML layout main.xml.

2. Modify main.xml to include a linear layout encompassed by a scroll view. Let's go ahead and throw a text view in there as well to act as our title.

main.xml

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000000">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/the_layout"
        android:gravity="center"
        android:layout_gravity="center_horizontal" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Dynamic Layout Demo"
            android:textColor="#ffffff"
            android:padding="20dip"/>
      </LinearLayout>
</ScrollView>

3. We are ready for our Main.java file. Here we have three functions: a standard on create override, a standard on click listener, and our private add button function. It's the latter function that handles the dynamic addition of the new UI widgets, which in this case is a simple button. The code is straightforward. We grab our linear layout, create a new button, set the button layout parameters, add it to the linear layout, and viola -- a new button appears!

Main.java

package com.authorwjf.more_buttons;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.LinearLayout;
public class Main extends Activity implements OnClickListener{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        addAButton();
    }

private void addAButton() {
        Button b = new Button(this);
        LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        b.setText("Click to Add Another Button");
        b.setTextColor(Color.BLACK);
        b.setLayoutParams(params);
        b.setOnClickListener(this);
        LinearLayout ll = (LinearLayout) findViewById(R.id.the_layout);
        ll.addView(b);
    }
        @Override
        public void onClick(View v) {
                addAButton();
        }
}
Now we are ready to run the application on a device or emulator. Simply press the button and another draws. Add enough buttons and our scroll bar kicks in (Figure A). Figure A

This is a very primitive example, though the power it demonstrates should be self-evident. And while you may never run into an instance where you have cause to step outside of your XML layouts for UI instantiation, it's nice to know Android has you covered if the need arises.

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

1 comments
madtteam28
madtteam28

Thanks Mr. William for your wonderful post. Informative and interesting write-up.

Editor's Picks