windowSoftInputMode="adjustPan|adjustResize" did not work with coordinatelayout

windowSoftInputMode="adjustPan|adjustResize" did not work with coordinatelayout - android

I have a layout with multiple EditText and a button in the bottom of it. I want to my layout stay on above of keyboard when keyboard is showing. I search for this problem and I found should put android:windowSoftInputMode="adjustPan|adjustResize" attribute in activity tag of manifest. I do this But did not work for me. I put also android:fitsSystemWindows="true" in the root view. This is my xml Layout file of my fragment:
<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="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:id="#+id/scrollView2"
android:fitsSystemWindows="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.LoginByUserNameFragment"
android:layoutDirection="rtl"
android:fitsSystemWindows="true"
>
<ImageView
android:src="#drawable/ic_back_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imgBack_lbu"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintHorizontal_bias="0.02"
android:layout_marginTop="8dp"/>
<ImageView
android:src="#drawable/img_typewriter"
android:layout_width="289dp"
android:layout_height="152dp"
android:id="#+id/imageView3" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/imgBack_lbu" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"/>
<com.google.android.material.button.MaterialButton
android:text="#string/login_with_sms"
android:layout_width="150dp"
android:layout_height="60dp"
android:id="#+id/btnLoginByOpt"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp"
android:textColor="#color/darkGreen"
app:icon="#drawable/ic_sms"
app:iconTint="#083316"
app:iconGravity="textStart"
android:gravity="center"
android:textAlignment="center"
app:cornerRadius="5dp"
app:backgroundTint="#color/mainGrey"
app:layout_constraintHorizontal_bias="0.497"/>
<ImageView android:layout_width="0dp"
android:layout_height="2dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:background="#color/anotherGrey" android:id="#+id/view"
app:layout_constraintHorizontal_bias="0.5" app:layout_constraintEnd_toStartOf="#+id/textView"
app:layout_constraintTop_toTopOf="#+id/textView"
app:layout_constraintBottom_toBottomOf="#+id/textView" android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"/>
<TextView
android:text="#string/or"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/btnLoginByOpt"
android:textColor="#color/anotherGrey"
android:textSize="14sp"
app:layout_constraintStart_toEndOf="#+id/view" app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintEnd_toStartOf="#+id/view2"/>
<ImageView android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/anotherGrey"
app:layout_constraintTop_toTopOf="#+id/textView"
android:id="#+id/view2"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toBottomOf="#+id/textView" android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"/>
<TextView
android:text="#string/login_with_phone_and_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView"
android:layout_marginTop="16dp"
app:layout_constraintHorizontal_bias="0.497"
android:textColor="#color/anotherGrey"/>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/edtPhon_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_phone"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:layout_constraintTop_toBottomOf="#+id/textView2"
android:layout_marginTop="28dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtPhon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLines="1"
android:background="#drawable/drw_bg_edt"
android:padding="#dimen/padding_button"
app:drawableLeftCompat="#drawable/phone_drawable_selector"
android:drawablePadding="3dp"
android:imeOptions="actionNext"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/edtPassword_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:layout_constraintTop_toBottomOf="#+id/edtPhon_input"
android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginTop="20dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLines="1"
android:background="#drawable/drw_bg_edt"
android:padding="#dimen/padding_button"
app:drawableLeftCompat="#drawable/pass_drw"
android:drawablePadding="3dp"
android:imeOptions="actionDone">
</com.google.android.material.textfield.TextInputEditText>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/edtPassword_input"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="20dp"
app:layout_constraintHorizontal_bias="0.0"
android:textColor="#color/White"
android:text="#string/general_login"
android:gravity="center"
app:cornerRadius="5dp"
app:backgroundTint="#color/back_color_sign_btn"
android:enabled="false"
android:padding="#dimen/padding_button"
android:id="#+id/btn_login"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.07"/>
<TextView
android:text="#string/do_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtSignUp"
android:textColor="#color/mainGreen"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/txtMember"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintTop_toBottomOf="#+id/btn_login"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.25"/>
<TextView
android:text="#string/not_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtMember"
android:background="?attr/selectableItemBackground"
android:paddingEnd="5dp"
android:paddingRight="5dp"
android:textColor="#color/generalGrey"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintEnd_toStartOf="#+id/txtSignUp"
app:layout_constraintTop_toBottomOf="#+id/btn_login"
app:layout_constraintHorizontal_chainStyle="packed"
android:layout_marginTop="16dp" android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.25"/>
</androidx.constraintlayout.widget.ConstraintLayout>
And this is the layout of main Activity:
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.MainActivity"
android:fitsSystemWindows="true"
android:id="#+id/rootLayout">
<fragment
android:id="#+id/nav_host_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/mobile_navigation"
app:defaultNavHost="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is the screenshot of the layout:
And When keyboard is showing:

