Android UI – Inflate from XML (Dynamic UI Creation)

We have seen that we can declare User Interface in Android through XML or we can even create the UI Programmatically. Now, we will see how we can mix the two and use it for building dynamic User Interfaces. One example of such a case would be when on a particular action of the user on one of the UI elements, you need more UI elements to appear on the same screen. How do we achieve this?

You can do it in two ways:

1.       The dynamic part of the UI can be created programmatically. However we saw in my earlier tutorial that it is not a very good way to mix UI and code.  So, we can

2.       Define the dynamic UI too as an XML and use XML inflation to include it into the existing UI.

We will see how to do the 2^ndway, which probably is a good practice too.

As always, again a very simple example. Assume I have a very simple linear layout. In that I want to include a button. I can do it as part of the mail XML itself. However, assume that this button is supposed to be reused in many activities and hence I have defined it as a separate XML. How do I include it into the main XML?

So, here is the 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"

    android:id="@+id/layout1"

    >

</LinearLayout>

Here is the buttons.xml that is also created in the res/layout folder:

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

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

        android:id="@+id/button_small_left"

 style="?android:attr/buttonStyleSmall"

        android:text="Press to close"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"/>

And here is the Activity’s onCreate(…) method of the InflateView class:

    public voidonCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        final LayoutInflater  inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        Button b = (Button)inflater.inflate(R.layout.buttons,

                null);

       

        lLayout = (LinearLayout)findViewById(R.id.layout1);

        lLayout.addView(b);

First 3 lines must be familiar. In the 4^thline, I am getting a handle to the LayoutInflater through the getSystemService(…) method.  This inflater has a method inflate to which I pass the buttons.xml by passing the parameter R.layout.buttons. Then, I try to append this button to the Linear Layout that already exists and is set as the view in line 2 setContentView(R.layout.main). How to append? I get a handle to the LinearLayoutlLayout and add the new button to it in the last line!

That simple to inflate an XML and append it to an existing view!

However, I have gone ahead and added another bit to this program as shown below:

        b.setOnClickListener(new OnClickListener() {

           

            public void onClick(View v) {

                  //restrict to adding only 1 textview child element

                  if (lLayout.getChildAt(2) == null)

                  {

                  TextView tv = (TextView)inflater.inflate(R.layout.text, null);

                  lLayout.addView(tv);

                  }

            }

        });

On the click of this dynamically added button, I am showing how we can add more to the UI dynamically through inflation. Assume, on the click of the button, you want to show some new text. This TextView is defined in another XML called text.xml which is also in the res/layout folder.

So, I am inflating from this XML and appending it to the LinearLayout view. So, a lot can be achieved for dynamic UI through inflation.

You can download the complete sample code here.

Creating Android UI Programmatically

So far, in all my examples, I have been using the declarative way of creating an Android UI using XML. However, there could arise certain situations when you may have to create UI programmatically. Sincere advice would be to avoid such a design since android has a wonderful architecture where the UI and the program are well separated. However, for those few exceptional cases where we may need too… here is how we do it.

Every single view or viewgroupelement has an equivalent java class in the SDK. The structure and naming of the classes and methods is very similar to the XML vocabulary that we are used to so far.

Let us start with a LinearLayout. How would we declare it in an 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>

This just contains a TextViewembedded in a LinearLayout. A very trivial example. But serves the purpose intended. Let me show how almost every single element here corresponds to a class or a method call in the class.  So the equivalent code in the onCreate(…)  method of an activity would be like this:

         super.onCreate(savedInstanceState);

      

        lLayout = newLinearLayout(this);

        lLayout.setOrientation(LinearLayout.VERTICAL);

        //-1(LayoutParams.MATCH_PARENT) is fill_parent or match_parent since API level 8

        //-2(LayoutParams.WRAP_CONTENT) is wrap_content

        lLayout.setLayoutParams(new LayoutParams(

LayoutParams.MATCH_PARENT,

LayoutParams.MATCH_PARENT));

        tView = newTextView(this);

        tView.setText("Hello, This is a view created programmatically! " +

                  "You CANNOT change me that easily :-)");

        tView.setLayoutParams(new LayoutParams(

LayoutParams.MATCH_PARENT,

LayoutParams.WRAP_CONTENT));

        lLayout.addView(tView);

        setContentView(lLayout);

Like this any layout view can be created. But from this small example you can notice two outstanding things – very tedious to code for every attribute of the view. And any simple change in the view, you need to change the code, compile, deploy and only then you see the effect of the change – unlike in a layout editor. 

You can download the sample code here.