Layout problems in a resource file - android

I have installed Java SDK and Android Studio 3.5.3 - set The target device and the Android OS as Pie.
I have a simple form with some constrained controls but no code behind at present.
When I run the project - I get the warning shown attached and when the form is rendered in the emulator the formatting of the controls is wrong (see design view image)....?
I have tried to update the drivers for the display adapter but it reports they are at current version.
Any ideas I am getting this issue?
Thanks in advance
Here is the code behind activitiy_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textViewNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="308dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="175dp"
android:text="TextView"
android:textSize="#android:dimen/notification_large_icon_height"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="569dp" />
<View
android:id="#+id/divider"
android:layout_width="409dp"
android:layout_height="1dp"
android:layout_marginTop="80dp"
android:background="?android:attr/listDivider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/divider2"
android:layout_width="409dp"
android:layout_height="8dp"
android:background="?android:attr/listDivider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="650dp" />
<TextView
android:id="#+id/textViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:text="RANDOM NUMBER GENERATOR"
android:textColor="#9C27B0"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Switch
android:id="#+id/switchMode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Switch"
tools:layout_editor_absoluteX="500dp"
tools:layout_editor_absoluteY="32dp" />
</androidx.constraintlayout.widget.ConstraintLayout>


If you do it this way, there are benefits like lesser attributes and easy to understand code
Code:
<?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=".MainActivity">
<TextView
android:id="#+id/textViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="70dp"
android:text="RANDOM NUMBER GENERATOR"
android:textColor="#9C27B0"
android:textSize="20sp" />
<Switch
android:id="#+id/switchMode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textViewTitle"
android:layout_centerHorizontal="true"
android:text="Switch" />
<TextView
android:id="#+id/textViewNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="TextView"
android:textSize="#android:dimen/notification_large_icon_height" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:paddingHorizontal="100dp"
android:text="Button" />
</RelativeLayout>


Some of Your Views or Buttons did not have constraints, so they would jump to (0,0) at runtime. Here is the proper xml code
You could clearly read it from Warnings (red icon)
In Constraint Layout it is critical to add constraints to all your controls because they would just jump to (0,0) if not, which can later broke next control etc.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/textViewNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="308dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginBottom="175dp"
android:text="TextView"
android:textSize="#android:dimen/notification_large_icon_height"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/divider2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/divider"
android:layout_width="409dp"
android:layout_height="1dp"
android:layout_marginTop="80dp"
android:background="?android:attr/listDivider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/divider2"
android:layout_width="409dp"
android:layout_height="8dp"
android:layout_marginBottom="32dp"
android:background="?android:attr/listDivider"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:text="RANDOM NUMBER GENERATOR"
android:textColor="#9C27B0"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Switch
android:id="#+id/switchMode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="150dp"
android:layout_marginLeft="150dp"
android:layout_marginTop="32dp"
android:text="Switch"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textViewTitle" />

Related

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

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

Constrain View Issue

