ConstraintLayout within scrollview

Question

I am looking to build a UI where I would like to show the scroll on landscape orientation and keep the button to the very bottom of the screen and stick to the footer but there should be fair gap between to scroll during landscape view.

Any help is greatly appreciated.

<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">

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline40PercentVertical"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.35" />


<TextView
    android:id="@+id/tvPageHeader"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:text="Your detail"
    android:textAlignment="center"
    android:textSize="25sp"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tvLabelName"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="name"
    android:textAlignment="viewEnd"
    app:layout_constraintRight_toLeftOf="@+id/guideline40PercentVertical"
    android:layout_marginRight="10dp"
    android:layout_marginTop="62dp"
    app:layout_constraintTop_toBottomOf="@+id/tvPageHeader" />

<TextView
    android:id="@+id/tvName"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    tools:text="Mr. Ian Citizen"
    android:layout_marginLeft="10dp"
    app:layout_constraintLeft_toLeftOf="@+id/guideline40PercentVertical"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelName" />


<TextView
    android:id="@+id/tvLabelMobile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="mobile"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelName"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelName" />

<TextView
    android:id="@+id/tvMobile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="189232323"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/tvName"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelMobile" />



<TextView
    android:id="@+id/tvLabelEmail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="email"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelMobile"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelMobile" />

<TextView
    android:id="@+id/tvEmail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="Ian.citizen@app.com"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/tvMobile"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelEmail" />


<TextView
    android:id="@+id/tvLabelResidential"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="residential"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelEmail"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelEmail" />

<TextView
    android:id="@+id/tvResidential"
    android:maxLines="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="11 Frozan St, Brookvale 01-1000"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/tvEmail"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelResidential" />


<TextView
    android:id="@+id/tvLabelPostal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="postal"
    android:layout_marginRight="2dp"
    app:layout_constraintRight_toRightOf="@+id/tvLabelResidential"
    android:layout_marginTop="10dp"
    app:layout_constraintTop_toBottomOf="@+id/tvLabelResidential" />

<TextView
    android:id="@+id/tvPostal"
    android:maxLines="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="1 Rozan St, Brookvale 01-1000"
    android:layout_marginLeft="0dp"
    app:layout_constraintLeft_toLeftOf="@+id/tvResidential"
    app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelPostal" />

<Button
    android:id="@+id/btnDone"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:text="@string/controller_origination_review_personal_detail_button_done"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

[ Also in portrait view there is a small padding around the button not sure why?[2]

@Selvin ScrollView cant have multiple child here with both ConstraintLayout and Button — Bulu, May 10 '17 at 12:27
What do you not understand in **"outside the ScrollView"** ? like `` — Selvin, May 10 '17 at 12:30

Ali Samawi · Accepted Answer · 2017-05-10T18:17:40.920

i think you should change your code like this:

<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">

<ScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginBottom="0dp"
    app:layout_constraintBottom_toTopOf="@+id/btnDone">

    <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">

        <android.support.constraint.Guideline
            android:id="@+id/guideline40PercentVertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.35"
            tools:layout_editor_absoluteX="137dp"
            tools:layout_editor_absoluteY="62dp" />


        <TextView
            android:id="@+id/tvPageHeader"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:text="Your detail"
            android:textAlignment="center"
            android:textSize="25sp"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tvLabelName"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="62dp"
            android:text="name"
            android:textAlignment="viewEnd"
            app:layout_constraintRight_toLeftOf="@+id/guideline40PercentVertical"
            app:layout_constraintTop_toBottomOf="@+id/tvPageHeader" />

        <TextView
            android:id="@+id/tvName"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelName"
            app:layout_constraintLeft_toLeftOf="@+id/guideline40PercentVertical"
            tools:text="Mr. Ian Citizen" />


        <TextView
            android:id="@+id/tvLabelMobile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginTop="10dp"
            android:text="mobile"
            app:layout_constraintRight_toRightOf="@+id/tvLabelName"
            app:layout_constraintTop_toBottomOf="@+id/tvLabelName" />

        <TextView
            android:id="@+id/tvMobile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelMobile"
            app:layout_constraintLeft_toLeftOf="@+id/tvName"
            tools:text="189232323" />


        <TextView
            android:id="@+id/tvLabelEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginTop="10dp"
            android:text="email"
            app:layout_constraintRight_toRightOf="@+id/tvLabelMobile"
            app:layout_constraintTop_toBottomOf="@+id/tvLabelMobile" />

        <TextView
            android:id="@+id/tvEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelEmail"
            app:layout_constraintLeft_toLeftOf="@+id/tvMobile"
            tools:text="Ian.citizen@app.com" />


        <TextView
            android:id="@+id/tvLabelResidential"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginTop="10dp"
            android:text="residential"
            app:layout_constraintRight_toRightOf="@+id/tvLabelEmail"
            app:layout_constraintTop_toBottomOf="@+id/tvLabelEmail" />

        <TextView
            android:id="@+id/tvResidential"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="2"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelResidential"
            app:layout_constraintLeft_toLeftOf="@+id/tvEmail"
            tools:text="11 Frozan St, Brookvale 01-1000" />


        <TextView
            android:id="@+id/tvLabelPostal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginTop="10dp"
            android:text="postal"
            app:layout_constraintRight_toRightOf="@+id/tvLabelResidential"
            app:layout_constraintTop_toBottomOf="@+id/tvLabelResidential" />

        <TextView
            android:id="@+id/tvPostal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="2"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvLabelPostal"
            app:layout_constraintLeft_toLeftOf="@+id/tvResidential"
            tools:text="1 Rozan St, Brookvale 01-1000" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>

<Button
    android:id="@+id/btnDone"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="_button_done"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" /></android.support.constraint.ConstraintLayout>

+1 but constrain the bottom of the `ScrollView` to the top of the button and close the `ConstraintLayout`. — Cheticamp, May 10 '17 at 14:02
Thanks for your answer . It's working great How about I would like to have a consistent padding from between button "done" and the postal address during landscapeview . Bcz I have padding on portrait — Bulu, May 11 '17 at 09:17
awesome, this also fixed my issue, why do we need '0dp' on height/width of the ```ScrollView```? — Mairyu, May 27 '19 at 04:06

ConstraintLayout within scrollview

1 Answers1