Arrangement of diamond-shaped buttons

Arrangement of diamond-shaped buttons - android

View have a background diamond pattern. It is necessary to place the "buttons" as in the picture.
I did this kind of markup, but if the size of the space that these buttons start plusits. How can I get rid of static sizes in my case? Or you can prompt as it is possible on another to make such arrangement?
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lastInfoTime"
app:layout_constraintVertical_weight="1">
<LinearLayout
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#drawable/button_nav_background"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toStartOf="#+id/auto"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/navigationText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="7dp"
android:drawableTop="#drawable/ic_gas_station"
android:fontFamily="#font/pfdindisplaypro_light"
android:gravity="center"
android:text="Навигация"
android:textColor="#color/main_text_color"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/auto"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:background="#drawable/button_nav_background"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/navigation"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/autoText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="7dp"
android:drawableTop="#drawable/truck"
android:fontFamily="#font/pfdindisplaypro_light"
android:gravity="center"
android:text="Авто"
android:textColor="#color/main_text_color"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/message"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_alignBottom="#id/navigation"
android:layout_marginBottom="8dp"
android:layout_toEndOf="#id/navigation"
android:background="#drawable/button_nav_background"
android:gravity="center"
android:orientation="vertical">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/messageText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="7dp"
android:drawableTop="#drawable/ic_action_message"
android:fontFamily="#font/pfdindisplaypro_light"
android:gravity="center"
android:text="Сообщения"
android:textColor="#color/main_text_color"
android:textSize="13sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
only I did not understand how and to what the top button to bind. So that when scaling, they all went together without disturbing the overall appearance. #+id / message is the top button.

implementation 'com.android.support.constraint:constraint-layout:1.1.3'
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1">
<LinearLayout
android:id="#+id/right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:background="#0026ff"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#+id/left"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/navigationText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="7dp"
android:gravity="center"
android:text="Right"
android:textColor="#000"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:background="#ffb700"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/autoText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="7dp"
android:gravity="center"
android:text="Left"
android:textColor="#000"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/top"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="32dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:background="#ff0000"
android:gravity="center"
app:layout_constraintBottom_toTopOf="#+id/bottom"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/navigationText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="7dp"
android:gravity="center"
android:text="Top"
android:textColor="#000"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/bottom"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="32dp"
android:layout_marginTop="32dp"
android:background="#4cff00"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top"
app:layout_constraintVertical_weight="1">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/autoText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="7dp"
android:gravity="center"
android:text="Bottom"
android:textColor="#000"
android:textSize="13sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

Related

View overlapping on keyboard popup android in constraintlayout

