ConstraintLayout within scrollview

android android-layout android-constraintlayout constraint-layout-chains
Bulu picture Bulu · May 10, 2017 · Viewed 8.8k times · Source

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="[email protected]"
    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" />

Here I don't see any scroll and the button just sticks to the bottom of the window where I want fair bit of gap as you can see in portrait view

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

Answer

ali samawi picture ali samawi · May 10, 2017

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="[email protected]" />


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

Related questions

Align views right in ConstraintLayout without clipping

I am creating a dialog with two buttons aligned right in relation to the parent ConstraintLayout. Everything is fine, until the text of the buttons becomes very long. When the text of either or both buttons is lengthy, the buttons …

Read More
ConstraintLayout chain does not work if some chained views constrained to another chained view

I am not sure whether it is a bug of ConstraintLayout or not, so I try to ask if somebody knows I made any mistake. I have a layout which I want to spread evenly on the screen 3 elements. Just …

Read More
View disappears when padding is added in constraint layout android

I'm trying to create a vertical chain of four circles using ConstraintLayout. It renders well until I add padding to the ConstraintLayout at which point, the entire view goes missing. Contents of my layout file is as follows <?xml …

Read More