I'm trying to make OTP login screen and ran into some issue
following is my XML code. I've used ConstraintLayout and RelativeLayout in this single activity. I did not write any java code yet but setContentView() is also defined
if you look closely to my output you can see the white rectangle on top-left
I think the issue is with XML I might have done something wrong please help
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="97.71dp"
android:layout_height="0dp"
android:layout_marginTop="135dp"
android:layout_marginBottom="29dp"
android:contentDescription="#string/todo"
android:src="#drawable/verification"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="211dp"
android:layout_height="34dp"
android:layout_marginBottom="27dp"
android:text="#string/content"
android:textAlignment="center"
android:textColor="#898A8F"
android:textSize="11sp"
app:layout_constraintBottom_toTopOf="#+id/relativeLayout3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
tools:ignore="SmallSp" />
<RelativeLayout
android:id="#+id/relativeLayout3"
android:layout_width="322dp"
android:layout_height="154dp"
android:layout_marginStart="48dp"
android:layout_marginLeft="48dp"
android:layout_marginEnd="48dp"
android:layout_marginRight="48dp"
android:layout_marginBottom="275dp"
android:background="#drawable/background"
android:elevation="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.571"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
tools:targetApi="lollipop">
<TextView
android:layout_width="60dp"
android:layout_height="44dp"
android:layout_marginStart="17dp"
android:layout_marginLeft="17dp"
android:layout_marginTop="21dp"
android:background="#drawable/ed_txt_bg"
android:drawableLeft="#drawable/flag"
android:gravity="center"
android:text="#string/num"
android:textAlignment="center"
android:textColor="#313450"
android:textSize="19sp"
android:textStyle="bold"
tools:ignore="RtlHardcoded" />
<EditText
android:layout_width="216dp"
android:layout_height="44dp"
android:layout_marginStart="83dp"
android:layout_marginLeft="83dp"
android:layout_marginTop="21dp"
android:background="#drawable/ed_txt_bg"
android:importantForAutofill="no"
android:inputType="text"
tools:ignore="LabelFor" />
<Button
android:layout_width="280.9dp"
android:layout_height="44dp"
android:layout_marginStart="17dp"
android:layout_marginLeft="17dp"
android:layout_marginTop="95.56dp"
android:background="#drawable/button_bg"
android:text="#string/submit"
android:textColor="#fff" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This is suppose to be Output
But this happens when I run it
can you tell me how to fix?

you can try following code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:cardCornerRadius="4dp"
app:cardElevation="6dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/editText"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:ems="3"
android:hint="+91"
android:inputType="number"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:inputType="phone"
android:text="1234567890"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/editText"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#android:color/holo_blue_light"
android:text="#string/submit"
android:textColor="#3C3F41"
app:backgroundTint="#03A9F4"
app:cornerRadius="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="Enter your mobile number, we will send you otp"
app:layout_constraintBottom_toTopOf="#+id/cardView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="85dp"
android:layout_height="85dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#android:drawable/sym_def_app_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
Add material dependency to your project and replace your images and ids for views.

Bug in Barrier in Constraint Layout

I was using the Barrier helper in the android studio. There was a bug in that barrier not showing in the layout screen even if all the references are set and the direction of the barrier is also set. Please help me.ScreenShot of The Problem
code is here
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageViewHeader"
android:layout_width="0dp"
android:layout_height="232dp"
android:contentDescription="#null"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/header" />
This is poster view reference of barrier
<ImageView
android:id="#+id/imageViewPoster"
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_marginTop="8dp"
android:contentDescription="#null"
app:layout_constraintBottom_toBottomOf="#+id/imageViewHeader"
app:layout_constraintDimensionRatio="w,2:3"
app:layout_constraintStart_toStartOf="#+id/guidelinePoster"
app:layout_constraintTop_toBottomOf="#+id/imageViewHeader"
app:layout_constraintVertical_bias="0.594"
app:srcCompat="#drawable/poster" />
<android.support.constraint.Guideline
android:id="#+id/guidelinePoster"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="8dp" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="#string/beauty_and_the_beast"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
app:layout_constraintEnd_toStartOf="#+id/imageButton"
app:layout_constraintStart_toEndOf="#+id/imageViewPoster"
app:layout_constraintTop_toBottomOf="#+id/imageViewHeader" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="8dp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="?attr/selectableItemBackground"
android:contentDescription="#string/bookmark"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintTop_toBottomOf="#+id/imageViewHeader"
app:srcCompat="#drawable/ic_bookmark"
tools:srcCompat="#drawable/ic_bookmark" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="March 2017 | PG | 123 minutes"
android:textAppearance="#style/TextAppearance.AppCompat.Caption"
app:layout_constraintStart_toEndOf="#+id/imageViewPoster"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Rent From R29.99"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guidelinePoster"
app:layout_constraintTop_toTopOf="#id/barrier3" />
<Button
android:id="#+id/button2"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Buy From R129.99"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="#id/barrier3" />
//This is the barrier
<android.support.constraint.Barrier
android:id="#+id/barrier3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="imageViewPoster"
tools:layout_editor_absoluteX="411dp"
tools:layout_editor_absoluteY="731dp" />
</android.support.constraint.ConstraintLayout>

