Android: How to display more views after clicking a button

Question

SOLVED THE CODE BELOW WORKS

If I have a layout similar to the one below:

Those five temp EditTexts represent some info the user can enter (like the price of an item, the order number, etc.) If the user wants to add another item they would click on the Add button and I want another 5 textviews to appear on the screen right above the two buttons but right below the previous set of the 5 EditTexts. Can someone give me a starting point on how I would do this.

My layout of the fragment goes like this:

I have a top level linear layout (Vertical Orientation).
Then a scrollview.
Inside the scrollview I have another linear layout.
In that linear layout I have those five EditText objects and the two buttons

The view above is a fragment (defined in the file below) which I pass to my FragmentAdapter in my MainActivity file:

public class Device extends Fragment {
    ScrollView scrollView;
    LinearLayout ll;

    @Override
    public View onCreateView(final LayoutInflater inflater, final ViewGroup container,
                             Bundle savedInstanceState) {
        final View rootView = inflater.inflate(R.layout.device_view, container, false);

        scrollView = (ScrollView) rootView.findViewById(R.id.device_scroll_view);
        ll = (LinearLayout) rootView.findViewById(R.id.layout_in_scrollview);

        Button addButton = (Button) rootView.findViewById(R.id.add_another_device_button);

        addButton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                View temp = inflater.inflate(R.layout.edit_text_view_objects, container, false);
                ll.addView(temp);
            }
        });
        return rootView;
    }
}

Here is my layout file for this fragment:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/device_fragment_linear_layout"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="DeviceFragment"
android:orientation="vertical">

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/device_scroll_view">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center_horizontal">
    </LinearLayout>
</ScrollView>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="40dp">
    <Button
        android:id="@+id/submit_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="Submit" />

    <Button
        android:id="@+id/add_another_device_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add"
        android:layout_alignParentRight="true"/>
</RelativeLayout>
</LinearLayout>

edit_text_view_objects.xml:

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Name of Master Device"
        android:gravity="center"
        android:textSize="15dp"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Device Name"
        android:gravity="center"
        android:textSize="15dp"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Max SMS per day"
        android:gravity="center"
        android:textSize="15dp"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="15dp"
        android:hint="Carrier Name"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="15dp"
        android:gravity="center"
        android:layout_gravity="center"
        android:hint="OS Version"
        android:layout_marginTop="10dp"/>

</LinearLayout>

When I add new views dynamically, I make a template of what I want to add and then add it by using `LayoutInflater` — Aidin, Nov 15 '16 at 07:13
Oh ok so you are saying to use `LayoutInflater` to add it into the `scrollview`? — , Nov 15 '16 at 07:16
@1290 try this put those buttons outside of scrollview may be stick to the bottom of the screen. So when u hit ADD keep on adding textview to that scrollview how u r already doing that now — Raghavendra, Nov 15 '16 at 07:23
@Raghavendra That is literally what I exactly did two seconds ago haha! I put those buttons outside of the scrollview in a RelativeLayout (I will update my layout file above). Now when I hit add I need a way to package those five textViews in a linear layout and put it in the scrollview. — , Nov 15 '16 at 07:25
Yes. Make a template xml containing your set of 5 `EditTexts`, then use `LayoutInflater` to add them to a view on a button click or similar. — Aidin, Nov 15 '16 at 07:26
@1290 as Aidin suggested use Layout inflater and inflate at runtime — Raghavendra, Nov 15 '16 at 07:29
If I do use `LayoutInflater` will that put it in a `LinearLayout`? Since I want to place those 5 new `TextViews` in my scrollview which has multiple `LinearLayouts` consisting of those `TextView` objects. I have updated my Layout file to show how the view objects are placed in my scrollview. — , Nov 15 '16 at 07:29
You grab a referens to the `view` you want to put it in. So you can choose freely — Aidin, Nov 15 '16 at 07:30
Ok let me try to create an XML of those five View objects, then use layout inflater to add it into my scrollview. — , Nov 15 '16 at 07:31
So I made the XML file consisting of my view objects. Basically in that XML I had a `LinearLayout` and added those five `EditText` objects to it. Now in my `Device` class (the fragment) when I do: `LayoutInflater.from(this).inflate(R.layout.EditTextViewObjects, scrollView, true);` It is giving me an error at the parameter I pass to the from method the `this` part? What context would I pass to this method? — , Nov 15 '16 at 07:39
You don't use it directly, you should use `getLayoutInflater` or similar as stated in: https://developer.android.com/reference/android/view/LayoutInflater.html — Aidin, Nov 15 '16 at 07:41
Can I do this: `inflater.from(getActivity()).inflate(R.layout.EditTextViewObjects, scrollView, true);` The `inflater` variable is passed to my `onCreateView` of the fragment class? — , Nov 15 '16 at 07:43
I think like this: `View newTexts = getLayoutInflater().inflate(R.layout.EditTextViewOb‌jects, scrollView, true);` — Aidin, Nov 15 '16 at 07:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128133/discussion-between-1290-and-aidin). — , Nov 15 '16 at 07:47
create a List of five EditText objects and display/add that list below the older one — Akshay Tilekar, Nov 15 '16 at 09:19

score 1 · Accepted Answer · edited Nov 15 '16 at 09:50

1

in your XML take

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/device_scroll_view">
    <LinearLayout
        android:id="@+id/layoutDynamic"a
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center_horizontal">            
    </LinearLayout>
</ScrollView>

and create one more XML for your Item and design accordingly (It will add dynamically when you click on ADD) dynamic_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/device_fragment_linear_layout"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="DeviceFragment"
android:orientation="vertical">

