How to update the content when button pressed in my case? (a tab-like feature)

Question

My main.xml layout simply contains two buttons and a content area, which shows below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">


    <LinearLayout 
        android:id="@+id/myBtns"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
    >
        <Button
            android:id="@+id/btn_one"
            android:layout_width="100dip"
            android:layout_height="30dip"
                android:text="button one"
         />
         <Button
            android:id="@+id/btn_two"
            android:layout_width="100dip"
            android:layout_height="30dip"
                android:text="button two"
         />
    </LinearLayout>

    <LinearLayout 
        android:id="@+id/content_area"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    >
         <!--different button press will embed different content here-->

    </LinearLayout>


   </LinearLayout>

I would like to create my own tab-like feature that each button press will update the content(the content_area) below the buttons. So I have prepared two other content layout:

content_one.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <TextView.../>
    <Button .../>

</LinearLayout>

content_two.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <Gallery.../>
    <Button .../>

</LinearLayout>

With all my simple codes showed above, I would like to implement the feature that:

in main.xml:

• when button_one is pressed, content_one.xml will be embeded to the content_area of main.xml;

• when button_two is pressed, the content_area of main.xml will be updated to content_two.xml

Which means using button to create a tab-like feature.

My question is how to update the content_area with an external layout xml file (e.g. content_one.xml & content_two.xml) been embeded inside the content_area of my main.xml layout ?

that's:

button_one.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View v){
        //What to do here?? to update the content_area in main.xml with an external xml layout
    }
});

----------------UPDATE----------------------------

I tried:

button_one.setOnClickListener(new OnClickListener(){
        @Override
        public void onClick(View v){
            LayoutInflater inflater = (LayoutInflater)MyActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View inflatedView = inflater.inflate(R.layout.content_one, null);

            LinearLayout contentArea= (LinearLayout) findViewById(R.id.content_area);
            contentArea.addView(inflatedView);
        }
    });

But it does not work, why?

Answer 1

You can use the LayoutInflater to create a view hierarchy from an xml file. The following code returns my xml view.

LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View inflatedView = inflater.inflate(R.layout.content_one, null);

The first parameter to inflate(...) is the xml file to inflate. The second parameter is an optional parent to the inflated view. In my case, I do not have one. Then you can add the view to your content area.

contentArea.addView(inflatedView);