Wednesday, May 9, 2012

Add and Remove View dynamically

We can use addView() and removeView() to add/remove views programmically. Also we can call removeAllViews() to remove all child views.

Add and Remove View dynamically


main.xml, the main layout. The FrameLayout, master, is the parent ViewGroup used to add/remove view.
<?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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
        <CheckBox
            android:id="@+id/enlayer1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Enable Layer 1"/>
        <CheckBox
            android:id="@+id/enlayer2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Enable Layer 2"/>
        <CheckBox
            android:id="@+id/enlayer3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Enable Layer 3"/>

    </LinearLayout>
    <FrameLayout
        android:id="@+id/master"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" />

</LinearLayout>


Create three layout files. They are the child view to be added/removed using Java code.

layer_1.xml
<?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">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Layer 1" />
    <EditText
        android:hint="EditText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>


layer_2.xml
<?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">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Layer 2" />
    
    <CheckBox
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="CheckBox A"/>
    <CheckBox
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="CheckBox B"/>
    <CheckBox
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="CheckBox C"/>

</LinearLayout>


layer_3.xml
<?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">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:text="Layer 3" />
    
 <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/ic_launcher"
        android:layout_gravity="center"
     />

</LinearLayout>


Main code, AndroidDynViewActivity.java.
package com.exercise.AndroidDynView;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.FrameLayout;

public class AndroidDynViewActivity extends Activity {
 
 FrameLayout mainLayer;
 View layer1, layer2, layer3;
 CheckBox enableLayer1, enableLayer2, enableLayer3;
 
 /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        enableLayer1 = (CheckBox)findViewById(R.id.enlayer1);
        enableLayer2 = (CheckBox)findViewById(R.id.enlayer2);
        enableLayer3 = (CheckBox)findViewById(R.id.enlayer3);
        
        mainLayer = (FrameLayout)findViewById(R.id.master);
        
        LayoutInflater inflater = getLayoutInflater();
        layer1 = inflater.inflate(R.layout.layer_1, null);
        layer2 = inflater.inflate(R.layout.layer_2, null);
        layer3 = inflater.inflate(R.layout.layer_3, null);

        enableLayer1.setOnCheckedChangeListener(enableLayer1ChangeListener);
        enableLayer2.setOnCheckedChangeListener(enableLayer2ChangeListener);
        enableLayer3.setOnCheckedChangeListener(enableLayer3ChangeListener);
        
    }
    
    CheckBox.OnCheckedChangeListener enableLayer1ChangeListener
    = new CheckBox.OnCheckedChangeListener(){

  @Override
  public void onCheckedChanged(CompoundButton buttonView,
    boolean isChecked) {
   if(isChecked){
    mainLayer.addView(layer1);
   }else{
    mainLayer.removeView(layer1);
   }
  }
    };
    
    CheckBox.OnCheckedChangeListener enableLayer2ChangeListener
    = new CheckBox.OnCheckedChangeListener(){

  @Override
  public void onCheckedChanged(CompoundButton buttonView,
    boolean isChecked) {
   if(isChecked){
    mainLayer.addView(layer2);
   }else{
    mainLayer.removeView(layer2);
   }
  }
    };
    
    CheckBox.OnCheckedChangeListener enableLayer3ChangeListener
    = new CheckBox.OnCheckedChangeListener(){

  @Override
  public void onCheckedChanged(CompoundButton buttonView,
    boolean isChecked) {
   if(isChecked){
    mainLayer.addView(layer3);
   }else{
    mainLayer.removeView(layer3);
   }
  }
    };
    
}


Download the files.

1 comment:

Anonymous said...

Thanks for some instructive code.