Finally I resolved my problem.I wrap my layout in a RelativeLayout and fix my button to a bottom of root.Also I use of adjustresize in the manifest.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
xmlns:tools="http://schemas.android.com/tools">
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_above="#+id/lay_bottom">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl"
tools:context=".ui.LoginByUserNameFragment">
<ImageView
android:id="#+id/imgBack_lbu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_back_arrow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.02"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="289dp"
android:layout_height="152dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:src="#drawable/img_typewriter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imgBack_lbu" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btnLoginByOpt"
android:layout_width="150dp"
android:layout_height="60dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:gravity="center"
android:padding="5dp"
android:text="#string/login_with_sms"
android:textColor="#color/darkGreen"
app:backgroundTint="#color/mainGrey"
app:cornerRadius="5dp"
app:icon="#drawable/ic_sms"
app:iconTint="#083316"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3" />
<ImageView
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="2dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#color/anotherGrey"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintEnd_toStartOf="#+id/textView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/or"
android:textColor="#color/anotherGrey"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/view2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view"
app:layout_constraintTop_toBottomOf="#+id/btnLoginByOpt" />
<ImageView
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="2dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#color/anotherGrey"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="#+id/textView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/login_with_phone_and_password"
android:textColor="#color/anotherGrey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/edtPhon_input"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:layout_marginEnd="8dp"
android:hint="#string/prompt_phone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtPhon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/drw_bg_edt"
android:drawablePadding="3dp"
android:fontFamily="#font/iran_sans_fanum"
android:imeOptions="actionNext"
android:inputType="phone"
android:layoutDirection="ltr"
android:maxLines="1"
android:padding="#dimen/padding_button"
app:drawableLeftCompat="#drawable/phone_drawable_selector" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/edtPassword_input"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/edtPhon_input">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/drw_bg_edt"
android:drawablePadding="3dp"
android:fontFamily="#font/iran_sans_fanum"
android:inputType="textPassword"
android:maxLines="1"
android:padding="#dimen/padding_button"
android:imeOptions="actionDone"
app:drawableLeftCompat="#drawable/pass_drw">
</com.google.android.material.textfield.TextInputEditText>
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:id="#+id/lay_bottom">
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:enabled="false"
android:gravity="center"
android:padding="#dimen/padding_button"
android:text="#string/general_login"
android:textColor="#color/White"
app:backgroundTint="#color/back_color_sign_btn"
app:cornerRadius="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.07" />
<TextView
android:id="#+id/txtSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="#string/do_register"
android:textColor="#color/mainGreen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/txtMember"
app:layout_constraintTop_toBottomOf="#+id/btn_login"
app:layout_constraintVertical_bias="0.25" />
<TextView
android:id="#+id/txtMember"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:background="?attr/selectableItemBackground"
android:paddingEnd="5dp"
android:paddingRight="5dp"
android:text="#string/not_member"
android:textColor="#color/generalGrey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txtSignUp"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn_login"
app:layout_constraintVertical_bias="0.25" />
</androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>
And in the manifest:
<activity
android:name=".ui.MainActivity"
android:windowSoftInputMode="adjustResize"
>

Related

How to Hide TextView when Scrolling Recycler View?

