How to add view to view android

How To Add A View Programmatically In Andriod

Introduction

Many times we come accross a problem in Android, where we need to create a feature of adding a view when a button is pressed, for instance, adding a new EditText view when a add button in a todo list application.

So, today we will go through how to create this feature in an android application. I hope before reading this article, you are familar with the coding in android and know how to create views and attach callback listeners to it.

Basic Todo App Setup

First create a New Project in android and let’s write a basic layout for a todo list having a TextView, LinearLayout and a Button to add more EditText to the todo list.

In this tutorial we will first go through with the code and then explain it step-by-step.

So here is the Layout of the a generic Todo-List
The above Layout code will result as below.

Layout Code Explaination

Adding Layout Programmatically

So now after creating layout, let’s start coding the logic for adding the view (EditText and delet button) to the layout programmatically. Let’s first look out the code and then we will break it down and understand it.

Here is the Code for java file.
Here is the result:

Understanding the Code

So in the code, in onCreate method, we firstly fetch the «Container» Linear layout and Add Task Button from the Layout file by using findViewById() function in lines 18-19.

Then in line 23, we attach a onClickListener() to the Add Task Button so that when the Add Task button is clicked the View gets populated after creating the View which we want to add in the «container» LinearLayout

Then in lines 29-34, we create a LinearLayout having with of «match parent» and height of «wrap content», also having margin of «10dp» using a helper method named «dpTopx()» in lines 74-76, and vertical orientation.

Similarly, in lines 37-41, we create a EditText View having width of zero (because we will add weight to it), height as «wrap content», we will add weight = 1 to it and also a placehoder text using setHint() method as «Type new Task».

Also, in lines 44-47, we create a ImageView for holding a close sign acting as a button to delete the view when clicked. This view will have weight of 0.15 and have backroung set from resource R.drawable.close_white_24dp in ImageView.

Then, in lines 50 and 51 we add the EditText View and ImageView to the previously created LinearLayout.

Then, in line 54, we add the whole LinearLayout to the previously fetch «container» LinearLayout from the Layout file.

And then, we also add a onClickListener() to the ImageView in lines 57-66, so that when it is clicked, we delete the whole layout we created.

And finally, at Line 71, we just virtually tap the «Add Task» button to create the layout and populate it in «container» LinearLayout as soon as the application is opened, so that, it seems that a single View is default to present on screen.

Conclusion

I hope you have now understood how to dynamically add a View in layout and also remove it effeciently in alayout. A big thanks if you joind till here and enjoyed the read. Also look at all blog posts here.