(Almost) Seamlessly Integrate Android Layout XML to Code Behind Reference

It’s been a while since my last post. With this post, I would like to share a little bit of my toolkit which I use extensively on my Android project. ­čÖé

Overview

So basically, when you are developing apps for Android, you use Android XML file to define the User Interface (UI) layout structure, then you code using Java for the implementation. Basically they resembles the .NET WPF/Silverlight’s XAML development, which they also use XML file to define the UI layout. But the worst thing I hate in the Android implementation is that basically the XML file and the Java code behind doesn’t really integrated┬áseamlessly.

What made me say that .NET XAML is far years ahead compared to Android XML layout file? See the difference between those two frameworks below. Example: I want to make a simple WPF application containing a text box and a button. The button will be set disabled immediately after clicked, and show message box containing the text in the text box.

NET Framework WPF

In .NET Framework, the XAML file is seamlessly integrated with the code behind. In XAML you can define a Name for each of your control (widget), and call it directly from the C# code behind using the defined name

XAMLC#

<Window x:Class="LatianWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBox
             x:Name="TextBoxA" 
             HorizontalAlignment="Left"
             Height="23"
             Margin="10,10,0,0"
             TextWrapping="Wrap"
             Text="TextBox"
             VerticalAlignment="Top"
             Width="497" />

        <Button
            x:Name="ButtonB"
            Content="Button"
            HorizontalAlignment="Left"
            Margin="432,38,0,0"
            VerticalAlignment="Top"
            Width="75"
            Click="ButtonB_Click" />

    </Grid>
</Window>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void ButtonB_Click(object sender, RoutedEventArgs e)
    {
        ButtonB.IsEnabled = false;
        MessageBox.Show(TextBoxA.Text);
    }
}

Android

To perform the same task in Android, you have to call findViewById for each widget ID defined in the XML layout file, and cast and store the returned value from the function call to the instance variable. This leads to messier code compared to .NET style, because you have to call and assign every reference in code behind before you can access what is defined inside XML layout file. Basically you do the integration between XML layout file and code behind manually.

Android XMLJava
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/listitem_bill_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${packageName}.${activityClass}" >

    <EditText
        android:id="@+id/main_editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >
    </EditText>

    <Button
        android:id="@+id/main_button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

public class MainActivity extends ActionBarActivity implements View.OnClickListener {
	private Button button1;
	private EditText editText1;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		this.button1 = (Button)findViewById(R.id.main_button1));
		this.button1.setOnClickListener(this);
		
		this.editText1 = (EditText)findViewById(R.id.main_editText1));
	}
	
	@Override
	public void onClick(View v) {
		button1.setEnabled(false);
        Toast.makeText(this, editText1.getText(), 10000);
    }
}

Idea

I want Android to have similar capability like .NET Framework which I don’t have to assign the reference to the widget manually by calling findViewById on each widget. This is to simplify the code and to make the code cleaner.

Implementation

Continue reading “(Almost) Seamlessly Integrate Android Layout XML to Code Behind Reference”