I am devoloping an app interface for a local data base. In the fragment I intend to show the client's information, I want to be able to see the client's history. How can I hide the clients information when scrolling the client's history? (How can I hide several Text Views when scrolling a recyclerview in order to that recyclerview occupies the all screen?)
None of the solutions I encontered online really solve my problem. I am new to android so I am sure this is something farely simple.
What I Have
What I Want when I scroll far enough
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/tab_layout">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/bt_add_history"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:scaleType="center"
android:src="#drawable/ic_add"
app:backgroundTint="#color/colorTextGrey"
app:borderWidth="0dp"
app:fabSize="mini"
app:hoveredFocusedTranslationZ="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:maxImageSize="24dp"
app:useCompatPadding="false" />
<TextView
android:id="#+id/tv_title_hist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/montserrat_semibold"
android:text="#string/historico"
android:textColor="#67739A"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_obser" />
<TextView
android:id="#+id/tv_obser"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/observations"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title_observ" />
<TextView
android:id="#+id/tv_title_observ"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/montserrat_semibold"
android:text="#string/observations"
android:textColor="#67739A"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_func" />
<TextView
android:id="#+id/tv_func"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/func"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_phone_number" />
<TextView
android:id="#+id/tv_phone_number"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/telemovel"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_birth_date" />
<TextView
android:id="#+id/tv_birth_date"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/dataNascimento"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_nome" />
<TextView
android:id="#+id/tv_nome"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/nome"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_history"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title_hist" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
EDIT:
With the help of Md. Asaduzzaman, I ended up with this code for de xml (notice the changes to the action button - I wanted it to float above everything):
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/mainview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/bt_add_history"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:scaleType="center"
android:src="#drawable/ic_add"
app:backgroundTint="#color/colorTextGrey"
app:fabSize="mini"
app:hoveredFocusedTranslationZ="0dp"
app:maxImageSize="24dp"
app:useCompatPadding="false"/>
<androidx.core.widget.NestedScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/tab_layout">
<TextView
android:id="#+id/tv_title_hist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/montserrat_semibold"
android:text="#string/historico"
android:textColor="#67739A"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_obser" />
<TextView
android:id="#+id/tv_obser"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/observations"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title_observ" />
<TextView
android:id="#+id/tv_title_observ"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/montserrat_semibold"
android:text="#string/observations"
android:textColor="#67739A"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_func" />
<TextView
android:id="#+id/tv_func"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/func"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_phone_number" />
<TextView
android:id="#+id/tv_phone_number"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/telemovel"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_birth_date" />
<TextView
android:id="#+id/tv_birth_date"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/dataNascimento"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_nome" />
<TextView
android:id="#+id/tv_nome"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/nome"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_history"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title_hist" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</RelativeLayout>
</layout>

You could use NestedScrollView to make the whole view scrollable, which hides the top view when you start scrolling.
<androidx.core.widget.NestedScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/tab_layout">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/bt_add_history"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:scaleType="center"
android:src="#drawable/ic_add"
app:backgroundTint="#color/colorTextGrey"
app:borderWidth="0dp"
app:fabSize="mini"
app:hoveredFocusedTranslationZ="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:maxImageSize="24dp"
app:useCompatPadding="false" />
<TextView
android:id="#+id/tv_title_hist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/montserrat_semibold"
android:text="#string/historico"
android:textColor="#67739A"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_obser" />
<TextView
android:id="#+id/tv_obser"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/observations"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title_observ" />
<TextView
android:id="#+id/tv_title_observ"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/montserrat_semibold"
android:text="#string/observations"
android:textColor="#67739A"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_func" />
<TextView
android:id="#+id/tv_func"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/func"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_phone_number" />
<TextView
android:id="#+id/tv_phone_number"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/telemovel"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_birth_date" />
<TextView
android:id="#+id/tv_birth_date"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/dataNascimento"
android:textAlignment="center"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_nome" />
<TextView
android:id="#+id/tv_nome"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="#string/nome"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_history"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title_hist" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

