How To: Dynamically add elements to an Android Application

Install the Android Development Toolkit for Eclipse and add your virtual device

1) Install the SDK Tools Do NOT run when finished!

2) Install the plugin: https://dl-ssl.google.com/android/eclipse/

Create an Android project and add all the neccessary elements

1) Select File -> New -> Other -> Android Application Project


*be sure to use the correct target platform

Set up your main activity and use main.xml layout and add necessary views

1) Select File -> New -> Other -> Android Application Project


2) Call the project MY Android Project and fill out other fields


3) Call your main activity main.xml


Change the layout of your main.xml to table layout

1) Select your main.xml

2) In the Outline view right click on the layout and select Change Layout


Add the rows to your new layout

1) Right click TableLayout and select Add Row

2) Set it up to fill out it's parent


3) Add another row and call it addViewRow

4) Add a scroll view to the addViewRow

5) Add a layout to the scroll view, call it tableLayout and change it's layout to a table layout


Add a button to your new row

1) Add a button to the row and create a new string called Add View in your strings.xml


Create an empty view to that will be added when an action occurs in the .java file for your layout

1) Right click the layout folder in your resources folder and select New -> Other -> Android -> Android XML File

2) Name the file add_view.xml


3) Drag a plain text from the Text Fields Pallette onto the new row in the Outline

main.xml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TableLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TableRow
        android:id="@+id/tableRow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/addViewButton"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|top"
            android:layout_weight="1"
            android:text="@string/addView" />

    </TableRow>

    <TableRow
        android:id="@+id/addViewRow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <ScrollView
            android:id="@+id/scrollView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TableLayout
                android:id="@+id/tableLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >

            </TableLayout>
        </ScrollView>
    </TableRow>

</TableLayout>

					

add_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

        <requestFocus />
    </EditText>

</TableRow>
					
					

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">My Android Project</string>
    <string name="action_settings">Settings</string>
    <string name="addView">Add View</string>
    <string name="view_num">View</string>

</resources>

					

Edit the MainActivity.java to add a view when the button is clicked:

package com.franksthinktank;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TableLayout;

public class MainActivity extends Activity {
	//variables
	private int currentView;
	private TableLayout tableLayout;
	   
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		//show which view it's on
		currentView = 0;
		
		// get the add view button and register it's listener
		Button addViewButton = (Button) findViewById(R.id.addViewButton);
		addViewButton.setOnClickListener(addButtonListener); 
		tableLayout = (TableLayout) findViewById(R.id.tableLayout);	
	}
	
	// create a new edit text and add it to the ScrollView
	public OnClickListener addButtonListener = new OnClickListener() {
		@Override
		public void onClick(View v) {  
			// get a reference to the LayoutInflater service
			LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
			
			// inflate add_view.xml to create new edit text views
			View newView = inflater.inflate(R.layout.add_view, null);
			EditText editText = (EditText) newView.findViewById(R.id.editText);
			String text = getString(R.string.view_num)+" "+(currentView+1);
			editText.setText(text);
			tableLayout.addView(newView, currentView);
			currentView++;
		}
	};	
	
}

					

Run it on your emulator or device!

1) Click the drop down menu next to the run icon

2) Select Run As -> Android Application