Constraint Layout shifted down over screen edge - android

I've been using Constraint Layouts for a while but today I faced a strange problem, all my layouts that contain constraint layouts are shifted down over the lower screen edge although the width and height of the parent constraint layout are (match-parent), the result is below
and here's is the XML code for the layout
<?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"
android:background="#color/colorPrimary"
tools:context=".Setup_SettingsActivity">
<android.support.design.widget.TextInputLayout
android:id="#+id/setup_pharmacy_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView5">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/setup_pharmacy_name" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="68dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="#string/setup_welcome"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.TextInputLayout
android:id="#+id/setup_pharmacy_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_name">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/setup_pharmacy_address"
android:inputType="textMultiLine" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/setup_save_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="84dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:backgroundTint="#color/colorAccent"
android:text="#string/setup_save_btn_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_has_delivery_switch" />
<Switch
android:id="#+id/setup_has_delivery_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="#string/setup_has_delivery_switch_text"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textOff="#string/setup_delivery_switch_off"
android:textOn="#string/setup_delivery_switch_on"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:backgroundTint="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.476"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_address"
app:srcCompat="#mipmap/position_btn" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="42dp"
android:layout_height="38dp"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="52dp"
android:visibility="invisible"
app:layout_constraintStart_toEndOf="#+id/imageButton"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_address"
app:srcCompat="#mipmap/position_done" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginTop="60dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/setup_record_position_text"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/imageButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_address" />
<View
android:id="#+id/divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="40dp"
android:background="#color/divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageButton" />
<View
android:id="#+id/divider2"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="20dp"
android:background="#color/divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_has_delivery_switch" />
</android.support.constraint.ConstraintLayout>
what might be the cause of this problem?


Your layout got pushed down because you are using way too large margins - you are using constraintLayout but you are also using large fixed size for your margins (android:layout_marginTop="60dp" for example) and because different phones got different screen size, when you are using a fixed size on your view you are making your layout less responsive(small margins are ok but the problem starts with the large margins).
If you want to place some view somewhere at your screen I would recommend using guielines and constraint your views into the guideline rather then give your view a lot of margins.
You can simply use chains to achieve your desired layout.
Here is an example of the layout that you want to achieve using cnostraintLayout and chains:
<?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">
<android.support.design.widget.TextInputLayout
android:id="#+id/setup_pharmacy_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/setup_pharmacy_address"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView5">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="setup_pharmacy_name" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="setup_welcome"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/setup_pharmacy_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.TextInputLayout
android:id="#+id/setup_pharmacy_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/textView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_name">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="setup_pharmacy_address"
android:inputType="textMultiLine" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/setup_save_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:backgroundTint="#color/colorAccent"
android:text="setup_save_btn_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider2" />
<Switch
android:id="#+id/setup_has_delivery_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="setup_has_delivery_switch_text"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textOff="setup_delivery_switch_off"
android:textOn="setup_delivery_switch_on"
app:layout_constraintBottom_toTopOf="#+id/divider2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="#+id/textView6"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView6"
app:layout_constraintTop_toTopOf="#+id/textView6"
app:srcCompat="position_btn" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="42dp"
android:layout_height="38dp"
android:src="#drawable/new_question"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/textView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageButton"
app:layout_constraintTop_toTopOf="#+id/textView6" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="setup_record_position_text"
android:textColor="#color/common_google_signin_btn_text_dark_default"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/divider"
app:layout_constraintEnd_toStartOf="#+id/imageButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_pharmacy_address" />
<View
android:id="#+id/divider"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:background=""
app:layout_constraintBottom_toTopOf="#+id/setup_has_delivery_switch"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<View
android:id="#+id/divider2"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toTopOf="#+id/setup_save_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/setup_has_delivery_switch" />
</android.support.constraint.ConstraintLayout>
And it will look like this:


It's depend upon screen size.Sometime our layout is optimial for medium or large screen size device which cause issue to small device. In order to fix this issue for smaller device too, add ScrollView as parent layout of constraint layout
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
....
</android.support.constraint.ConstraintLayout>
</ScrollView>

Related