UI on design view is not being displayed the same in emulator

I have a design created with ConstraintLayout. On the design pane is it okay, but when I run it on emulator it's not same same. Below is the image of how it looks on design view
And the next one is how it looks on emulator.
A snippet of the manifest
<activity
android:theme="#style/Theme.MaterialComponents.Light.DarkActionBar"
android:name=".WelcomeActivity" />
I have these installed
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
compileSdkVersion 28
minSdkVersion 16
targetSdkVersion 28
I have extended AppCompatActivity for the WecomeActivity class. I have also tried to invalidate cache and restart but it's not working.
I have no idea what is causing this. Thanks for help.
Here is the the code for that.
activity_welcome.yml
<?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=".WelcomeActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="96dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="#string/safe"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/textView2"
android:layout_width="45dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="20dp"
android:text="#string/cheap"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="411dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:contentDescription="#string/todo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.515"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:srcCompat="#drawable/guliver_go_logo" />
<TextView
android:id="#+id/textView"
android:layout_width="70dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="#string/convinient"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/welcome_login_button"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="141dp"
android:layout_height="63dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="88dp"
android:layout_weight="1"
android:background="#drawable/button_login_rounded"
android:text="#string/start_phone_auth"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp"
app:backgroundTint="#color/login_button_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/welcome_call_button"
style="#style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
android:layout_width="141dp"
android:layout_height="63dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="9dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="88dp"
android:layout_weight="1"
android:background="#drawable/button_call_rounded"
android:drawablePadding="5dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
app:backgroundTint="#color/call_button_color"
app:icon="#drawable/ic_call"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.83"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

Here is the layout as you might missing some constraint of image or assigning wrong image constraint.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="0dp"
android:layout_height="400dp" tools:srcCompat="#tools:sample/avatars[1]"
android:id="#+id/imageView" app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text One"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView" android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text Two"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toBottomOf="#+id/textView" android:layout_marginTop="8dp"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView3" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<Button
android:text="Phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"/>
<Button
android:text="Call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
app:layout_constraintStart_toEndOf="#+id/button" android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>
</android.support.constraint.ConstraintLayout>
or With Toolbar Set theme as Theme.MaterialComponents.Light.NoActionBar not as this Theme.MaterialComponents.Light.DarkActionBar. Then apply
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:id="#+id/toolbar" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/>
<ImageView
android:layout_width="0dp"
android:layout_height="400dp" tools:srcCompat="#tools:sample/avatars[1]"
android:id="#+id/imageView" app:layout_constraintTop_toBottomOf="#id/toolbar"
android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text One"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView" android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text Two"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toBottomOf="#+id/textView" android:layout_marginTop="8dp"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView3" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<Button
android:text="Phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"/>
<Button
android:text="Call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
app:layout_constraintStart_toEndOf="#+id/button" android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>
</android.support.constraint.ConstraintLayout>
For small screen phone add ScrollView After ConstraintLayout (only if your development has phone screen < 5.0).

Problem in using NestedScrollView in Constraint layout