<TextView
                android:id="@+id/etDynamic"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="15dp"
                android:gravity="center"
                android:layout_gravity="center"
                android:hint="Color"
                android:layout_marginTop="10dp"/>
</LinearLayout>

so come to java Code

// take the reference of LinearLayout
linearLayout = (LinearLayout) romptView.findViewById(R.id.layoutDynamic);


// Take the reference of Add button 

Button addButton = (Button) rootView.findViewById(R.id.add_another_device_button);

addButton.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        final View addView = layoutInflater1.inflate(R.layout.dynamic_row, null);
        final TextView textView1 = (TextView) addView.findViewById(R.id.etDynamic);        
        textView1.setText(otheret.getText().toString().trim());                                                                           otheret.setText("");                                        linearLayout.addView(addView);    
    }
});


#and if you want to remove particular item
removeIcon.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
        addView.getParent()).removeView(addView);
    }
});

edited Nov 15 '16 at 09:50

Aidin

1,230
2
11
16

answered Nov 15 '16 at 09:41

Ramesh Kanuganti

275
1
11

Thank you for the code snippet. It helped a lot. I just had one question. In my case the dynamic-content.xml (The last snippet of code I updated in my question) I have about four EditText views that I add to the LinearLayout in my scrollview. when the user clicks on the add button. If the add button is clicked 5 times for example, then I would have about 25 new EditText on the screen. How would I get access to what the user types in those new EditText views that appear on the screen? Since each of those 5 EditText represent an Price object (user defined) and I want to save those to a database. – Nov 15 '16 at 18:24
1

@1290 You can give an ID to every view you inflate so that you can reference it. Another possibility would be to add everything you inflate to a list and then iterate through it to get all values – Aidin Nov 15 '16 at 20:15
@Aidin The things is when I dynamically add it using the `LayoutInflator` the view objects that are coming from the XML file have the same `Id's` for every instance of that layout file that I make. So is there a way I can make each of the View Object id's unique for every instance that I make of the `dynamic-content.xml`? – Nov 15 '16 at 20:25
1

@1290 Here is an example from my code: `View row = getLayoutInflater().inflate(R.layout.someTemplate, someLayout, false);` `row.setId(someIntegerValue);` So you find the template with the ID you gave it and then you can find the child view you need from there – Aidin Nov 15 '16 at 20:29
Hi Aidin I am still a little confused. Sorry about this. After this line: `View temp = inflater.inflate(R.layout.edit_text_view_objects, container, false);` I would do `temp.setId(someIntegerValue)`? What exactly would this `setId` line do? Give the linear layout (which contains the five EditText objects) a unique id? Since when I say `temp.setId` my temp variable is the LinearLayout consisting of those five EditText Objects as shown in the `edit_text_view_objects.xml`. – Nov 15 '16 at 23:25
1

so if you have 4 edit texts, take 4 text views under a linear layout read those edit texts when he clicks on ADD, if you want you can Add the values to a list, i did something similar it might be useful dynamicList.add(otheret.getText().toString().trim());\ textView1.setText(otheret.getText().toString().trim()); textView1.setId(textView1.getId() + counter); otheret.setText(""); linearLayout.addView(addView); – Ramesh Kanuganti Nov 16 '16 at 05:12
1

@1290 Yes, then the containing `LinearLayout` will get the Id that you can reference to. And then you can find the child views inside: http://stackoverflow.com/questions/8395168/android-get-children-inside-a-view – Aidin Nov 16 '16 at 06:59
@Aidin Sorry for the late response. Thank you so much for all the help exactly what I needed! – Nov 16 '16 at 19:55

score 0 · Answer 2 · answered Nov 15 '16 at 07:50

0

You can add these EditText through code at runtime

answered Nov 15 '16 at 07:50

Sahil Garg

263
1
20

2

Maybe make your answer slightly more elaborate...This isn't telling OP anything. This is comment material, not answer material – Aidin Nov 15 '16 at 08:04
Thank you will take care from next time – Sahil Garg Nov 16 '16 at 04:50

score 0 · Answer 3 · answered Nov 27 '17 at 07:25

    we can solve this, using List/Recycler view efficiently/easily 
    when ever you clicking on ADD add the item to list and notify the Recycler view adapter 

    and and removing also easy you just delete the item from list based on recycler View position.

    No need to create Dynamic View here recycler view will do the job


    // In Main Layout
    <android.support.v7.widget.RecyclerView
            android:id="@+id/recycleView_Stops"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/layoutSaveBottom"
            android:layout_below="@+id/ll1"
            android:layout_marginTop="@dimen/pad_10dp"
            app:layout_behavior="@string/bottom_sheet_behavior" />

    <TextView
                        android:id="@+id/tvAddOther"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:gravity="center"
                        android:text="@string/icon_plus"
                        android:textColor="@color/colorPrimary"
                        android:textSize="40sp"
                        app:customFontPath="@string/roboto_regular" />


    // design your layout item 

---------------------

and when clicking on Add set user entered details

addOther.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                RouteElements routeElements = new RouteElements();
                            routeElements.setLatitude(latitude);
                            routeElements.setLongitude(longitude);
                            routeElements.setStopName(otheret.getText().toString().trim());

                            routeElementsArrayList.add(routeElements);
                            routeStopsAdapter.notifyDataSetChanged();

        });

And in  Your Adapter for removing the item

public void remove(int position) {
            if (position < routeElementsArrayList.size()) {
                routeElementsArrayList.remove(position);
                notifyDataSetChanged();
            }
        }

Android: How to display more views after clicking a button

3 Answers3

Linked