how can I move views on the right direction in constrainlayout

I am developing a news app and I want to move views on the right
direction in constrain layout. but I could achieve what I want below
my XML file where I have implemented constraint layout any suggestion
and tips greatly appreciated.
I am developing a news app and I want to move views on the right
direction in constrain layout. but I could achieve what I want below
my XML file where I have implemented constraint layout any suggestion
and tips greatly appreciated.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/articleImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="article_author"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/articleImage"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="article_title"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleAuthor" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Article Time"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/articleFavorite"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#color/colorWhite"
android:src="#drawable/ic_bookmark"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/articleShare"
app:layout_constraintStart_toEndOf="#+id/articleTime"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<ImageButton
android:id="#+id/articleShare"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorWhite"
android:contentDescription="TODO"
android:src="#drawable/ic_share"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toEndOf="#+id/articleFavorite"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>
below current screenshot of the app
below screenshot which I want to achieve

Wrap the views with another Viewgroup (say ConstraintLayout again) and set app:layout_constraintStart_toStartOf="parent" and app:layout_constraintEnd_toEndOf="parent" as constraints to this viewgroup. Said view will then be centered horizontally.
Edit: The code
<android.support.constraint.ConstraintLayout android:layout_height="wrap_content" android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:id="#+id/articleImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="article_author"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/articleImage"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="article_title"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleAuthor" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Article Time"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/articleFavorite"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#color/"
android:src="#drawable/"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/articleShare"
app:layout_constraintStart_toEndOf="#+id/articleTime"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<ImageButton
android:id="#+id/articleShare"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/"
android:contentDescription="TODO"
android:src="#drawable/"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toEndOf="#+id/articleFavorite"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>
I messed up the ImageButtons a little, please fix the drawables and the color.
Edit 2: for some reason, another closing tag won't show in the code section here. make sure to add another ConstraintLayout closing tag right at the end.
<android.support.constraint.ConstraintLayout android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55"
android:id="#+id/guideline"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintDimensionRatio="16:9"
android:layout_margin="16dp"
android:id="#+id/imageView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/mainTextView"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:text="Placeholder"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/mainTextView"
app:layout_constraintStart_toStartOf="#id/mainTextView"
android:layout_marginTop="5dp"
android:text="Secondary"
android:id="#+id/secondaryTextView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/secondaryTextView"
app:layout_constraintStart_toStartOf="#id/mainTextView"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:text="Tertiary"
android:id="#+id/tertiaryTextView"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/tertiaryTextView"
app:layout_constraintBottom_toBottomOf="#id/tertiaryTextView"
app:layout_constraintStart_toEndOf="#id/tertiaryTextView"
android:layout_marginStart="15dp"
android:id="#+id/firstButton"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/firstButton"
app:layout_constraintBottom_toBottomOf="#id/firstButton"
app:layout_constraintStart_toEndOf="#id/firstButton"
android:layout_marginStart="15dp"
android:id="#+id/secondButton"/>
Edit 3: Here's a clean take to it.This one should do what you want. Though you have to tweak the margins the way you want them! Again the closing tag ... I don't know why it won't appear here!

If you want to move your views that are on the left side of the screen to the right part of the screen simply change your constraints like this:
Replace your constraints, your views will get constraint to your guideline from the left and to the right side on the screen as the right constraint.
Do it like this:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/articleImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="article_author"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/articleImage"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="article_title"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toBottomOf="#+id/articleAuthor" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Article Time"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/articleFavorite"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorWhite"
android:src="#drawable/ic_bookmark"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/articleShare"
app:layout_constraintStart_toEndOf="#+id/articleTime"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<ImageButton
android:id="#+id/articleShare"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#color/colorWhite"
android:contentDescription="TODO"
android:src="#drawable/ic_share"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/articleFavorite"
app:layout_constraintTop_toTopOf="#+id/articleTime"
app:layout_constraintVertical_bias="0.0" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>
And it will look like this:

Android Studio Nesting ScrollView in a Constraint Layout