I am using Constraint layout inside the NestestScrollView as shown below.
<?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:id="#+id/clProfileFragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/bg_nature" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ivProfileFragment"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_profile"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="#font/raleway_medium"
android:letterSpacing="0.2"
android:textAlignment="center"
android:textColor="#color/darkBlue"
app:layout_constraintBottom_toBottomOf="#+id/ivProfileFragment"
app:layout_constraintStart_toEndOf="#+id/ivProfileFragment"
app:layout_constraintTop_toTopOf="#+id/ivProfileFragment"
tools:text="Mehul Kanzriya" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivCloseProfileFragment"
style="#style/VectorImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_close" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivProfileFragment"
app:layout_constraintBottom_toTopOf="#id/button">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/text_subscribe"
android:textColor="#color/darkBlue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_1"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_2"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_3"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView2"
android:layout_width="350dp"
android:layout_height="168dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="#+id/textView5"
app:layout_constraintStart_toStartOf="#+id/textView5"
app:layout_constraintTop_toBottomOf="#+id/textView5"
app:srcCompat="#mipmap/bg_pdf_resting" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvAnnualPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/cvMonthlyPlan"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appCompatImageView2"
app:strokeColor="#color/darkBlue"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardBackgroundColor="#color/subscriptionCardBackgroundColor"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/darkBlue"
android:fontFamily="#font/raleway_medium"
android:letterSpacing="0.1"
android:padding="8dp"
android:text="#string/text_subscription_most_popular"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="ANNUAL"
android:textColor="#color/lightYellow"
android:textSize="#dimen/subscriptionPlanTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView7" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="Rs 60.00"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanPrice"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/text_per_month"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanMonthly"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvMonthlyPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintBottom_toBottomOf="#+id/cvAnnualPlan"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cvAnnualPlan"
app:layout_constraintTop_toTopOf="#+id/cvAnnualPlan"
app:strokeColor="#color/darkBlue"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardBackgroundColor="#color/subscriptionCardBackgroundColor"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="MONTHLY"
android:textColor="#color/lightYellow"
android:textSize="#dimen/subscriptionPlanTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView66"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="Rs 70.00"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanPrice"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView44" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/text_per_month"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanMonthly"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView66" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<TextView
android:id="#+id/textView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_4"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cvAnnualPlan" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_5"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="#+id/textView9"
app:layout_constraintStart_toStartOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/button_logout"
android:textAlignment="center"
android:textColor="#color/logoutButtonColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button"
style="#style/UnelevatedButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/button_subscribe"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that the first two TextViews are getting cropped and an unnecessary padding is added at the bottom of the NestedScrollView.
A similar bug was filed a few months before but I think it's not solved yet.
Similar questions have been asked before, but I can't find the proper solution to it.

Try this Result https://www.youtube.com/watch?v=PTnbzCbgBTE
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/clProfileFragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/colorAccent" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ivProfileFragment"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_launcher_nilesh"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:letterSpacing="0.2"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#+id/ivProfileFragment"
app:layout_constraintStart_toEndOf="#+id/ivProfileFragment"
app:layout_constraintTop_toTopOf="#+id/ivProfileFragment"
android:text="Mehul Kanzriya" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivCloseProfileFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_drawer" />
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:clipToPadding="true"
android:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="text_subscribe"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_1"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_2"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="16dp"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_3"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView2"
android:layout_width="350dp"
android:layout_height="168dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="#+id/textView5"
app:layout_constraintStart_toStartOf="#+id/textView5"
app:layout_constraintTop_toBottomOf="#+id/textView5"
app:srcCompat="#mipmap/ic_launcher_round" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvAnnualPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/cvMonthlyPlan"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appCompatImageView2"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:letterSpacing="0.1"
android:padding="8dp"
android:text="text_subscription_most_popular"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="ANNUAL"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView7" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="Rs 60.00"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:letterSpacing="0.3"
android:text="text_per_month"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvMonthlyPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintBottom_toBottomOf="#+id/cvAnnualPlan"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cvAnnualPlan"
app:layout_constraintTop_toTopOf="#+id/cvAnnualPlan"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="MONTHLY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView66"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="Rs 70.00"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView44" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:letterSpacing="0.3"
android:text="text_per_month"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView66" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<TextView
android:id="#+id/textView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_4"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cvAnnualPlan" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_5"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/textView9"
app:layout_constraintStart_toStartOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:letterSpacing="0.3"
android:text="button_logout"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="button_subscribe"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Take a look at android:layout_gravity="center" on the ConstraintLayout nested within the NestedScrollView. Try to either remove this attribute or set it to android:layout_gravity="center_horizonal". I am not quite sure what it means to center a View vertically in a NestedScrollView.