RecyclerView does not scroll inside ConstraintLayout

I have a RecyclerView that does not scroll inside a ConstraintLayout, the items are set but they don't move. I believe the problem is in the XML because the information is all there and the second item is cut down. So can anyone see if there is a problem with my xml layouts
This is my product.xml where I have the RecyclerView
<?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:background="#fafafa"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorBackgroundProducts"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:gravity="center"
android:text="You need at leat € 1.000 on your Account Balance to add an Investment Account"
android:textColor="#5e657b"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="16dp"
app:cardCornerRadius="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginBottom="24dp"
android:text="My Account Balance"
android:textColor="#5e657b"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="€ 5.000,00"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/textView25"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView25" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/textView27"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="+ Add fund to your account "
android:textColor="#00ce7c"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/cardView"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/productsRv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#color/colorWhite"
android:layoutAnimation="#anim/layout_animation_fall_down"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:spanCount="1"
tools:listitem="#layout/row_product" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This is my row product where I have the item layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="40dp"
app:cardCornerRadius="20dp"
android:layout_height="240dp">
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:layout_height="wrap_content">
<Button
android:id="#+id/percentage_tae"
android:layout_width="74dp"
android:layout_height="37dp"
android:layout_marginStart="16dp"
android:text="2,5% TAE"
android:textColor="#color/blank"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/account_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="My Account"
android:textStyle="bold"
android:textColor="#0a0f35"
android:textSize="17sp"
app:layout_constraintBottom_toBottomOf="#+id/percentage_tae"
app:layout_constraintStart_toEndOf="#+id/percentage_tae"
app:layout_constraintTop_toTopOf="#+id/percentage_tae" />
<TextView
android:id="#+id/conditionsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="Conditions"
android:textColor="#color/colorIban"
app:layout_constraintBottom_toBottomOf="#+id/account_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/account_name" />
<TextView
android:id="#+id/textView29"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:text="Interest payment period"
app:layout_constraintStart_toStartOf="#+id/percentage_tae"
app:layout_constraintTop_toBottomOf="#+id/percentage_tae" />
<TextView
android:id="#+id/interestPaymentPeriodText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Daily"
app:layout_constraintBottom_toBottomOf="#+id/textView29"
app:layout_constraintEnd_toEndOf="#+id/conditionsButton"
app:layout_constraintTop_toTopOf="#+id/textView29" />
<TextView
android:id="#+id/textView31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Deposit maturity"
app:layout_constraintStart_toStartOf="#+id/textView29"
app:layout_constraintTop_toBottomOf="#+id/textView29" />
<TextView
android:id="#+id/deposityMaturiryInvestmentText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="1 Year"
app:layout_constraintBottom_toBottomOf="#+id/textView31"
app:layout_constraintEnd_toEndOf="#+id/interestPaymentPeriodText"
app:layout_constraintTop_toTopOf="#+id/textView31" />
<TextView
android:id="#+id/textView33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Minimium Investment"
app:layout_constraintStart_toStartOf="#+id/textView31"
app:layout_constraintTop_toBottomOf="#+id/textView31" />
<Button
android:id="#+id/addInvestmentAccount"
android:layout_width="0dp"
android:layout_height="52dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:background="#drawable/selector_button_green"
android:text="Add investment account"
android:textAllCaps="false"
android:textColor="#color/blank"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/minimumInvestmentText"
app:layout_constraintStart_toStartOf="#+id/textView33"
app:layout_constraintTop_toBottomOf="#+id/textView33" />
<TextView
android:id="#+id/minimumInvestmentText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="€ 1.000"
app:layout_constraintBottom_toBottomOf="#+id/textView33"
app:layout_constraintEnd_toEndOf="#+id/deposityMaturiryInvestmentText"
app:layout_constraintTop_toTopOf="#+id/textView33"
app:layout_constraintVertical_bias="0.0" />
<View
android:id="#+id/view5"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="13dp"
android:background="#e8e8e8"
app:layout_constraintEnd_toEndOf="#+id/conditionsButton"
app:layout_constraintStart_toStartOf="#+id/percentage_tae"
app:layout_constraintTop_toBottomOf="#+id/percentage_tae" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Try this code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorBackgroundProducts"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:gravity="center"
android:text="You need at leat € 1.000 on your Account Balance to add an Investment Account"
android:textColor="#5e657b"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="16dp"
app:cardCornerRadius="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginBottom="24dp"
android:text="My Account Balance"
android:textColor="#5e657b"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="€ 5.000,00"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/textView25"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView25" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/textView27"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="+ Add fund to your account "
android:textColor="#00ce7c"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/cardView"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/productsRv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#color/colorWhite"
android:layoutAnimation="#anim/layout_animation_fall_down"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"
app:spanCount="1"
tools:listitem="#layout/row_product" />
</androidx.constraintlayout.widget.ConstraintLayout>
Hope it can help you.

