Dynamic Views in Android | Programmatically add, remove and control views

 

Dynamic Views in Android| Programmatically add, remove and control views

In this article we will learn how we can add a view in android using java. Why we need to add views dynamically? So suppose we have a ecommerce app, in the app first it will fetch data from the server. Also we do not know how may product will be shown. So we need to create a program which add data in the UI using java.

Let's Start

Step 1

Create a layout file for card which will be added

card.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        >

        <androidx.cardview.widget.CardView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_margin="10dp"

            app:cardCornerRadius="10dp"

            app:cardElevation="10dp">

            <RelativeLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:padding="10dp">

                <TextView

                    android:id="@+id/name"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="Name"

                    android:textColor="@android:color/holo_purple"

                    android:textFontWeight="1000"

                    android:textSize="30dp"/>

                <Button

                    android:id="@+id/delete"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_alignParentEnd="true"

                    android:text="Delete"

                    android:layout_alignParentRight="true" />

            </RelativeLayout>

        </androidx.cardview.widget.CardView>

    </RelativeLayout>

</RelativeLayout>

Step 2

Create a layout file for dialog which will take input

dialog.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

    android:layout_height="match_parent">

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:padding="10dp">

        <EditText

            android:id="@+id/nameEdit"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:hint="Name"

            android:textSize="20dp"/>

    </RelativeLayout>

</RelativeLayout>

Step 3

Create activity layout file

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

    <Button

        android:id="@+id/add"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Add"

        android:layout_marginBottom="10dp"

        android:layout_centerHorizontal="true"

        android:layout_alignParentBottom="true"/>

    <ScrollView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_marginBottom="70dp"

        android:scrollbars="none">

        <LinearLayout

            android:id="@+id/container"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="vertical">

        </LinearLayout>

    </ScrollView>

</RelativeLayout>

Step 4

Now write this code in java language

MainActivity.java

package com.example.codevedanam;

import androidx.appcompat.app.AlertDialog;

import androidx.appcompat.app.AppCompatActivity;

import android.content.DialogInterface;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.LinearLayout;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    Button add;

    AlertDialog dialog;

    LinearLayout layout;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        add = findViewById(R.id.add);

        layout = findViewById(R.id.container);

        buildDialog();

        add.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                dialog.show();

            }

        });

    }

    private void buildDialog() {

        AlertDialog.Builder builder = new AlertDialog.Builder(this);

        View view = getLayoutInflater().inflate(R.layout.dialog, null);

        final EditText name = view.findViewById(R.id.nameEdit);

        builder.setView(view);

        builder.setTitle("Enter name")

                .setPositiveButton("OK", new DialogInterface.OnClickListener() {

                    @Override

                    public void onClick(DialogInterface dialog, int which) {

                        addCard(name.getText().toString());

                    }

                })

                .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {

                    @Override

                    public void onClick(DialogInterface dialog, int which) {

                    }

                });

        dialog = builder.create();

    }

    private void addCard(String name) {

        final View view = getLayoutInflater().inflate(R.layout.card, null);

        TextView nameView = view.findViewById(R.id.name);

        Button delete = view.findViewById(R.id.delete);

        nameView.setText(name);

        delete.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                layout.removeView(view);

            }

        });

        layout.addView(view);

    }

}

Result