In my situation, there is a app:layout_constraintBottom_toBottomOf="parent" in the child view of ConstraintLayout.
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_position"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.061"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chip_group_time"
app:layout_constraintVertical_bias="0.027" />
Delete the layout_constrainBottom_toBottomOf. My NestedScrollView work!!!!
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_position"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.061"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chip_group_time"
app:layout_constraintVertical_bias="0.027" />
Be careful to use app:layout_constraintBottom_toBottomOf="parent" in NestedScrollView > ConstraintLayout . Because it make the layout fixed

How do I prevent imageview overlapping?

I can't figure out how to stop this image from overlapping the other two TextViews. I need the two TextViews to maintain their position and for the ImageView to be constrained between them without being cropped.
All of these views go through different visibility states (visible/invisible/gone), so I tried adding barriers, but that didn't work. I've tried changing margins, padding, constraints etc.
The top TextView is tv_question.
The bottom TextView is tv_answer.
Between the two TextViews are two ImageViews that sit on top of each other in the layout. However, only one ImageView at a time is shown.
Layout.xml
<?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.FloatingActionButton
android:id="#+id/fab_exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_exit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/tv_question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="64dp"
android:textAlignment="textStart"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Barrier
android:id="#+id/barrier_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/tv_question"
app:barrierDirection="top"
app:barrierAllowsGoneWidgets="false"
app:constraint_referenced_ids="iv_question, iv_answer" />
<ImageView
android:id="#+id/iv_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/tv_answer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question" />
<ImageView
android:id="#+id/iv_answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/tv_answer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question" />
<android.support.constraint.Barrier
android:id="#+id/barrier_answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/tv_answer"
app:barrierDirection="bottom"
app:barrierAllowsGoneWidgets="false"
app:constraint_referenced_ids="iv_question, iv_answer"/>
<TextView
android:id="#+id/tv_answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="112dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:textAlignment="viewStart"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_complete"
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="#string/quiz_complete"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_showAnswer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="#string/quiz_showAnswer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_nextQuestion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="#string/quiz_nextQuestion"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_Restart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginStart="64dp"
android:text="#string/quiz_restart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_Exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="64dp"
android:text="#string/quiz_exit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

try to set the height of the two Imageviews to be match_constraint
android:layout_height="0dp"
the full code:
<?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.FloatingActionButton
android:id="#+id/fab_exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_exit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/tv_question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="64dp"
android:textAlignment="textStart"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Barrier
android:id="#+id/barrier_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/tv_question"
app:barrierDirection="top"
app:barrierAllowsGoneWidgets="false"
app:constraint_referenced_ids="iv_question, iv_answer" />
<ImageView
android:id="#+id/iv_question"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/tv_answer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question" />
<ImageView
android:id="#+id/iv_answer"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/tv_answer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question" />
<android.support.constraint.Barrier
android:id="#+id/barrier_answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/tv_answer"
app:barrierDirection="bottom"
app:barrierAllowsGoneWidgets="false"
app:constraint_referenced_ids="iv_question, iv_answer"/>
<TextView
android:id="#+id/tv_answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="112dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:textAlignment="viewStart"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_complete"
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="#string/quiz_complete"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_showAnswer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="#string/quiz_showAnswer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_nextQuestion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="#string/quiz_nextQuestion"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_Restart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginStart="64dp"
android:text="#string/quiz_restart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_Exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="64dp"
android:text="#string/quiz_exit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

How to put my FloatingActionButton on top of every layout?

