title: Guidelines Inside ScrollView - use Viewport %
body: <p>I would like to add content to an app that starts at about 70% down vertically and can be scrolled upwards to cover the top 70% views.</p>
  <p>I thought of using two children ConstraintLayout's inside a parent ConstraintLayout - the two children would be on top of each other. One would contain the views that would populate the first 70% of the screen while the other would contain a NestedScrollView which has an invisible <code>&lt;View&gt;</code> that takes up 70% of the height and then the additional content that can be scrolled up.</p>
  <p>I'm facing a problem with marking the 70% spot - using a Guideline inside the NestedScrollView isn't working because the %s are fluid (it matches to 70% of the content inside the NestedScrollView instead of 70% of the viewable screen). Using a Guideline outside the NestedScrollView doesn't work because well... constraints have to be siblings to compile.</p>
  <p>How can I accomplish this?</p>
  <pre><code>           &lt;androidx.constraintlayout.widget.ConstraintLayout
              android:id=&quot;@+id/parentLayout&quot;
              android:layout_width=&quot;match_parent&quot;
              android:layout_height=&quot;match_parent&quot;
              &gt;
  
              &lt;androidx.constraintlayout.widget.ConstraintLayout
                  android:id=&quot;@+id/firstConstraintLayout&quot;
                  android:layout_width=&quot;match_parent&quot;
                  android:layout_height=&quot;match_parent&quot;
                  android:background=&quot;@color/red5F&quot;
                  app:layout_constraintLeft_toLeftOf=&quot;parent&quot;
                  app:layout_constraintTop_toTopOf=&quot;parent&quot;&gt;
                  // A bunch of content that should fill up the first 70% of the screen and be covered by the overlay if user scrolls
              &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
              &lt;androidx.constraintlayout.widget.ConstraintLayout
                  android:id=&quot;@+id/overlayConstraintLayout&quot;
                  android:layout_width=&quot;match_parent&quot;
                  android:layout_height=&quot;match_parent&quot;
                  app:layout_constraintLeft_toLeftOf=&quot;parent&quot;
                  app:layout_constraintTop_toTopOf=&quot;parent&quot;&gt;
                
                  &lt;androidx.core.widget.NestedScrollView
                      android:layout_width=&quot;match_parent&quot;
                      android:layout_height=&quot;0dp&quot;
                      android:fillViewport=&quot;true&quot;
                      android:id=&quot;@+id/scrollView&quot;
                      app:layout_constraintLeft_toLeftOf=&quot;parent&quot;
                      app:layout_constraintTop_toTopOf=&quot;parent&quot;
                      app:layout_constraintBottom_toBottomOf=&quot;parent&quot;&gt;
                      &lt;androidx.constraintlayout.widget.ConstraintLayout
                          android:layout_width=&quot;match_parent&quot;
                          android:layout_height=&quot;match_parent&quot;
                          android:id=&quot;@+id/overlayInnerLayout&quot;&gt;
                          &lt;androidx.constraintlayout.widget.Guideline
                              android:layout_width=&quot;wrap_content&quot;
                              android:layout_height=&quot;wrap_content&quot;
                              android:id=&quot;@+id/verticalGuidelineOverlay&quot;
                              android:orientation=&quot;horizontal&quot;
                              app:layout_constraintGuide_percent=&quot;0.7&quot;/&gt;
                          &lt;View
                              android:layout_width=&quot;match_parent&quot;
                              android:layout_height=&quot;0dp&quot;
                              android:id=&quot;@+id/spacerView&quot;
                              app:layout_constraintTop_toTopOf=&quot;parent&quot;
                              app:layout_constraintBottom_toTopOf=&quot;@id/verticalGuidelineOverlay&quot;
                              app:layout_constraintLeft_toLeftOf=&quot;parent&quot;/&gt;
                          // More content here that the user could scroll upwards that would start at the 70% point and eventually cover the entire screen.
                       &lt;/ConstraintLayout&gt;
             &lt;/NestedScrollView&gt;
        &lt;/ConstraintLayout&gt;
      &lt;/ConstraintLayout&gt;
  </code></pre>
  <p>Video w/example here: <a href="https://imgur.com/a/BTolYUu" rel="nofollow noreferrer">https://imgur.com/a/BTolYUu</a></p>