title: How to make ConstraintLayout scrollable in android?
body: <p>I am trying to dynamically add elements to ConstraintLayout such that it is scrollable. I wrapped ConstraintLayout in a ScrollView. It looks nice before elements are inserted. However, after insertions, the scrollview does not expand so that some elements at bottom are not shown. </p>
  
  <p><a href="https://i.imgur.com/PtND5uo.png" rel="nofollow noreferrer">https://i.imgur.com/PtND5uo.png</a>
  buttons disapear</p>
  
  <pre><code>&lt;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="wrap_content"
      android:fillViewport="true"
      tools:context="com.example.abel.standingcalculator.MainActivity"&gt;
  &lt;android.support.constraint.ConstraintLayout
      android:id="@+id/activity_main"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      tools:layout_editor_absoluteX="0dp"
      tools:layout_editor_absoluteY="0dp"&gt;
  
      &lt;Button
          android:id="@+id/calculate"
          android:layout_width="122dp"
          android:layout_height="48dp"
          android:layout_marginBottom="0dp"
          android:layout_weight="1"
          android:text="Calculate"
          app:layout_constraintBottom_toBottomOf="@+id/save"
          app:layout_constraintLeft_toRightOf="@+id/save"
          app:layout_constraintRight_toRightOf="parent" /&gt;
  
      &lt;Button
          android:id="@+id/save"
          android:layout_width="125dp"
          android:layout_height="49dp"
          android:layout_marginBottom="0dp"
          android:layout_marginTop="40dp"
          android:layout_weight="1"
          android:text="Save"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toLeftOf="@+id/calculate"
          app:layout_constraintTop_toBottomOf="@+id/new_item"
          app:layout_constraintVertical_bias="0.325" /&gt;
  
      &lt;EditText
          android:id="@+id/proportion1"
          android:layout_width="0dp"
          android:layout_height="36dp"
          android:layout_marginBottom="0dp"
          android:layout_marginEnd="8dp"
          android:layout_marginLeft="8dp"
          android:layout_marginRight="8dp"
          android:ems="10"
          android:inputType="numberDecimal"
          android:textSize="14sp"
          android:visibility="visible"
          app:layout_constraintBottom_toBottomOf="@+id/proportion_label1"
          app:layout_constraintHorizontal_bias="0.0"
          app:layout_constraintLeft_toLeftOf="@+id/item_name1"
          app:layout_constraintRight_toRightOf="parent" /&gt;
  
      &lt;EditText
          android:id="@+id/sd1"
          android:layout_width="0dp"
          android:layout_height="36dp"
          android:ems="10"
          android:inputType="numberDecimal"
          android:textSize="14sp"
          android:visibility="visible"
          app:layout_constraintBottom_toBottomOf="@+id/sd_label1"
          app:layout_constraintHorizontal_bias="0.0"
          app:layout_constraintLeft_toLeftOf="@+id/proportion1"
          app:layout_constraintRight_toRightOf="parent" /&gt;
  
      &lt;EditText
          android:id="@+id/mean1"
          android:layout_width="0dp"
          android:layout_height="36dp"
          android:ems="10"
          android:inputType="numberDecimal"
          android:textAlignment="center"
          android:textSize="14sp"
          app:layout_constraintBottom_toBottomOf="@+id/mean_label1"
          app:layout_constraintHorizontal_bias="0.0"
          app:layout_constraintLeft_toLeftOf="@+id/sd1"
          app:layout_constraintRight_toRightOf="parent" /&gt;
  
      &lt;EditText
          android:id="@+id/total_grade1"
          android:layout_width="0dp"
          android:layout_height="36dp"
          android:layout_marginBottom="1dp"
          android:ems="10"
          android:inputType="numberDecimal"
          android:textAlignment="center"
          android:textAppearance="@style/TextAppearance.AppCompat.Medium"
          android:textColor="@android:color/black"
          android:textSize="14sp"
          app:layout_constraintBottom_toBottomOf="@+id/total_grade_label1"
          app:layout_constraintHorizontal_bias="0.0"
          app:layout_constraintLeft_toLeftOf="@+id/mean1"
          app:layout_constraintRight_toRightOf="parent" /&gt;
  
      &lt;TextView
          android:id="@+id/item_name_label1"
          android:layout_width="41dp"
          android:layout_height="wrap_content"
          android:layout_marginLeft="20dp"
          android:layout_marginStart="16dp"
          android:layout_marginTop="30dp"
          android:text="Item Name"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  
      &lt;TextView
          android:id="@+id/proportion_label1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginLeft="16dp"
          android:layout_marginStart="16dp"
          android:layout_marginTop="20dp"
          android:text="Proportion"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/item_name_label1" /&gt;
  
      &lt;TextView
          android:id="@+id/sd_label1"
          android:layout_width="60dp"
          android:layout_height="wrap_content"
          android:layout_marginLeft="16dp"
          android:layout_marginTop="20dp"
          android:text="Standard Deviation"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/proportion_label1" /&gt;
  
      &lt;TextView
          android:id="@+id/mean_label1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginLeft="16dp"
          android:layout_marginStart="16dp"
          android:layout_marginTop="20dp"
          android:text="Mean"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/sd_label1" /&gt;
  
      &lt;TextView
          android:id="@+id/total_grade_label1"
          android:layout_width="46dp"
          android:layout_height="wrap_content"
          android:layout_marginLeft="16dp"
          android:layout_marginTop="20dp"
          android:text="Total Grade"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/mean_label1" /&gt;
  
      &lt;TextView
          android:id="@+id/your_grade_label1"
          android:layout_width="40dp"
          android:layout_height="wrap_content"
          android:layout_marginLeft="16dp"
          android:layout_marginStart="16dp"
          android:layout_marginTop="20dp"
          android:text="Your grade"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/total_grade_label1" /&gt;
  
      &lt;EditText
          android:id="@+id/item_name1"
          android:layout_width="0dp"
          android:layout_height="36dp"
          android:layout_marginEnd="8dp"
          android:layout_marginLeft="32dp"
          android:layout_marginRight="8dp"
          android:layout_marginStart="32dp"
          android:ems="10"
          android:inputType="text"
          android:textAlignment="center"
          android:textSize="14sp"
          android:visibility="visible"
          app:layout_constraintBottom_toBottomOf="@+id/item_name_label1"
          app:layout_constraintHorizontal_bias="0.0"
          app:layout_constraintLeft_toRightOf="@+id/item_name_label1"
          app:layout_constraintRight_toRightOf="parent" /&gt;
  
      &lt;Button
          android:id="@+id/new_item"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginLeft="8dp"
          android:layout_marginRight="8dp"
          android:layout_marginTop="38dp"
          android:text="Add New Item"
          app:layout_constraintHorizontal_bias="0.97"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/your_grade_label1" /&gt;
  
      &lt;EditText
          android:id="@+id/your_grade1"
          android:layout_width="323dp"
          android:layout_height="36dp"
          android:ems="10"
          android:inputType="numberDecimal"
          android:textAlignment="center"
          android:textAppearance="@style/TextAppearance.AppCompat.Medium"
          android:textColor="@android:color/black"
          android:textSize="14sp"
          app:layout_constraintBottom_toBottomOf="@+id/your_grade_label1"
          app:layout_constraintHorizontal_bias="0.0"
          app:layout_constraintLeft_toLeftOf="@+id/total_grade1"
          app:layout_constraintRight_toRightOf="parent" /&gt;
  
      &lt;android.support.constraint.Guideline
          android:id="@+id/guideline"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          app:layout_constraintGuide_begin="16dp"
          tools:layout_editor_absoluteX="16dp"
          tools:layout_editor_absoluteY="81dp" /&gt;
      &lt;android.support.constraint.ConstraintLayout
          android:id="@+id/activity_main"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"&gt;
      &lt;/android.support.constraint.ConstraintLayout&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p>Edit:
  Here is the dynamically added part.</p>
  
  <pre><code>    mConstraintSet.clone(mConstraintLayout); // get constraints from ConstraintSet        }
      //item name label
      mConstraintSet.constrainHeight(item_name_label.getId(),
              ConstraintSet.WRAP_CONTENT);
      mConstraintSet.constrainWidth(item_name_label.getId(),
              toDp(41));
      int your_grade_id = (itemCount == 2) ? R.id.your_grade1 : ids.get("your_grade"+(itemCount-1));
      mConstraintSet.connect(item_name_label.getId(), ConstraintSet.TOP, your_grade_id,
              ConstraintSet.BOTTOM,toDp(40));
      mConstraintSet.connect(item_name_label.getId(), ConstraintSet.START, ConstraintSet.PARENT_ID,
              ConstraintSet.START,toDp(20));
      //for item name
      mConstraintSet.constrainHeight(item_name.getId(),
              toDp(36));
      mConstraintSet.constrainWidth(item_name.getId(),
              0);
      mConstraintSet.connect(item_name.getId(), ConstraintSet.BOTTOM, item_name_label.getId(),
              ConstraintSet.BOTTOM,0);
      mConstraintSet.connect(item_name.getId(), ConstraintSet.START, item_name_label.getId(),
              ConstraintSet.END, toDp(32));
      mConstraintSet.connect(item_name.getId(), ConstraintSet.END, ConstraintSet.PARENT_ID,
              ConstraintSet.END,0);
      //proportion
      mConstraintSet.constrainHeight(proportion_label.getId(),
              ConstraintSet.WRAP_CONTENT);
      mConstraintSet.constrainWidth(proportion_label.getId(),
              ConstraintSet.WRAP_CONTENT);
      mConstraintSet.connect(proportion_label.getId(), ConstraintSet.TOP, item_name_label.getId(),
              ConstraintSet.BOTTOM,toDp(20));
      mConstraintSet.connect(proportion_label.getId(), ConstraintSet.START, item_name_label.getId(),
              ConstraintSet.START,0);
      connect(mConstraintSet, proportion, item_name, proportion_label);
      //sd
      mConstraintSet.constrainHeight(sd_label.getId(),
              ConstraintSet.WRAP_CONTENT);
      mConstraintSet.constrainWidth(sd_label.getId(),
              toDp(60));
      mConstraintSet.connect(sd_label.getId(), ConstraintSet.TOP, proportion_label.getId(),
              ConstraintSet.BOTTOM,toDp(20));
      mConstraintSet.connect(sd_label.getId(), ConstraintSet.START, proportion_label.getId(),
              ConstraintSet.START,0);
      connect(mConstraintSet, sd, proportion, sd_label);
      //mean
      mConstraintSet.constrainHeight(mean_label.getId(),
              ConstraintSet.WRAP_CONTENT);
      mConstraintSet.constrainWidth(mean_label.getId(),
              ConstraintSet.WRAP_CONTENT);
      mConstraintSet.connect(mean_label.getId(), ConstraintSet.TOP, sd_label.getId(),
              ConstraintSet.BOTTOM,toDp(20));
      mConstraintSet.connect(mean_label.getId(), ConstraintSet.START, sd_label.getId(),
              ConstraintSet.START,0);
      connect(mConstraintSet, mean, sd, mean_label);
      //total grade
      mConstraintSet.constrainHeight(total_grade_label.getId(),
              ConstraintSet.WRAP_CONTENT);
      mConstraintSet.constrainWidth(total_grade_label.getId(),
              toDp(46));
      mConstraintSet.connect(total_grade_label.getId(), ConstraintSet.TOP, mean_label.getId(),
              ConstraintSet.BOTTOM,toDp(20));
      mConstraintSet.connect(total_grade_label.getId(), ConstraintSet.START, mean_label.getId(),
              ConstraintSet.START,0);
      connect(mConstraintSet, total_grade, mean, total_grade_label);
      //your grade
      mConstraintSet.constrainHeight(your_grade_label.getId(),
              ConstraintSet.WRAP_CONTENT);
      mConstraintSet.constrainWidth(your_grade_label.getId(),
              toDp(40));
      mConstraintSet.connect(your_grade_label.getId(), ConstraintSet.TOP, total_grade_label.getId(),
              ConstraintSet.BOTTOM,toDp(20));
      mConstraintSet.connect(your_grade_label.getId(), ConstraintSet.START, total_grade_label.getId(),
              ConstraintSet.START,0);
      connect(mConstraintSet, your_grade, total_grade, your_grade_label);
      //relocate buttons
      mConstraintSet.connect(R.id.new_item, ConstraintSet.TOP, your_grade_label.getId(),
              ConstraintSet.BOTTOM,toDp(40));
      mConstraintSet.connect(R.id.save, ConstraintSet.TOP, R.id.new_item,
              ConstraintSet.BOTTOM,toDp(40));
      mConstraintSet.connect(R.id.save, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID,
              ConstraintSet.BOTTOM,toDp(0));
  
      mConstraintSet.applyTo(mConstraintLayout);
  </code></pre>
  
  <p>Hopefully this could make the code more readable.
  <a href="https://i.imgur.com/lYIXlVi.png" rel="nofollow noreferrer">https://i.imgur.com/lYIXlVi.png</a></p>