I am new to android studio and have been messing around with this layout for the last hour or two. I want the whole screen to be able to scroll.
<?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=".MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorPrimaryDark"
android:padding="40dp"
app:layout_constraintBottom_toTopOf="#+id/emailEditText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/welcomeTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="#string/welcome_text"
android:textColor="#fff"
android:textSize="23dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/introTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="#string/intro_text"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/welcomeTextView" />
<Button
android:id="#+id/learnMoreButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/pink_button"
android:text="#string/learn_more_button"
android:textColor="#fff"
app:layout_constraintEnd_toStartOf="#+id/signUpButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/introTextView" />
<Button
android:id="#+id/signUpButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/navy_button"
android:text="#string/sign_up_button"
android:textColor="#fff"
app:layout_constraintBaseline_toBaselineOf="#+id/learnMoreButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/learnMoreButton" />
<ImageView
android:id="#+id/imageView"
android:layout_width="89dp"
android:layout_height="74dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logo" />
</android.support.constraint.ConstraintLayout>
<EditText
android:id="#+id/emailEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:drawableLeft="#drawable/ic_person_outline_black_24dp"
android:drawablePadding="10dp"
android:ems="10"
android:hint="#string/enter_email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout" />
<EditText
android:id="#+id/passwordEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:drawableLeft="#drawable/ic_lock_outline_black_24dp"
android:drawablePadding="10dp"
android:ems="10"
android:hint="#string/enter_password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailEditText" />
<Button
android:id="#+id/signInButton"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/pink_button"
android:text="#string/sign_in_button"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordEditText" />
<TextView
android:id="#+id/orTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="#string/or"
android:textColor="#color/colorPrimary"
app:layout_constraintBottom_toTopOf="#+id/fbSignInButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/signInButton" />
<Button
android:id="#+id/fbSignInButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="14dp"
android:background="#drawable/pink_button"
android:text="#string/fb_button"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/orTextView" />
</android.support.constraint.ConstraintLayout>
I have tried putting the scrollview nested inside the main constraint layout and I have also changed the layout to a Scrollview layout and nested a Constraint layout which I also could not get to work. Can someone explain where I am going wrong?

As scrollview is only capable of handling a single view, I would suggest you to wrap everything within a Linear Layout
Use the following code:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
//PUT ALL OF YOUR ELEMENTS IN HERE
//STARTING WITH...
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorPrimaryDark"
android:padding="40dp"
app:layout_constraintBottom_toTopOf="#+id/emailEditText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
..............REMAINING ELEMENTS.............
//AND ENDING WITH
<Button
android:id="#+id/fbSignInButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="14dp"
android:background="#drawable/pink_button"
android:text="#string/fb_button"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/orTextView" />
</LinearLayout>
</ScrollView>

How to put 'spinner' on top of button

Is there a way I can make my spinner be put on top of my button? (There will be various things on top of my button and when you press the button everything thats on it including the button will disappear)(the button spans the width of the screen) Now it's my spinner under my button. I tried looking at different RelativeLayout settings but it didn't work. Here's the xml code below
<?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"
android:background="#color/colorBackground"
android:minHeight="170dp"
tools:context=".create"
tools:layout_editor_absoluteY="81dp">
<View
android:id="#+id/view"
android:layout_width="320dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:background="#color/colorText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="296dp"
android:layout_height="49dp"
android:layout_marginEnd="56dp"
android:layout_marginRight="56dp"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="95dp" />
<Button
android:id="#+id/button"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_marginBottom="312dp"
android:background="#drawable/button_shadow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="320dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:background="#color/colorText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/done_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="128dp"
android:layout_marginRight="128dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/aisle_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginEnd="44dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="44dp"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:fontFamily="#font/droid_sans"
android:text="#string/qty_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.973"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="0.7" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/item_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
</android.support.constraint.ConstraintLayout>
Edit: I put my button and spinner into a frame layout, and when I tested it on my phone it works. However I tested it on a phone of a bigger size (and a newer android version) and the spinner doesn't show up (probably hidden again?) No idea why it would work on one phone but not the other,
<FrameLayout
android:layout_width="327dp"
android:layout_height="63dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.195"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view">
<Button
android:id="#+id/buttontest"
android:layout_width="313dp"
android:layout_height="63dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:background="#drawable/button_shadow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.863"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="102dp" />
<Spinner
android:id="#+id/spinner"
android:layout_width="249dp"
android:layout_height="58dp"
android:layout_marginBottom="344dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.237"
app:layout_constraintStart_toStartOf="parent" />
</FrameLayout>