I have a ScrollView layout and it has a child constraintLayout. I made it like this so even in landscape mode, I can scroll through a long text. I am wondering where and how will I put the FloatingActionButton so it becomes on top of everything. When I try to add it, the button becomes scrollable too! (which is not a good thing because I want the button to be "floating")
Any suggestions
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="org.cvsuimus.theflare.NewsDetailActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/newsdefault" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="Title"
android:textColor="#color/primaryTextColor"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivImage" />
<TextView
android:id="#+id/tvAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="Author"
android:textColor="#color/primaryTextColor"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.073"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTitle" />
<TextView
android:id="#+id/tvPubDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Publishing Date"
android:textColor="#color/primaryTextColor"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.087"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAuthor" />
<TextView
android:id="#+id/tvContent"
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="32dp"
android:text="tvContent"
android:textColor="#color/primaryTextColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.067"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPubDate"
app:layout_constraintVertical_bias="0.0"
tools:text="Content" />
<TextView
android:id="#+id/Category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Category:"
android:textColor="#color/primaryTextColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/tvCategory"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvContent"
app:layout_constraintVertical_bias="0.692" />
<TextView
android:id="#+id/tvCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginRight="128dp"
android:layout_marginTop="8dp"
android:text="Category"
android:textColor="#color/primaryTextColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabFavorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:focusable="true"
app:backgroundTint="#color/secondaryColor"
app:fabSize="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.975"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.935"
app:rippleColor="#color/secondaryLightColor"
app:srcCompat="#android:drawable/ic_input_add" />
</android.support.constraint.ConstraintLayout>
</ScrollView>

Solved it on my own but tried a different approach. I used a CollapsingToolbarLayout to be able to use the fab. Now it's working smoothly.
XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context="com.cvsuimus.theflare.NewsDetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/ivImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:adjustViewBounds="false"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:srcCompat="#drawable/bannerplaceholder" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvId"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Title"
android:textColor="#color/primaryTextColor"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="Author"
android:textColor="#color/primaryTextColor"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.073"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTitle" />
<TextView
android:id="#+id/tvPubDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Publishing Date"
android:textColor="#color/primaryTextColor"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.087"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAuthor" />
<TextView
android:id="#+id/tvContent"
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="32dp"
android:text="tvContent"
android:textColor="#color/primaryTextColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.067"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPubDate"
app:layout_constraintVertical_bias="0.0"
tools:text="Content" />
<TextView
android:id="#+id/Category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Category:"
android:textColor="#color/primaryTextColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/tvCategory"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvContent"
app:layout_constraintVertical_bias="0.692" />
<TextView
android:id="#+id/tvCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="128dp"
android:layout_marginRight="128dp"
android:layout_marginTop="8dp"
android:text="Category"
android:textColor="#color/primaryTextColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/primaryDarkColor"
app:fabSize="normal"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom|right|end"
app:srcCompat="#drawable/ic_bookmark_border_black_24dp" />
</android.support.design.widget.CoordinatorLayout>

You can use Relative Layout with your scroll view and FAB inside this RelativeLayout. It would be:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="org.cvsuimus.theflare.NewsDetailActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/newsdefault" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="Title"
android:textColor="#color/primaryTextColor"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivImage" />
<TextView
android:id="#+id/tvAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="Author"
android:textColor="#color/primaryTextColor"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.073"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvTitle" />
<TextView
android:id="#+id/tvPubDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Publishing Date"
android:textColor="#color/primaryTextColor"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.087"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAuthor" />
<TextView
android:id="#+id/tvContent"
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="32dp"
android:text="tvContent"
android:textColor="#color/primaryTextColor"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.067"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPubDate"
app:layout_constraintVertical_bias="0.0"
tools:text="Content" />
<TextView
android:id="#+id/Category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Category:"
android:textColor="#color/primaryTextColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/tvCategory"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvContent"
app:layout_constraintVertical_bias="0.692" />
<TextView
android:id="#+id/tvCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginRight="128dp"
android:layout_marginTop="8dp"
android:text="Category"
android:textColor="#color/primaryTextColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabFavorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:focusable="true"
app:backgroundTint="#color/secondaryColor"
app:fabSize="normal"
app:rippleColor="#color/secondaryLightColor"
app:srcCompat="#android:drawable/ic_input_add" />
</RelativeLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

windowSoftInputMode="adjustPan|adjustResize" did not work with coordinatelayout - android

Related

How to Hide TextView when Scrolling Recycler View?

UI on design view is not being displayed the same in emulator

Problem in using NestedScrollView in Constraint layout

How do I prevent imageview overlapping?

How to put my FloatingActionButton on top of every layout?

Categories

Resources