Develop Reference

Make ConstraintLayout responsive in Android

I am working on a UI, in which I have to take email and number from user, buttons should must be at bottom, after button, there is a footer too on bottom. I have to make it responsive. I am using scroll view for this purpose. I am stuck on a point.
I am using wrap_content as height for a view, and giving its top to bottom of upper view, and its bottom to top of lower view's top. On small screens, it is working fine, but due to these constraints, on large screens, it is in the centre of screen.
Please have a look on it:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
android:background="#color/white"
android:orientation="vertical">
<ScrollView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/footer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="6dp"
android:scrollbars="none"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/icon_img"
android:layout_width="wrap_content"
android:layout_height="230dp"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="18dp"
android:src="#drawable/ic_sample"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/loginTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/icon_img"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:fontFamily="#font/exo_light"
android:gravity="start"
android:text="Login"
android:textColor="#color/charcol_blue"
android:textSize="22sp"
app:layout_constraintTop_toBottomOf="#id/icon_img" />
<TextView
android:id="#+id/login_Desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/loginTxt"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/exo_regular"
android:gravity="start"
android:text="Enter your credentials"
android:textColor="#color/charcol_blue"
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="#id/loginTxt" />
<EditText
android:id="#+id/loginEditTextEmail"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/login_Desc"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#drawable/rounded_input_shape"
android:fontFamily="#font/exo_regular"
android:hint="Email"
android:inputType="textEmailAddress"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:textSize="17sp"
app:layout_constraintTop_toBottomOf="#id/login_Desc" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/btnLayout"
app:layout_constraintTop_toBottomOf="#id/loginEditTextEmail">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginHorizontal="20dp"
android:background="#drawable/rounded_input_shape"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="50dp">
<com.hbb20.CountryCodePicker
android:id="#+id/ccp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#F5F5F5"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:ccp_autoDetectCountry="true"
app:ccp_defaultPhoneCode="41" />
<EditText
android:id="#+id/editText_carrierNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint=" Ph Number"
app:layout_constraintLeft_toRightOf="#+id/ccp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/ccp"
app:layout_constraintBottom_toBottomOf="#+id/ccp"
android:fontFamily="#font/exo_regular"
android:inputType="phone"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:textSize="15sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/btnLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="#+id/loginBtnSubmit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/blue_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="#string/login"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/imageView1"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toLeftOf="#id/loginBtnSubmit"
app:layout_constraintRight_toLeftOf="#id/orText"
app:layout_constraintTop_toTopOf="#+id/orText" />
<TextView
android:id="#+id/orText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:fontFamily="#font/exo_regular"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="OR"
android:textColor="#color/black"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/loginBtnSubmit" />
<View
android:id="#+id/imageView2"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toRightOf="#id/orText"
app:layout_constraintRight_toRightOf="#id/loginBtnSubmit"
app:layout_constraintTop_toTopOf="#+id/orText" />
<Button
android:id="#+id/guestContinue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/white_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="Sign Up"
android:textAllCaps="false"
android:textColor="#color/instruction_black_color"
android:textSize="16sp"
app:layout_constraintTop_toBottomOf="#+id/orText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:fontFamily="#font/exo_regular"
android:text="App "
app:layout_constraintTop_toTopOf="#+id/txt2"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintRight_toLeftOf="#+id/txt2"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:fontFamily="#font/exo_regular"
android:gravity="center_vertical"
android:text="Footer"
app:layout_constraintTop_toTopOf="#+id/footerImg"
app:layout_constraintBottom_toBottomOf="#+id/footerImg"
app:layout_constraintRight_toLeftOf="#+id/footerImg"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<ImageView
android:id="#+id/footerImg"
android:layout_width="30dp"
android:layout_height="22dp"
android:layout_marginLeft="2dp"
android:scaleType="fitCenter"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/logout" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am facing issue agains a constraint layout whose id is: "phone_layout"
If I will use its height as 0dp, it will works fine on large screens, but on small screens (when scroll view will be used to scroll screen), this layout will not be shown because of 0dp height.
I want this phone_layout to be below of email layout on every screen(small/large).

