Search code examples
androidandroid-scrollviewandroid-constraintlayout

How to programmatically add constraint layouts to a scrollview?


I have the following in mind:

  1. Create a new Activity which contains somewhere on the layout a scrollview
  2. Create a ConstraintLayout (width is on match-parent) with one edit-field and one textview next to eachother

=> Now I would like to add with something like a button any number of constraint layouts of this kind to the scrollview.

Can somebody explain how this is done? Is it even possible this way.

(in AndroidStudio)

Edit: I tried the following:

protected void addElementToScrollView() {
    ScrollView sv = getLayoutInflater()
            .inflate(R.layout.activity_goods_received_separation_on_container_level, null)
                .findViewById(R.id.scrollViewChanges);
    ConstraintLayout cl = findViewById(R.id.gc_scrollview_element);
    sv.addView(cl);
}

This is inside the activity containing the scrollview:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GoodsReceived_Separation_On_ContainerLevel">

    <TextView
        android:id="@+id/goods_received_num"
        android:layout_width="73dp"
        android:layout_height="27dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.601"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/goods_received_mat2" />

    <TextView
        android:id="@+id/goods_received_mat2"
        android:layout_width="73dp"
        android:layout_height="27dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.601"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="73dp"
        android:layout_height="27dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="@string/goods_received_num"
        android:textSize="18sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="120dp"
        android:layout_height="27dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="@string/goods_received_eme"
        android:textSize="18sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/divider" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="120dp"
        android:layout_height="27dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="@string/goods_received_loc"
        android:textSize="18sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView10" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="120dp"
        android:layout_height="27dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="@string/goods_received_type"
        android:textSize="18sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView9" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="120dp"
        android:layout_height="27dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="@string/goods_received_bme"
        android:textSize="18sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView7" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="73dp"
        android:layout_height="27dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="@string/goods_received_mat"
        android:textSize="18sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/divider"
        android:layout_width="368dp"
        android:layout_height="3dp"
        android:layout_marginTop="8dp"
        android:background="?android:attr/listDivider"
        android:divider="#000000"
        android:visibility="visible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/goods_received_num" />

    <ScrollView
        android:id="@+id/scrollViewChanges"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:layout_marginTop="48dp"
        android:fillViewport="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView8">

    </ScrollView>

    <Button
        android:id="@+id/button_apply_gr_change"
        android:layout_width="137dp"
        android:layout_height="68dp"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/scrollViewChanges" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="100dp"
        android:layout_height="26dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/goods_received_loc"
        app:layout_constraintBottom_toTopOf="@+id/scrollViewChanges"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView13"
        app:layout_constraintTop_toBottomOf="@+id/textView8"
        app:layout_constraintVertical_bias="0.2" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="100dp"
        android:layout_height="26dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/goods_received_type"
        app:layout_constraintBottom_toTopOf="@+id/scrollViewChanges"
        app:layout_constraintEnd_toStartOf="@+id/textView11"
        app:layout_constraintStart_toEndOf="@+id/textView12"
        app:layout_constraintTop_toBottomOf="@+id/textView8"
        app:layout_constraintVertical_bias="0.2" />

    <TextView
        android:id="@+id/textView12"
        android:layout_width="100dp"
        android:layout_height="26dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/goods_received_eme"
        app:layout_constraintBottom_toTopOf="@+id/scrollViewChanges"
        app:layout_constraintEnd_toStartOf="@+id/textView13"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView8"
        app:layout_constraintVertical_bias="0.222" />

    <View
        android:id="@+id/divider3"
        android:layout_width="368dp"
        android:layout_height="1dp"
        android:layout_marginBottom="4dp"
        android:layout_marginTop="4dp"
        android:background="?android:attr/listDivider"
        app:layout_constraintBottom_toTopOf="@+id/textView11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

</android.support.constraint.ConstraintLayout>

And this is the layout element which I try to add to the scroll view (any number of times, so it shall be possible to have for example 10 of these at the same time in the scrollview and the number should be dynamical increasable)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/gc_scrollview_element"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Spinner
    android:id="@+id/spinner"
    android:layout_width="100dp"
    android:layout_height="27dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/spinner3"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Spinner
    android:id="@+id/spinner3"
    android:layout_width="100dp"
    android:layout_height="27dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/spinner2"
    app:layout_constraintStart_toEndOf="@+id/spinner"
    app:layout_constraintTop_toTopOf="parent" />

<Spinner
    android:id="@+id/spinner2"
    android:layout_width="100dp"
    android:layout_height="27dp"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/spinner3"
    app:layout_constraintTop_toTopOf="parent" />

(I know it contains different elements than the question suggested, but I think there is no difference to the problem.)

My solution crashes while testing at "sv.addView(cl);". (Thank you for the already suggested solution, will test it as soon as I understand what I am doing wrong here...)


Solution

  • Please try below code, i have added two button, you can replace button with textview or edittext or any other controls.

    Suggestion :- If you use any ui controls inside ConstraintLayout programmatically then please define its id.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
    
        ConstraintLayout constraintLayout = findViewById(R.id.constraintlayout);
    
        // Create btn_contact_us1
        Button btn_contact_us1 = new Button(this);
        // Generate an Id and assign it to programmatically created Button
        btn_contact_us1.setId(View.generateViewId());
        btn_contact_us1.setText("Contact Us 1");
        btn_contact_us1.setLayoutParams(new ConstraintLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        // Add programmatically created Button to ConstraintLayout
        constraintLayout.addView(btn_contact_us1);
    
        // Create btn_contact_us2
        Button btn_contact_us2 = new Button(this);
        // Generate an Id and assign it to programmatically created Button
        btn_contact_us2.setId(View.generateViewId());
        btn_contact_us2.setText("Contact Us 2");
        btn_contact_us2.setLayoutParams(new ConstraintLayout.LayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        // Add programmatically created Button to ConstraintLayout
        constraintLayout.addView(btn_contact_us2);
    
        // Create ConstraintSet
        ConstraintSet constraintSet = new ConstraintSet();
        // Make sure all previous Constraints from ConstraintLayout are not lost
        constraintSet.clone(constraintLayout);
    
        // Create Rule that states that the START of btn_contact_us1 will be positioned at the END of btn_contact_us2
        constraintSet.connect(btn_contact_us2.getId(), ConstraintSet.START, btn_contact_us1.getId(), ConstraintSet.END);
        constraintSet.applyTo(constraintLayout);    
    }
    

    and the layout code is as below

    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">
    
        <android.support.constraint.ConstraintLayout
        android:id="@+id/constraintlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    
    </ScrollView>
    

    Output:- check link image