Constraint Layout is causing views to overlap - android

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>

Related

tab item title become invisible after changing design of the page

After changing my design (changing relative layouts to constraint layout and fixing constraints) my tablayout is still visible but tab items which I added them in the java became invisible (they still visible but title became invisible)
How can I solve this problem?
here is my xml file (I think the problem is here because I didn't change the java code):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragments.GroupeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#95210851"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:orientation="horizontal"
android:weightSum="20"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_weight="4"
android:src="#drawable/notification_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.8" />
<TextView
android:id="#+id/groupename"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="68dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:layout_weight="10"
android:fontFamily="#font/renner_500_medium"
android:text="Telnet groupe"
android:textAlignment="center"
android:textColor="#ffff"
android:textFontWeight="8"
android:textSize="23sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/getallmembres"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginStart="40dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="2dp"
android:layout_weight="4"
android:elevation="3dp"
android:src="#drawable/login_username_icon"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/groupename"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/addtachebyresp"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginTop="8dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="8dp"
android:layout_weight="4"
android:background="#drawable/add_icon"
android:elevation="3dp"
android:textColor="#FFFF"
android:textSize="45sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.258"
app:layout_constraintStart_toEndOf="#+id/getallmembres"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/pager"
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/linearLayout">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#95210851"
android:elevation="6dp"
app:tabTextColor="#fff"
app:tabGravity="fill"
android:theme="#style/Theme.AppCompat.DayNight.DarkActionBar"
app:tabIndicatorColor="#D9C8F8" ></com.google.android.material.tabs.TabLayout>
</androidx.viewpager.widget.ViewPager>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/membreRelativel"
android:layout_width="353dp"
android:layout_height="445dp"
android:layout_marginHorizontal="20dp"
android:layout_marginVertical="60dp"
android:background="#drawable/rounded_corner_shape_gris"
android:elevation="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="25dp"
android:background="#ffff"
android:orientation="vertical"
android:weightSum="10">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/membresrecycler"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"></androidx.recyclerview.widget.RecyclerView>
<Button
android:id="#+id/goto_add_membres"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textColor="#fff"
android:background="#drawable/profile_first_layout"
android:text="Ajouter des membres" />
</LinearLayout>
<TextView
android:id="#+id/hideparticipants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="X"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.952"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/addmembreLayout"
android:layout_width="307dp"
android:layout_height="226dp"
android:layout_marginHorizontal="50dp"
android:layout_marginVertical="180dp"
android:layout_marginBottom="386dp"
android:background="#drawable/rounded_corner_shape_gris"
android:elevation="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.24000001">
<TextView
android:layout_width="308dp"
android:layout_height="26dp"
android:background="#B6B5B5"
android:fontFamily="#font/mermaid"
android:text="Ajout d'un membre"
android:textAlignment="center"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/linearLayout4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/titleaddmemebre"
/>
<TextView
android:layout_marginTop="2dp"
android:textAlignment="center"
android:id="#+id/hideaddmembre"
android:layout_width="20dp"
android:layout_height="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:elevation="2dp"
android:text="X"
android:textSize="20sp"
android:layout_marginRight="7dp"
/>
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#fff"
android:weightSum="10"
android:orientation="vertical"
android:gravity="bottom"
app:layout_constraintTop_toBottomOf="#+id/titleaddmemebre"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<EditText
android:id="#+id/addmembreemail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:layout_marginTop="20dp"
android:hint="Email" />
<Button
android:layout_marginTop="50dp"
android:id="#+id/saveaddmembre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/profile_first_layout"
android:text="Ajouter"
android:layout_marginBottom="0dp"
android:textColor="#ffff" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

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>

Android ConstraintLayout leaves content on the outside when the content is very large

I have a ScrollView which has a ConstraintLayout. I am trying to load a content, but when the content is too large, I start loosing the footer. This works fine when I have short or medium content, but only happens with very very large content.
This is the problem
This is the structure of my layout
I am doing the inspection with the Layout inspector and this is the result
This is the result of the Layout Inspector
This is the structure of the layout in the Inspector
Any Idea?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/id_scv_article_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible"
tools:context=".ui.activities.contents.ArticleDetailActivity">
<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:id="#+id/id_cnt_article_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<android.support.v7.widget.Toolbar
android:id="#+id/id_article_detail_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:clickable="true"
android:focusable="true"
android:minHeight="?attr/actionBarSize"
android:textAlignment="center"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:titleTextAppearance="#style/TitleBarTextAppearance" />
<ImageView
android:id="#+id/id_img_article_det"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_article_detail_toolbar"
app:srcCompat="#drawable/no_image" />
<TextView
android:id="#+id/id_txt_title_article_det"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/info_not_title_defined"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_img_article_det" />
<TextView
android:id="#+id/id_txt_summary_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_medium"
android:text="#string/info_not_short_text_defined"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_txt_title_article_det" />
<LinearLayout
android:id="#+id/ln_text_content_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/linear_layout_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_txt_summary_article_det">
<TextView
android:id="#+id/id_txt_text_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:fontFamily="#font/roboto_regular"
android:text="#string/textoooo" />
</LinearLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/id_cnt_gallery_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ln_text_content_article">
<TextView
android:id="#+id/id_txt_title_gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/title_gallery"
android:textColor="#color/colorSecondary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/id_recycler_view_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_txt_title_gallery" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="2dp"
android:layout_marginEnd="32dp"
android:layout_marginTop="8dp"
android:background="#color/colorLines"
android:backgroundTint="#color/colorLines"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_recycler_view_gallery" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/id_cnt_calendar_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_cnt_gallery_article_det">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/id_calendar_article"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#id/id_calendar_article"
layout="#layout/recycler_view_calendar">
</include>
</android.support.constraint.ConstraintLayout>
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="2dp"
android:layout_marginEnd="32dp"
android:layout_marginTop="8dp"
android:background="#color/colorLines"
android:backgroundTint="#color/colorLines"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_calendar_article" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/id_cnt_resources_article_det"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_cnt_calendar_article_det">
<LinearLayout
android:id="#+id/ln_document_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent">
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="2"
app:srcCompat="#drawable/pdf_icon" />
<TextView
android:id="#+id/id_name_pdf_article"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="6"
android:ellipsize="end"
android:fontFamily="#font/roboto_regular"
android:maxLines="2"
android:text="#string/info_not_title_defined" />
<ImageView
android:id="#+id/id_img_download_pdf_article"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="2"
app:srcCompat="#drawable/download_icon" />
</LinearLayout>
<View
android:id="#+id/id_ln_document_separator"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#DEDEDE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ln_document_article" />
<LinearLayout
android:id="#+id/ln_link_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/id_ln_document_separator">
<TextView
android:id="#+id/id_txt_link_article"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_weight="5"
android:fontFamily="#font/roboto_medium"
android:maxLines="2"
android:text="#string/info_not_title_defined" />
<TextView
android:id="#+id/id_txt_copy_link_article"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:fontFamily="#font/roboto_regular"
android:text="#string/lbl_copy_link"
android:textAlignment="textEnd"
android:textColor="?android:attr/colorEdgeEffect" />
<TextView
android:id="#+id/id_txt_go_link_article"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:fontFamily="#font/roboto_regular"
android:text="#string/lbl_go"
android:textAlignment="center"
android:textColor="?android:attr/colorEdgeEffect" />
</LinearLayout>
<View
android:id="#+id/id_ln_link_separator"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#DEDEDE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ln_link_article" />
<LinearLayout
android:id="#+id/ln_image_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:weightSum="10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/id_ln_link_separator">
<ImageView
android:id="#+id/id_img_img_article"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_margin="8dp"
android:layout_weight="4"
android:scaleType="centerCrop"
app:srcCompat="#drawable/no_image" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/id_txt_name_img_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_regular"
android:text="#string/info_not_title_defined" />
<TextView
android:id="#+id/id_txt_download_img_article"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_regular"
android:text="#string/lbl_download"
android:textColor="?android:attr/colorEdgeEffect" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="8dp"
android:background="#color/colorLines"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/id_cnt_resources_article_det" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/lbl_author"
android:textColor="#color/colorSecondary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view1" />
<TextView
android:id="#+id/id_txt_author_article"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="80dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_regular"
android:text="#string/info_not_art_author_defined"
app:layout_constraintStart_toStartOf="#+id/textView13"
app:layout_constraintTop_toBottomOf="#+id/view1" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/lbl_publication_date"
android:textColor="#color/colorSecondary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView13" />
<TextView
android:id="#+id/id_txt_publication_date_article"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_regular"
android:text="#string/info_not_art_defined"
app:layout_constraintStart_toStartOf="#+id/id_txt_author_article"
app:layout_constraintTop_toBottomOf="#+id/id_txt_author_article" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/lbl_last_modification_date"
android:textColor="#color/colorSecondary"
app:layout_constraintStart_toEndOf="#+id/id_txt_publication_date_article"
app:layout_constraintTop_toBottomOf="#+id/id_txt_author_article" />
<TextView
android:id="#+id/id_txt_last_update_date_article"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="#font/roboto_regular"
android:text="#string/info_not_art_defined"
app:layout_constraintStart_toEndOf="#+id/textView16"
app:layout_constraintTop_toTopOf="#+id/textView16" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginTop="32dp"
android:background="#android:color/white"
android:backgroundTint="#android:color/white"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView13" />
</android.support.constraint.ConstraintLayout>

As I could not find the real problem, I decided to rewrite the layout again. I removed some of the elements that were not necessary like the intern ConstraintsLayouts and I wrapped the content in a layout, instead a scrollview like #E.Abdel suggested.
Thank you!

How to apply divider or view in Constraint layout

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

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

Check out Guideline. I've found it to be useful when working with Constraint Views.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Categories

Resources