Khalil Jomaa Khalil Jomaa - 14 days ago 5
Android Question

Android: Add and Remove Layouts programmatically

I have a layout with 4 Floating labels and under them a button.

I want to give the user an option that when pressing on the button to show below it a new layout that including TextView and ImageView on each click (up to 3 layouts)

See example of requested Layout

My question is what is the best design for such a layout ?

Is it to add ald layouts with Visibily GONE and clicking the button show every time one layout ?

Or add them programmatically ?

Also I want to give the user an option to delete any layout he wants from the total three.

Thanks in advance.

Answer

The easiest option is probably just what you proposed - Adding all the layouts in the xml layout file and setting the visibility of the individual layouts to "GONE". If you want to add many more layouts you might want to look into creating them programatically in order to save resources and not load all the images when the activity is created.

You'll probably want to put the layout with everything in it (looks like a vertical Linear Layout to me) into a scrollView so the layouts don't move out of frame when set visible.

So you'd need an onClick Function for the Button that makes the next Layout visible that is not visible and another that hides the layout again.

Your xml could look like this (throw this into any layout you like to use, I used a vertical Linear Layout):

<Button
    android:text="Button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:onClick="addLayout" />

<LinearLayout
    android:orientation="vertical"
    android:layout_weight="1"
    android:visibility="gone"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout1">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView" />

    <Button
        android:text="hide"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:onClick="hideParent (MainActivity)" />
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_weight="1"
    android:visibility="gone"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout2">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView" />

    <Button
        android:text="hide"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:onClick="hideParent (MainActivity)" />
</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:layout_weight="1"
    android:visibility="gone"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout3">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView" />

    <Button
        android:text="hide"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button4"
        android:onClick="hideParent (MainActivity)" />

</LinearLayout>

As I said, it might be helpful to wrap a ScrollLayout around all that, this is just the basic idea. Your main could look like this:

LinearLayout[] layouts;

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

    layouts = new LinearLayout[3];
    layouts[0] = (LinearLayout) findViewById(R.id.layout1);
    layouts[1] = (LinearLayout) findViewById(R.id.layout2);
    layouts[2] = (LinearLayout) findViewById(R.id.layout3);
}

public void hideParent(View v) {
    ((LinearLayout)v.getParent()).setVisibility(View.GONE);
}

public void addLayout(View v) {
    for (int i = 0; i < 2; i++) {
        if (layouts[i].getVisibility() == View.GONE) {
            layouts[i].setVisibility(View.VISIBLE);
            break;
        }
    }
}

Hope that helps, your actual way of coding depends very much on the flexibility and number of layouts you want to achieve.