The point of using the Constraint layout is to remove all unnecessary layout nesting.
Using match_parent in ConstraintLayout is also not recommended instead, use match_constraint (0dp) and constraint it to parent.
If you need some "View" to create constraint-ing point you can just put Guideline.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F0CD"
android:orientation="vertical">
<TextView
android:id="#+id/textView24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="You need at leat € 1.000 on your Account Balance to add an Investment Account"
android:textColor="#5e657b"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="80dp"
app:cardCornerRadius="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text="My Account Balance"
android:textColor="#5e657b"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="€ 5.000,00"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/textView25"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView25" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<TextView
android:id="#+id/textView27"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="+ Add fund to your account "
android:textColor="#00ce7c"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/cardView"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
<android.support.v7.widget.RecyclerView
android:id="#+id/productsRv"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline2"
app:spanCount="1"
tools:listitem="#layout/row_product" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="200dp" />
</android.support.constraint.ConstraintLayout>

Constraint Layout is causing views to overlap

I'm trying to create a view in Android using ConstraintLayout but I'm having a lot of issues with views overlapping or being pushed off of the screen. I think a lot of it might be because I'm so used to iOS constraints and I'm thinking in terms of them. Here is my code:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".LocationFragment">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/guideHorz125"
app:layout_constraintGuide_percent="0.125"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/guideHorz875"
app:layout_constraintGuide_percent="0.875"/>
<TextView style="#style/Label"
android:id="#+id/currentSelectionLabel"
android:layout_marginBottom="21dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="11dp"
android:text="#string/current_selection"
app:layout_constraintBottom_toTopOf="#id/locationLabel"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView style="#style/Label"
android:id="#+id/locationLabel"
android:layout_marginLeft="41dp"
android:text="#string/none"
app:layout_constraintBottom_toTopOf="#id/mapView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/currentSelectionLabel"/>
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toTopOf="#id/previousButton"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/locationLabel"/>
<Button style="#style/RoundedButton"
android:id="#+id/previousButton"
android:text="#string/previous"
app:layout_constraintBottom_toTopOf="#id/newButton"
app:layout_constraintLeft_toLeftOf="#id/guideHorz125"
app:layout_constraintRight_toRightOf="#id/guideHorz875"
app:layout_constraintTop_toBottomOf="#id/mapView"/>
<Button style="#style/RoundedButton"
android:id="#+id/newButton"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="#string/new_location"
app:layout_constraintBottom_toTopOf="#id/resetButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
<com.company.ui.ImageButton
android:id="#+id/startButton"
android:layout_width="240dp"
android:layout_height="90dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="11dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:src="#drawable/start"
app:text="#string/get_started"/>
</android.support.constraint.ConstraintLayout>
The first image is what I'd like to see, and the second is what I'm getting.

Try changing
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
To
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/newButton"/>

Use below layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="4dp"
android:text="Current Selection"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="None"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.184"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="311dp"
android:layout_height="114dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/button54"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="52dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<Button
android:id="#+id/button55"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="96dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<Button
android:id="#+id/button56"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="293dp"
android:layout_height="116dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button55"
app:layout_constraintVertical_bias="0.529"
app:srcCompat="#drawable/googleg_disabled_color_18" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>

Categories

Resources