Creating Android UI dynamically

Many android application developers have been using XML for creating an android UI. Android has a wonderful architecture where the UI and the program are well separated. However, a situation could arise where the android UI may have to be created dynamically. But doing so is not advisable. Dynamic layouts aren’t always the most elegant of solutions, but are sometimes required.

We can create an android UI in different ways depending on the requirement. Following are the three ways of creating an android UI:

• Using XML file.
• Using Java Code (Programmatically).
• Using XML & XML Inflation to create UI dynamically.

1. Creating an android UI using XML file.

The best way to design android UI is to use XML file. Take a look at the XML code to create a UI using XML.

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

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android">

<TableLayout>

<TextView

android:text=”Byteridge” <! — Add your TextView’s XML code here → >

</TextView>

<TableRow >

<TextView

android:text=”TextView” <! — Add your TextView’s XML code here → >

</TextView>

<EditText

android:hint=”Edit Text” <! — Add your EditText’s XML code here → >

</EditText>

</TableRow> <! — End of Tablerow →

</TableLayout> <! — End of Table Layout →

</LinearLayout> <! — End of Linear Layout →

A very simple example, but serves the purpose. Now the same UI can be created dynamically.

2. Designing an android UI in Java source code.

Below are some of the examples:

• When a particular action on one of the UI elements needs more UI elements to appear.
• When elements are required to be added or removed depending on the need.

In android SDK, every viewgroup element has an equivalent java class to design a UI programmatically.

TableLayout TL = new TableLayout(this); /* Create the Table Layout */

TableRow row = new TableRow(this); /* Create the Table’s Row */

TextView TV = new TextView(this); /* Create a new TextView */

TV.setText(“Byteridge”); /* Set your own Text */

TL.addView(TV); /* Add the Textview to the Tablelayout */

TextView txt = new TextView(this); /* Create new Text view here */

txt.setText(“TextView”); /* Set your own text in textview */

EditText tx = new EditText(this); /* Create new Edit view here */

tx.setHint(“Edit Text”); /* Set any Hint for EditText here */

row.addView(txt); /* Add the TextView to the Table’s Row */

row.addView(tx); /* Add the EditView to the Table’s Row */

TL.addView(row,newTableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT) ); /* Set the Table Layout Params */

setContentView(TL); /* Set content view as Table Layout */

The above method is not recommended as it is very tedious to maintain and make changes to the UI at later stages.

3. Using XML & XML Inflation to create UI dynamically.

It is definitely a good practice to define dynamic UI as an XML and include it in the code using XML inflation. Assume a very simple linear layout like the one below.

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

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android"

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

android:orientation=”vertical” >

</LinearLayout>

Now, suppose a Table Layout, in which TextView and EditText are to be added in two rows, is to be included. First create two XML files for TextView and EditText widgets. These XML files are also created in res/layout folder.

textview.xml

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

<TextView xmlns:android=”http://schemas.android.com/apk/res/android"

android:text=”TextView” <! — Add your TextView’s XML code here — -> >

</TextView>

edittext.xml

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

<EditText xmlns:android=”http://schemas.android.com/apk/res/android

android:hint=”Edit Text” <! — Add your Edittext’s XML code here — -> >

</EditText>

Now create a Table Layout in java code where in the two widgets will be inflated from their XML files and added to the rows of the Table Layout created.

TableLayout TL = new TableLayout(this); /* Create the Table Layout */

TableRow row = new TableRow(this); /* Create the Table’s Row */

TextView TV = new TextView(this); /* Create a new TextView */

TV.setText(“Byteridge”); /* Set your own Text */

TL.addView(TV); /* Add the Textview to the Tablelayout */

final LayoutInflater text_inflater = (LayoutInflater)getSystemService (Context.LAYOUT_INFLATER_SERVICE); /* Inflate the TextView */

TextView txtview = (TextView)text_inflater.inflate(R.layout.textview,null);

final LayoutInflater edit_inflater = (LayoutInflater)getSystemService (Context.LAYOUT_INFLATER_SERVICE); /* Inflate the EditView */

EditText edtview = (EditText)edit_inflater.inflate(R.layout.editview,null);

row.addView(txtview); /* Add the Inflated TextView to the Table’s Row */

row.addView(edtview); /* Add the Inflated EditView to the Table’s Row */

TL.addView(row, new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); /* Set the Table Layout Params here */

setContentView(TL); /* Set the content view as Table Layout */

In the above code,

• A handle to the LayoutInflater through the getSystemService method is obtained.
• The files textview.xml and edittext.xml are passed by the parameters R.layout.textview and R.layout.edittext respectively, using inflate method.
• Append these widgets to the existing Table Layout and set them as “view” in two rows of Table Layout.
• Finally, set the content view as Table Layout.