Add and Remove views dynamically in Android

We’ll be creating views dynamically as shown in the below video.

TAKE ME TO SOURCE CODE

DOWNLOAD FULL SOURCE CODE

STEP-1

Create a new Android Project with MainActivity and its layout as activity_main.xml. For simplicity, let’s begin with just one linear layout in our layout and we will create other views dynamically.

STEP-2

Create a file “ids.xml” inside the res/values folder. This file is used to register ids of all dynamically created views.

STEP-3

Inside onCreate() method of MainActivity, we will create a row dynamically. That row will contain an Edittext and a TextView with “+” inside a horizontal linear layout. For that we ll first get the rootlinearlayout using the findViewById() method. Then we’ll create a LinearLayout with horizontal orientation and an Edittext and a TextView.

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Getting root linear layout id
    mRootLinearLayout = (LinearLayout) findViewById(R.id.rootll);

    linearLayout = new LinearLayout(this);
    linearLayout.setOrientation(LinearLayout.HORIZONTAL);
    linearLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    EditText mFirstField = new EditText(this);
    mAddField = new TextView(this);
    mAddField.setId(R.id.addbuttonone);
    mAddField.setText("+");
    mAddField.setTextSize(30f);
    mRootLinearLayout.addView(linearLayout, 0);
    linearLayout.addView(mFirstField, 800, 100);
    linearLayout.addView(mAddField);
    mAddField.setOnClickListener(this);
}

STEP-4

Now we need to work on the complicated part. On click of Plus(+) textview, we ll create a new row consisting of an Edittext and a TextView with “+” sign.

For that I have written a method like this:

private void createNewField(int linearLayoutid, int edittextid, int buttonid, int index) {
 EditText mNewField = new EditText(this);
 mNewField.setId(edittextid);

TextView addButton = new TextView(this);
 addButton.setText("+");
 addButton.setTextSize(30f);
 addButton.setId(buttonid);
 addButton.setOnClickListener(this);

LinearLayout newlinearlayout = new LinearLayout(this);
 newlinearlayout.setId(linearLayoutid);
 newlinearlayout.setOrientation(LinearLayout.HORIZONTAL);
 newlinearlayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
 newlinearlayout.addView(mNewField,800,100);
 newlinearlayout.addView(addButton);

mRootLinearLayout.addView(newlinearlayout,index);

}

Use this method by passing the ids of the view that you want to create:

createNewField(R.id.linearlayouttwo, R.id.edittexttwo, R.id.addbuttontwo, 1);

STEP-5

On clicking the plus, the textview should change to “-” and the created view should be deleted. Use removeView(view) method to remove the view we just created in the above step.

private void removeAddedField(int layoutId) {
 LinearLayout layout = (LinearLayout) findViewById(layoutId);
 mRootLinearLayout.removeView(layout);
 Log.e(TAG,"Removed"+ layout.toString());
 }

STEP-6

For switching between “+” and “-” of the textview, create a new method toggle(int layoutId) and pass the id of the textview that you want to toggle.

private void toggle(int layoutId) {
    TextView textView= (TextView) findViewById(layoutId);
    if(!toggleflag) {
        textView.setText("-");
    }else{
        textView.setText("+");
    }
    toggleflag = !toggleflag;

}

STEP-7

Finally, use the methods created in above steps in onClick() method of the textviews.

public void onClick(View view) {

    switch (view.getId()) {

        case R.id.addbuttonone:
            if (!isClicked) {
                createNewField(R.id.linearlayouttwo, R.id.edittexttwo, R.id.addbuttontwo, 1);
                toggleflag =false;
                toggle(R.id.addbuttonone);
            } else {
                removeAddedField(R.id.linearlayouttwo);
                toggleflag = true;
                toggle(R.id.addbuttonone);
            }
            isClicked = !isClicked;
            break;
        case R.id.addbuttontwo:
            if (!isSecondClicked) {
               createNewField(R.id.linearlayoutthree, R.id.edittextthree, R.id.addbuttonthree, 2);
                toggleflag = false;
                toggle(R.id.addbuttontwo);
            } else {
               removeAddedField(R.id.linearlayoutthree);
                toggleflag = true;
                toggle(R.id.addbuttontwo);

            }
            isSecondClicked = !isSecondClicked;
            break;

    }
    }

 

 

FULL MAINACTIVITY CODE

DOWNLOAD THE SOURCE CODE

DOWNLOAD FULL SOURCE CODE

Feel free to comment below in case of issues. Thanks!! 🙂

admin Author

Leave a Reply

Your email address will not be published. Required fields are marked *