I resolved it by using
app:layout_constraintVertical_bias="0"

Using Margin or Padding with LinearLayout

I'm having trouble lining up a LinearLayout in a XML file. I'm trying to use a LinearLayout because I have TextViews that have to be hidden/shown upon certain options being selected, which I have that down. My problem is that I'm trying to use margin to line everything up centered, but if I run it on my Pixel 5 emulator, it's shift to the right when I have everything centered in my XML. Should I be using padding instead in my LinearLayout, or what should I be doing? Thank you!
App Screen
XML Design
dialog_job_request_confirmation.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
android:background="#BF090909">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="560dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
app:cardBackgroundColor="#color/background_view"
app:cardCornerRadius="8dp"
app:cardElevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/main_purple"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="125dp"
android:layout_height="56dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/skedaddle_service_logo"
android:scaleType="fitXY"
android:src="#drawable/skedaddle_services_"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="70dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/app_bar_layout">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="12dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/confirmJobRequestLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="495dp"
android:text="#string/confirm_job_request_details"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fullnameLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="110dp"
android:layout_marginTop="12dp"
android:text="#string/full_name_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fullnameDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="95dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/addressLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="115dp"
android:layout_marginTop="12dp"
android:text="#string/address_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/addressDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="95dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/dateAndTimeLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="120dp"
android:layout_marginTop="12dp"
android:text="#string/dates_and_times_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/firstDateAndTimeDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/secondDateAndTimeDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/thirdDateAndTimeDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/timeConstraintsLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="110dp"
android:layout_marginTop="12dp"
android:text="#string/time_constraints_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/timeConstraintsDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/jobDescriptionLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="115dp"
android:layout_marginTop="12dp"
android:text="#string/job_description_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/jobDescriptionDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/cancelConfirmJobButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="120dp"
android:layout_height="48dp"
android:layout_marginStart="48dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="12dp"
android:background="#color/black"
android:text="#android:string/cancel"
android:textAllCaps="false"
android:textColor="#color/white" />
<Button
android:id="#+id/confirmJobRequestButton"
android:layout_width="120dp"
android:layout_height="48dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="45dp"
android:background="#color/main_purple"
android:text="#string/confirm_job"
android:textAllCaps="false"
android:textColor="#color/white"
style="?android:attr/buttonBarButtonStyle" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

You shouldn't center anything using just padding or margin. In your case it's enough to use the layout_gravity in each TextView:
android:layout_gravity="center_horizontal"
More details here.

ScrollView Overlaps content in fragment

In this fragment as soon as try to scroll the contents start overlapping on each other.
This fragment opens immediately after a Splash Screen Activity. when I try to input something in first edit text and then scroll at that time all the things overlap on each other. The overlapping takes place only when I try to scroll. Please Help
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/scrollView_login"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".LoginFragment"
android:layout_height="match_parent"
android:layout_width="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/MarginTop"
android:text="#string/app_name"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:src="#drawable/ic_launch"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/tagline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/tagline"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="#string/Candidate_login"
android:textColor="#000000"
android:textSize="18dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tagline" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="24dp"
android:text="#string/email"
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login" />
<EditText
android:id="#+id/emailmobile"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#color/White"
android:hint="Enter Email"
android:inputType="textEmailAddress"
android:padding="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/email" />
<TextView
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="24dp"
android:text="#string/pass"
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailmobile" />
<EditText
android:id="#+id/passedit"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#color/White"
android:hint="#string/pass"
android:inputType="textPassword"
android:padding="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password" />
<Button
android:id="#+id/log_in"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#color/colorPrimaryDark"
android:padding="5dp"
android:text="#string/login"
android:textColor="#color/White"
android:textSize="18dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passedit" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:text="#string/forget_pass"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/log_in" />
<LinearLayout
android:id="#+id/sign"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6">
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NoAccount" />
<TextView
android:id="#+id/textViewSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:text="#string/signup"
android:textColor="#color/colorPrimaryDark" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Android - How can I create a ScrollView with many Layouts inside it?