Below is my xml
<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/parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
tools:context="com.viewlift.views.fragments.LoginFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/nativeLoginContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/emailFieldsContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/emailContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/textfield_bg"
android:minHeight="40dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailTitle">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint="#string/enter_email"
android:inputType="textEmailAddress"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/emailTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#android:color/white"
android:gravity="center"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:text="#string/email"
android:textColor="#android:color/black"
android:textSize="14sp"
android:translationY="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/passwordFieldsContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailFieldsContainer">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/passwordContainer"
android:layout_width="0dp"
android:layout_height="40dp"
android:background="#drawable/textfield_bg"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordTitle">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/passwordInputLayout"
android:layout_width="0dp"
android:layout_height="0dp"
app:boxBackgroundMode="none"
app:hintEnabled="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:hint="#string/enter_password"
android:inputType="textPassword"
android:padding="5dp"
android:textCursorDrawable="#drawable/custom_edit_text_cursor" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/passwordTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#android:color/white"
android:gravity="center"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:text="#string/password"
android:textColor="#android:color/black"
android:textSize="14sp"
android:translationY="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mobileFieldsContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordFieldsContainer">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/countryCodeContainer"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/textfield_bg"
android:minWidth="70dp"
app:layout_constraintBottom_toBottomOf="#+id/mobileContainer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/mobileContainer">
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/countryCode"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:background="#null"
android:overlapAnchor="false"
android:spinnerMode="dialog"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/countryCodeArrow"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/countryCodeArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/triangle_down"
android:tint="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mobileContainer"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginStart="10dp"
android:background="#drawable/textfield_bg"
app:layout_constraintLeft_toRightOf="#+id/countryCodeContainer"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mobileTitle">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/mobile"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/transparent"
android:hint="#string/enter_number"
android:inputType="number"
android:maxLength="10"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/mobileTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#android:color/white"
android:gravity="center"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:text="#string/mobile"
android:textColor="#android:color/black"
android:textSize="14sp"
android:translationY="10dp"
app:layout_constraintLeft_toRightOf="#+id/countryCodeContainer"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/forgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/app_cms_forgot_password_title"
android:textColor="#android:color/darker_gray"
android:textSize="12sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mobileFieldsContainer" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintLeft_toLeftOf="#+id/forgotPassword"
app:layout_constraintRight_toRightOf="#+id/forgotPassword"
app:layout_constraintTop_toBottomOf="#+id/forgotPassword" />
<androidx.appcompat.widget.AppCompatCheckBox
android:id="#+id/terms"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="start|center_vertical"
android:text="#string/sign_up_tos_and_pp_text"
android:textColor="#android:color/black"
android:textSize="12sp"
android:visibility="gone"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/forgotPassword" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/signInButton"
android:layout_width="0dp"
android:layout_height="55dp"
android:layout_marginTop="20dp"
android:text="#string/signin_continue"
android:textColor="#android:color/white"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/terms" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/separator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nativeLoginContainer">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/orLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/signin_other_account"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/socialLoginContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/separator">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/fbButtonContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:minHeight="55dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/fbImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/login_facebook"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/fbButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="#string/login_facebook"
android:textColor="#color/facebookBlue"
app:layout_constraintBottom_toBottomOf="#+id/fbImg"
app:layout_constraintStart_toEndOf="#+id/fbImg"
app:layout_constraintTop_toTopOf="#+id/fbImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/googleButtonContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_bright"
android:minHeight="55dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fbButtonContainer">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/googleImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/login_google"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/googleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="#string/login_google"
android:textColor="#color/googleRed"
app:layout_constraintBottom_toBottomOf="#+id/googleImg"
app:layout_constraintStart_toEndOf="#+id/googleImg"
app:layout_constraintTop_toTopOf="#+id/googleImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mobileButtonContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/holo_blue_bright"
android:minHeight="55dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/googleButtonContainer">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/mobileImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/login_mobile"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/mobileButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="#string/mobile"
android:textColor="#android:color/holo_green_dark"
app:layout_constraintBottom_toBottomOf="#+id/mobileImg"
app:layout_constraintStart_toEndOf="#+id/mobileImg"
app:layout_constraintTop_toTopOf="#+id/mobileImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tveMsg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/tve_login_msg"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#+id/tveButtonContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/tveButtonContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:minHeight="55dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/tveImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/login_tve"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:text="#string/app_cms_tve_log_in"
android:textColor="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="#+id/tveImg"
app:layout_constraintStart_toEndOf="#+id/tveImg"
app:layout_constraintTop_toTopOf="#+id/tveImg" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This is the output I have
Now when the keyboard is shown the bottom tv button overlaps with fb button
How can I fix this?

If you have a view with constraintBottom_toBottomOf="parent", add a parent scrolling container for your whole view. This should solve your issue.
This happens with keyboards and views having constraintBottom_toBottomOf always as the view only has remaining screen size above the keyboard and below the status bar, hence resulting in the view with constraintBottom_toBottomOf="parent" overlapping the view like you have.

How to center text in textView in this case?

I want to put the text in textView_title and textView_subtitle to the center of the screen. May I know what is a good way to do it? I tried android:layout_gravity and android:gravity and they do not work.
Below is the XML file with a constraint layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/textView_login"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/textView_title"
android:lines="1"
android:ellipsize="end"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/textView_subtitle"
tool:text="textView"/>
<TextView
android:id="#+id/textView_subtitle"
android:lines="1"
android:ellipsize="end"
android:textColor="#color/foodDollarYellow"
android:textSize="12sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_title"
app:layout_constraintBottom_toBottomOf="parent"
tool:text="textView"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/textView_login"
android:textAlignment="textEnd"
android:text="註冊/登入"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tool:ignore="HardcodedText"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Add android:textAlignment="center" to your textViews and make the parent width equal to the screen width:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="text1"
android:textAlignment="center"
app:layout_constraintBottom_toTopOf="#id/textView_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="text2"
android:textAlignment="center"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_title" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/textView_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="註冊/登入"
android:textAlignment="textEnd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this:
If you want to avoid nesting you can achieve this using single layout:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="text1"
android:textAlignment="center"
app:layout_constraintBottom_toTopOf="#id/textView_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="text2"
android:textAlignment="center"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_title" />
<TextView
android:id="#+id/textView_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="註冊/登入"
android:textAlignment="textEnd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView_title"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
And it will look like this:
You can achieve this layout with or without nesting, but it is more recommended to avoid nesting when possible if you are using constaintLayout
Edit
This is the new layout: (I have added 1 Guildeline)
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/textView_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent">
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7" />
<TextView
android:id="#+id/textView_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="註冊/登入"
android:textAlignment="textEnd"
app:layout_constraintBottom_toBottomOf="#+id/textView_subtitle"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="#+id/textView_subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="long longggggggggggggggggggggggggggggggggggggggggg"
android:textAlignment="center"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/textView_title"
app:layout_constraintTop_toBottomOf="#+id/textView_title" />
<TextView
android:id="#+id/textView_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:text="longggggggggggggggggggggggggggggggggg"
android:textAlignment="center"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Here is how it will look:

