I am trying to set up a part of an app where the user can take before and after pictures, I have done the layout for the tablerow however I would need this to be added each time the user clicks a button to add new pictures, I also ideally need the rows to be ID’d so they can pull the images through together as this will eventually be put onto a PDF document to be sent.

Below is my XML layout for Table Row:

<TableRow 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"
    tools:ignore="UselessParent">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:layout_gravity="center"
        android:layout_weight="1">

        <ImageButton
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:background="#00FFFFFF"
            android:importantForAccessibility="no"
            android:src="@drawable/add_a_photo"


            android:visibility="visible" />
        <ImageView android:importantForAccessibility="no"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"></ImageView></LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:orientation="horizontal"
        android:layout_gravity="center"
        android:layout_weight="1">
        <ImageButton
            android:importantForAccessibility="no"
            android:src="@drawable/add_a_photo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="visible"
            android:layout_gravity="center"
            android:background="#00FFFFFF"
            />
        <ImageView android:importantForAccessibility="no"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"></ImageView></LinearLayout>

</TableRow>

I have made it so there is an image button which I would like to replace with the thumbnail of the image once it has been taken.

This is all on a Fragmented XML page as it has multiple tabs for other questions.

Currently this fragment has the below code to inflate it once you navigate to the tab

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment


        return inflater.inflate(R.layout.fragment_pictures, container, false);
    }

I have tried looking around and finding different code examples, I have tried the below code however this caused the app to crash repeatedly.

View item;
    private AppCompatActivity parentView;
    ViewGroup parent = parentView.findViewById(R.id.pictures);

    final Button addPicture = (Button) item.findViewById(R.id.add_picture);
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        addPicture.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                parent.addView(item);
            }
        });
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        item = inflater.inflate(R.layout.table_row, parent,false);
        
        return inflater.inflate(R.layout.fragment_pictures, container, false);
    }