I am trying to create this following screen layout for my movie app:
I created this layout to accomplish it:
<?xml version="1.0" encoding="utf-8"?>
<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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#+id/ButtonPanel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="25dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:id="#+id/id_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<TextView
android:id="#+id/identification_label"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fontFamily="#font/roboto"
android:gravity="bottom"
android:text="Movie Identification"
android:textColor="#color/BaseColor_1"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/edit_identification"
style="#style/IconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="TODO"
android:src="#drawable/ic_edit_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.55"
app:layout_constraintStart_toStartOf="#id/identification_label"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="226dp" />
<ImageButton
android:id="#+id/help_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_help"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/IconButton" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/sample_name_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Movie Name"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/sample_description_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Movie Description"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sample_name_label" />
<ImageButton
android:id="#+id/sample_show_content_description"
style="#style/IconButton"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginStart="10dp"
android:src="#drawable/btn_reveal_sample_description"
app:layout_constraintBottom_toBottomOf="#+id/sample_description_label"
app:layout_constraintStart_toEndOf="#+id/sample_description_label" />
<TextView
android:id="#+id/sample_description_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/roboto_light"
android:maxLines="0"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sample_description_label" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/identification_data_divider"
style="#style/Divider" />
</LinearLayout>
<LinearLayout
android:id="#+id/location_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_layout">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="40dp">
<TextView
android:id="#+id/location_label"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fontFamily="#font/roboto"
android:gravity="bottom"
android:text="Other Information"
android:textColor="#color/BaseColor_1"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/diretor_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Director Name"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp" />
<TextView
android:id="#+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Main actor"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp" />
<TextView
android:id="#+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Movie Genre"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp" />
<TextView
android:id="#+id/f"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_light"
android:text="Critics rating"
android:textAlignment="viewStart"
android:textColor="#color/BaseColor_1"
android:textSize="14sp" />
<View style="#style/Divider" />
</LinearLayout>
<LinearLayout
android:id="#+id/picture_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/location_layout"
app:layout_constraintVertical_bias="1.0">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="40dp">
<TextView
android:id="#+id/picture_label"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fontFamily="#font/roboto"
android:gravity="bottom"
android:text="#string/sample_images_label"
android:textColor="#color/BaseColor_1"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="5dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/first_picture"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_weight="1"
app:srcCompat="#drawable/outcrop_placeholder" />
<ImageView
android:id="#+id/second_picture"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_weight="1"
app:srcCompat="#drawable/outcrop_placeholder" />
<ImageView
android:id="#+id/third_picture"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_weight="1"
app:srcCompat="#drawable/outcrop_placeholder" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/ButtonPanel"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/BaseColor_4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.0">
<ImageButton
android:id="#+id/delete_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:src="#drawable/btn_delete"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/confirm_button"
app:layout_constraintHorizontal_bias="0.004"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
style="#style/IconButton" />
<Button
android:id="#+id/confirm_button"
android:layout_marginEnd="25dp"
android:text="#string/confirm_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/RoundedCornersMaterialButton" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see I have to set manually the images' layout_height, but I would like to get the best proportion for the pictures (adjust the images 15dp on top of the bottom toolbar). I have tried to use app:layout_constraintBottom_toBottomOf in the LinearLayout that contains these pictures, but when I click on the collpasible and the description is shown I need to scroll through the screen to see the pictures, but using app:layout_constraintBottom_toBottomOf the images simply disappear.
I know that app:layout_constraintBottom_toBottomOf should not be used in this case, but is there any other way to change the layout_height of my pictures to wrap_content and get the best size for them when I have to scroll down?
Basically, I want another option (besides app:layout_constraintBottom_toBottomOf) that will adjust the images 15dp on top of the bottom toolbar when I am scrolling down.
I would really appreciate if someone could help me with this.
Thanks!

Solver for ConstraintLayout doesn't measure include correctly

