How to remove old content and show new content when using LayoutInflater in my case?

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:layo开发者_JAVA技巧ut_height="fill_parent"
    android:orientation="vertical">


    <LinearLayout 
        android:id="@+id/myBtns"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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.

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);
        }
    });

button_two.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_two, null);

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

The above code is partly working, what I mean is that when button_one is pressed, the content_area shows content_one.xml , or when button_two is pressed, the content_area shows content_two.xml , they are working fine!

But if either button is pressed firstly, then press the other one, the content remains in the old button triggered content. For example, when application first loaded, if firstly press button_one, content_one.xml is showing, after that , if I press button_two, the content is remain in content_one.xml.

My Question is how to remove the old content and show the new content when using LayoutInflater?

The problem is you're not removing the old view when adding the new one. Stick this line of code before you add the new view:

contentArea.removeAllViews()

Edit: Note that inflating the view every time the button is pressed, your previous state will always be lost. If you need to keep the state of the view I would go with Idistic's suggestion.

What others have done is simply hide one layout and then show the other

Stackoverlow how to change layouts dynamically

It's not exactly what you are asking but accomplishes the same thing