Solution 1:
add in your textview:
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
hence:
<TextView
android:id="#+id/textView_login"
android:textAlignment="textEnd"
android:text="註冊/登入"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:ignore="MissingConstraints" />
Solution 2
use relative layout instead of constraint(im taking about the first constraint layout not second)
then
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/relative"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/textView_login"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/textView_title"
android:lines="1"
android:ellipsize="end"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/textView_subtitle"
/>
<TextView
android:id="#+id/textView_subtitle"
android:lines="1"
android:ellipsize="end"
android:textColor="#color/foodDollarYellow"
android:textSize="12sp"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_title"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/textView_login"
android:textAlignment="textEnd"
android:text="註冊/登入"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_centerHorizontal="true"
tools:ignore="MissingConstraints" />
</RelativeLayout>
android:layout_centerHorizontal="true" this line bring your textview in centretop
hope my answer helped...

How to make a fragment fit in a FrameLayout in all screen sizes?

I am developing an app where I want to show few fragments in a container(Framelayout) one after other. I want my fragments to fit in the framelayout without its parts going out of the screen.
I want this:
But Getting this:
Here is my code snippet:
<android.support.constraint.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:background="#drawable/grey_border_circular_rect"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3"
app:layout_constraintVertical_bias="0.0">
<FrameLayout
android:id="#+id/fragment_holder"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toTopOf="#+id/elipse1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="32dp" />
<ImageView
android:id="#+id/elipse1"
android:layout_width="14dp"
android:layout_height="14dp"
app:layout_constraintEnd_toStartOf="#+id/elipse2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline4"
app:srcCompat="#drawable/ic_elipse_filled"
tools:layout_editor_absoluteY="568dp" />
<ImageView
android:id="#+id/elipse2"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="#+id/elipse1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/elipse1"
app:srcCompat="#drawable/ic_elipse_blank" />
</android.support.constraint.ConstraintLayout>
I can't share the full xml code as I have some restriction on the code. But the Root layout is also a ConstraintLayout.
fragment.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="wrap_content">
<TextView
android:id="#+id/otpVerificationTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="OTP Verification"
android:textColor="#color/blue"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#color/btn_grey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/otpVerificationTV" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
android:text="We sent you a code"
android:textColor="#android:color/black"
android:textSize="26sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/view2" />
<Button
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:background="#color/transparent"
android:text="Resend OTP"
android:textAllCaps="false"
android:textColor="#color/grey_secondary"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/view3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<View
android:id="#+id/view3"
android:layout_width="3dp"
android:layout_height="30dp"
android:layout_marginStart="10dp"
android:background="#color/grey_secondary"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toStartOf="#+id/textView7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView5" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textColor="#color/blue"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view3"
tools:text="29 sec" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="56dp"
android:text="OTP"
android:textColor="#android:color/black"
android:textSize="26sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView5" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="262dp"
android:layout_height="48dp"
android:layout_marginTop="8dp"
android:background="#color/blue"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/blue_circular_rect"
android:elevation="#dimen/btn_elevation"
android:text="Next"
android:textAllCaps="false"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/linearLayout"
app:layout_constraintTop_toBottomOf="#+id/linearLayout" />
</android.support.constraint.ConstraintLayout>
So is there any possible way that I can make the fragment fit on any screen size and all of it is visible inside the framelayout.