Try calling
findViewById(R.id.spinner).bringToFront();

You can use this
<?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"
android:background="#color/browser_actions_bg_grey"
android:minHeight="170dp"
tools:layout_editor_absoluteY="81dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="25dp"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Done"
android:textSize="20sp"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" aisle_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" qty_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.973"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="0.7" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" item_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
</LinearLayout>
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#a4a4a4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="49dp"
android:layout_gravity="center"
android:layout_margin="10dp"
/>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#a4a4a4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

I think I managed to sort something out - I created a 'FrameLayout' and put both my spinner & button in there.
Should do the job, unless I find an issue, in which I'll come back here,this should be solved. :) Thank you

In case anyone was wondering:
I put my 'button' into a FrameLayout then put the elements I want 'ontop' of it, under it (as in the code under it) like so:
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="357dp"
android:layout_height="58dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.195"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.016">
<Button
android:id="#+id/buttontest"
android:layout_width="393dp"
android:layout_height="63dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:background="#drawable/button_shadow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.863"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="102dp" />
</FrameLayout>
<EditText
android:id="#+id/editText"
android:layout_width="44dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="184dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="184dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="qty"
android:inputType="number"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/spinner"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
app:layout_constraintVertical_bias="1.0" />
<Spinner
android:id="#+id/spinner"
android:layout_width="85dp"
android:layout_height="45dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.06"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/editText" />

How to remove unnecessary spacing and padding inside the Constraint Layout?

I am having issues in my application where there is unnecessary spacing and padding in my layout. For some reason there as a big gap of space in between each views. Is there another solution to remove or to avoid unnecessary spacing and padding around my layout?
Thanks for your help!
Layout code
<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="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true" >
<android.support.constraint.ConstraintLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorTeal"
android:ellipsize="none"
android:gravity="start"
android:padding="#dimen/title_padding"
android:textColor="#color/colorWhite"
android:textSize="35sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.571"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/vote_average"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/overview_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toBottomOf="#+id/release_date"
app:layout_constraintVertical_bias="0.19999999" />
<TextView
android:id="#+id/release_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="64dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.09"
app:layout_constraintStart_toEndOf="#+id/image_thumbnail"
app:layout_constraintTop_toBottomOf="#+id/title_text" />
<ImageView
android:id="#+id/image_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.02"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title_text" />
<TextView
android:id="#+id/overview_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="12dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.415"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_thumbnail"
app:layout_constraintVertical_bias="0.366" />
<ImageView
android:id="#+id/playbutton"
android:layout_width="39dp"
android:layout_height="44dp"
android:layout_marginBottom="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/trailer_title"
app:layout_constraintHorizontal_bias="0.326"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#android:drawable/ic_media_play" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/overview_text"
app:layout_constraintVertical_bias="0.305" />
<TextView
android:id="#+id/trailer_title"
android:layout_width="93dp"
android:layout_height="21dp"
android:layout_marginBottom="64dp"
android:layout_marginEnd="144dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toEndOf="#+id/imageView2" />
<TextView
android:id="#+id/TrailersName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Trailers"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.055"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
1st layout screenshot
2nd layout screenshot

The space and padding you are seeing are not because of ScrollView, it's because of Viewgroup, try to use LinearLayout with vertical orienation, it should work just fine