I'm currently practicing UI designing in Android and needed to make a layout be included in multiple layouts as a header. So I made this quite complex layout 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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f5f5f5">
<include
android:id="#+id/includeItem"
layout="#layout/dialog_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginTop="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/includeItem">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<EditText
android:id="#+id/editText4"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toTopOf="#+id/imageView5" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/btn_bg" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#drawable/border_transparent_bg"
android:drawableRight="#drawable/ic_chevron_right_black_24dp"
android:gravity="start|center_vertical"
android:padding="8dp"
android:text="#string/select_category"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/editText4"
app:layout_constraintStart_toStartOf="#+id/editText4"
app:layout_constraintTop_toBottomOf="#+id/editText4" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/tap_to_edit"
android:textColor="#color/textDarkSecondary"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/imageView5"
app:layout_constraintStart_toStartOf="#+id/imageView5"
app:layout_constraintTop_toBottomOf="#+id/imageView5" />
<TableRow
android:id="#+id/tableRow4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/border_transparent_bg"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/tableRow3"
app:layout_constraintStart_toStartOf="#+id/tableRow3"
app:layout_constraintTop_toBottomOf="#+id/tableRow3">
<EditText
android:id="#+id/editText7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/price"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/sku"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
</TableRow>
<TextView
android:id="#+id/textView11"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="#string/variations"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<TableRow
android:id="#+id/tableRow3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#drawable/border_transparent_bg"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView11"
app:layout_constraintTop_toBottomOf="#+id/textView11">
<EditText
android:id="#+id/editText8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
</TableRow>
<Button
android:id="#+id/button6"
style="#style/CommonButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/add_variation"
app:layout_constraintEnd_toEndOf="#+id/tableRow4"
app:layout_constraintStart_toStartOf="#+id/tableRow4"
app:layout_constraintTop_toBottomOf="#+id/tableRow4" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/add_variation_msg"
android:textColor="#color/textDarkSecondary"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<TextView
android:id="#+id/textView13"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="#string/modifier_sets"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView12" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView13">
</android.support.v7.widget.RecyclerView>
<TextView
android:id="#+id/textView14"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="#string/taxes"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/recyclerView" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView2"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<TextView
android:id="#+id/textView17"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/select_kitchen_location"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/recyclerView2" />
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="8dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/available"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/spinner" />
<EditText
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/checkBox" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
This is the include 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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgDlgHeaderAction"
android:layout_width="90dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/lblDlgHeaderTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_add_24dp" />
<Button
android:id="#+id/btnDlgHeaderSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/border_bg_pressed"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingEnd="32dp"
android:paddingBottom="16dp"
android:text="#string/save"
android:textColor="#color/white"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lblDlgHeaderTitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="TextView"
android:textColor="#color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/btnDlgHeaderSave"
app:layout_constraintStart_toEndOf="#id/imgDlgHeaderAction"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave" />
</android.support.constraint.ConstraintLayout>
In the layout editor, it looks fine. But when I compile my code, the ScrollView is clipping through the include without that much marginTop. I might file an issue if this is a bug.
From the suggestions below, I tried to change ScrollView to a NestedScrollView. As I have guessed, it still didn't work.
I also want to emphasized that my question is not about the RecyclerViews not being able to scroll, because I know that would happen, but about the clipping of the ScrollView through the include layout.

Change your include layout constraint like below
Remove bottom constarint and used NestedScrollView in main layout instead of ScrollView
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content">
<ImageView
android:id="#+id/imgDlgHeaderAction"
android:layout_width="90dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/lblDlgHeaderTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave"
app:srcCompat="#drawable/ic_email" />
<Button
android:id="#+id/btnDlgHeaderSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#color/bg_toolbar"
android:gravity="center"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingEnd="32dp"
android:paddingBottom="16dp"
android:text="#string/save"
android:textColor="#android:color/white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/lblDlgHeaderTitle"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lblDlgHeaderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/btnDlgHeaderSave"
app:layout_constraintStart_toEndOf="#+id/imgDlgHeaderAction"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave" />
</androidx.constraintlayout.widget.ConstraintLayout>
Main layout
<androidx.constraintlayout.widget.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"
android:background="#f5f5f5">
<include
android:id="#+id/includeItem"
layout="#layout/test_include"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/includeItem">
<!.. Remining one as it is>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>