Below code will help with your fragment.xml file.
You didn't provided more values files means color code, string file and other. So below are some changes from your file like drawable and value related data.
Fill free to put comment if you have any question related to below views. If below code work for you then please approve this answer.
<?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">
<TextView
android:id="#+id/otpVerificationTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="OTP Verification"
android:textColor="#android:color/holo_blue_light"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#color/colorGrey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/otpVerificationTV" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="We sent you a code"
android:textColor="#android:color/black"
android:textSize="26sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/group2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/group2" />
<android.support.constraint.Group
android:id="#+id/group2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="textView6"
app:layout_constraintBottom_toTopOf="#id/group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view2" />
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="view3,textView7,textView5"
app:layout_constraintBottom_toTopOf="#id/group1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/group2" />
<android.support.constraint.Group
android:id="#+id/group1"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="linearLayout,textView8"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/group" />
<Button
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="Resend OTP"
android:textAllCaps="false"
android:textColor="#color/colorGrey"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/view3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#id/group"
app:layout_constraintTop_toTopOf="#+id/group" />
<View
android:id="#+id/view3"
android:layout_width="3dp"
android:layout_height="30dp"
android:layout_marginStart="10dp"
android:background="#color/colorGrey"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toStartOf="#+id/textView7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView5" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textColor="#android:color/holo_blue_light"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="#id/group"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view3"
tools:text="29 sec" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:text="OTP"
android:textColor="#android:color/black"
android:textSize="26sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/group1" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="262dp"
android:layout_height="48dp"
android:layout_marginTop="8dp"
android:background="#android:color/holo_blue_light"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/holo_blue_light"
android:elevation="1dp"
android:text="Next"
android:textAllCaps="false"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/linearLayout"
app:layout_constraintTop_toBottomOf="#+id/group1" />
</android.support.constraint.ConstraintLayout>

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

Evenly spaced (full height) menu using Constraint Layout

I have searched Android site and on here, but for the life of me, I can't seem to figure out how to get a full screen menu without spaces. I've checked margins, padding, etc. I've used percentages for guidelines too, but still have spacing between my buttons. Can anyone help? All of my buttons are set to zero db as well.
<?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:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#66bb6a"
android:elevation="0dp"
android:onClick="startFlashcardA"
android:text=" Flashcards"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline22"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"/>
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#android:color/holo_purple"
android:elevation="0dp"
android:onClick="startVideoA"
android:padding="0dp"
android:text=" Videos"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline27"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/guideline22"
app:layout_constraintVertical_bias="0.0"
/>
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="125dp"
android:backgroundTint="#f06292"
android:onClick="startSoundsMenu"
android:text=" Letter Sounds"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline28"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline27"
app:layout_constraintVertical_bias="0.0"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#android:color/holo_blue_dark"
android:text=" About Mr. Pea"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/guideline29"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline28"
app:layout_constraintVertical_bias="0.0"/>
<android.support.constraint.Guideline
android:id="#+id/guideline22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2"
tools:layout_editor_absoluteY="114dp"
tools:layout_editor_absoluteX="0dp"/>
<android.support.constraint.Guideline
android:id="#+id/guideline27"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.4"
tools:layout_editor_absoluteY="227dp"
tools:layout_editor_absoluteX="0dp"/>
<android.support.constraint.Guideline
android:id="#+id/guideline28"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6"
tools:layout_editor_absoluteY="340dp"
tools:layout_editor_absoluteX="0dp"/>
<android.support.constraint.Guideline
android:id="#+id/guideline29"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8"
tools:layout_editor_absoluteY="454dp"
tools:layout_editor_absoluteX="0dp"/>
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#887c5a"
android:text=" Contributions"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline29"
app:layout_constraintVertical_bias="0.0"/>
</android.support.constraint.ConstraintLayout>

No guidelines necessary. Just make a chain well-connected in both directions. You may want to correct the padding of button.
<?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:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="25dp">
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#66bb6a"
android:elevation="0dp"
android:onClick="startFlashcardA"
android:text=" Flashcards"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#android:color/holo_purple"
android:elevation="0dp"
android:onClick="startVideoA"
android:padding="0dp"
android:text=" Videos"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button6"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/button5"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#f06292"
android:onClick="startSoundsMenu"
android:text=" Letter Sounds"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#android:color/holo_blue_dark"
android:text=" About Mr. Pea"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button6"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:backgroundTint="#887c5a"
android:text=" Contributions"
android:textAlignment="viewStart"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>

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.

Arrangement of diamond-shaped buttons - android

Related

View overlapping on keyboard popup android in constraintlayout

How to center text in textView in this case?

How to make a fragment fit in a FrameLayout in all screen sizes?

Problem in using NestedScrollView in Constraint layout

Evenly spaced (full height) menu using Constraint Layout

Categories

Resources