Try this,
I had re-write your code and achieve the result as you want.
Please check the following code.
<?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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="false">
<RelativeLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#009587"
android:ellipsize="none"
android:gravity="start"
android:padding="20dp"
android:text="Jumaji: Welcome to the Jungle"
android:textColor="#ffffff"
android:textSize="35sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/title_text"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp">
<ImageView
android:id="#+id/ivMoviePoster"
android:layout_width="120dp"
android:layout_height="180dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/release_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="64dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_toEndOf="#id/ivMoviePoster"
android:text="2017-12-08"
android:textSize="24sp" />
<TextView
android:id="#+id/vote_average"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/release_date"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#id/ivMoviePoster"
android:text="6.4"
android:textSize="18sp" />
<TextView
android:id="#+id/overview_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivMoviePoster"
android:layout_marginBottom="8dp"
android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
android:textSize="18sp" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/overview_text"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp" />
<TextView
android:id="#+id/trailer_title"
android:layout_width="93dp"
android:layout_height="21dp"
android:layout_below="#id/view"
android:layout_marginBottom="64dp"
android:layout_marginEnd="144dp"
android:layout_marginStart="8dp"
android:text="Trailer title" />
<ImageView
android:id="#+id/playbutton"
android:layout_width="39dp"
android:layout_height="44dp"
android:layout_below="#id/trailer_title"
android:layout_marginBottom="48dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:contentDescription="#null"
app:srcCompat="#android:drawable/ic_media_play" />
<TextView
android:id="#+id/TrailersName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/trailer_title"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#id/playbutton"
android:text="Trailers"
android:textSize="24sp" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
Result,
Hope it would be help you.

How to apply divider or view in Constraint layout

I want to apply a divider at some places in Constraint layout but when I do it by simple view, the whole layout get shifted to the top and everything gets merged. I want to use only constraints layout for the whole design.
<TextView
android:id="#+id/textView16"
android:layout_width="0dp"
android:layout_height="18dp"
android:text="TextView"
app:layout_constraintLeft_toRightOf="#+id/imageView11"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="1.0"
android:layout_marginTop="13dp"
app:layout_constraintTop_toBottomOf="#+id/textView14"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.0"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<TextView
android:id="#+id/textView20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView16"
app:layout_constraintLeft_toRightOf="#+id/imageView11"
android:layout_marginLeft="8dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.0"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<View
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#android:color/background_dark"
tools:layout_editor_absoluteY="98dp"
android:id="#+id/view"
tools:layout_editor_absoluteX="0dp" />
<TextView
android:id="#+id/textView21"
android:layout_width="wrap_content"
android:layout_height="17dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:text="Nivedita Parmar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.035"
android:layout_marginEnd="8dp" />
Please give some idea regarding this.
Thanks in advance..

See my answer below. I am putting view between text view. May help you.
<?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="com.example.shweta.firebasedemo.Main2Activity">
<TextView
android:id="#+id/txt_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:layout_constraintBottom_toTopOf="#+id/txt_2"
/>
<TextView
android:id="#+id/txt_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView2"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/txt_1"
app:layout_constraintLeft_toLeftOf="#+id/txt_1"
app:layout_constraintTop_toBottomOf="#+id/txt_1"
app:layout_constraintBottom_toTopOf="#+id/txt_3"
/>
<TextView
android:id="#+id/txt_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView3"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/txt_2"
app:layout_constraintLeft_toLeftOf="#+id/txt_2"
app:layout_constraintTop_toBottomOf="#+id/txt_2"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="16dp" />
<View
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#android:color/background_dark"
android:id="#+id/view"
android:layout_marginTop="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
/>
<TextView
android:id="#+id/textView21"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Nivedita Parmar"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.502" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:id="#+id/imageView"
android:layout_marginRight="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/view"
android:layout_marginTop="20dp" />
<TextView
android:id="#+id/txt_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="home"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/textView21"
app:layout_constraintTop_toBottomOf="#+id/textView21"
app:layout_constraintLeft_toLeftOf="#+id/textView21"
app:layout_constraintBottom_toTopOf="#+id/txt_height"/>
<TextView
android:id="#+id/txt_height"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="home"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/txt_home"
app:layout_constraintTop_toBottomOf="#+id/txt_home"
app:layout_constraintLeft_toLeftOf="#+id/txt_home"
app:layout_constraintBottom_toBottomOf="#+id/imageView"/>
</android.support.constraint.ConstraintLayout>

Check out Guideline. I've found it to be useful when working with Constraint Views.
<androidx.constraintlayout.widget.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">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Categories

Resources