Showing a constraintlayout element as a recyclerview item

Question

For a project I need to use a RecyclerView that consist out of a X number of ConstraintLayout elements (items). The problem is that I have created the layout file for a specific item, but the view is never rendered properly. The items are only rendered when I set the minWidth & minHeight element of my items ConstraintLayout element.

<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.constraint.Guideline
    android:id="@+id/end_cardview_element"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.30" />

<android.support.constraint.Guideline
    android:id="@+id/start_image_element"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0" />

<android.support.constraint.Guideline
    android:id="@+id/end_image_element"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.25" />

<android.support.constraint.Guideline
    android:id="@+id/start_vertical_border"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.04" />

<android.support.constraint.Guideline
    android:id="@+id/end_vertical_border"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.41" />

<android.support.constraint.Guideline
    android:id="@+id/end_image_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.12" />

<android.support.constraint.Guideline
    android:id="@+id/end_text_place"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.32" />

<android.support.constraint.Guideline
    android:id="@+id/mid_text_element"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.275" />

<android.support.constraint.Guideline
    android:id="@+id/start_title_element"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.13810316" />

<android.support.constraint.Guideline
    android:id="@+id/start_text_element"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.06" />

<android.support.constraint.Guideline
    android:id="@+id/end_text_element"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.2" />

<ImageView
    android:id="@+id/route_background"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/end_image_element"
    app:layout_constraintEnd_toStartOf="@+id/end_vertical_border"
    app:layout_constraintStart_toStartOf="@+id/start_vertical_border"
    app:layout_constraintTop_toTopOf="@+id/start_image_element" />

<ImageView
    android:id="@+id/route_icon"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/end_cardview_element"
    app:layout_constraintEnd_toStartOf="@+id/end_image_icon"
    app:layout_constraintStart_toStartOf="@+id/start_vertical_border"
    app:layout_constraintTop_toTopOf="@+id/end_image_element"
    app:srcCompat="@drawable/icon_swimming" />

<android.support.v7.widget.AppCompatTextView
    android:id="@+id/route_place"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Lochem"
    app:autoSizeMaxTextSize="24sp"
    app:autoSizeMinTextSize="12sp"
    app:autoSizeStepGranularity="2sp"
    app:autoSizeTextType="uniform"
    app:layout_constraintBottom_toTopOf="@+id/mid_text_element"
    app:layout_constraintEnd_toStartOf="@+id/end_text_place"
    app:layout_constraintStart_toStartOf="@+id/end_image_icon"
    app:layout_constraintTop_toTopOf="@+id/end_image_element" />

<android.support.v7.widget.AppCompatTextView
    android:id="@+id/route_time"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="2 hours"
    app:autoSizeMaxTextSize="24sp"
    app:autoSizeMinTextSize="12sp"
    app:autoSizeStepGranularity="2sp"
    app:autoSizeTextType="uniform"
    app:layout_constraintBottom_toTopOf="@+id/end_cardview_element"
    app:layout_constraintEnd_toStartOf="@+id/end_text_place"
    app:layout_constraintStart_toStartOf="@+id/end_image_icon"
    app:layout_constraintTop_toTopOf="@+id/mid_text_element" />

<android.support.v7.widget.AppCompatTextView
    android:id="@+id/route_title"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="TextView"
    android:textColor="@color/white"
    app:autoSizeMaxTextSize="24sp"
    app:autoSizeMinTextSize="16sp"
    app:autoSizeStepGranularity="2sp"
    app:autoSizeTextType="uniform"
    app:layout_constraintBottom_toTopOf="@+id/end_text_element"
    app:layout_constraintEnd_toStartOf="@+id/end_text_place"
    app:layout_constraintStart_toStartOf="@+id/start_title_element"
    app:layout_constraintTop_toTopOf="@+id/start_text_element" />

All child elements (TextViews & ImageViews) constraints are set to different guidelines (which i left out of the codeblock to keep the XML easier to read). I can't figure out how to set the appropriate constraints for this file so the elements are scaled according the guidelines I've set. Apart from the XML below I also tried setting the constraints for the root element by equaling them to the parent but this didn't solve the issue for me. Any help is greatly appreciated!

EDIT 1: Something I might have forgot to mention that I'm using a percentage base layout, in case this might be important.

EDIT 2: Added the guidelines

EDIT 3: Added the code for the recyclerview

<android.support.v7.widget.RecyclerView
    android:id="@+id/suggested_routes_recyclerview"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="horizontal"
    app:layout_constraintBottom_toTopOf="@+id/end__recyclerview"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/end_text_title">

Answer 1

After spending several hours in trying to solve the problem I managed to find a solution. The problem wasn't that I wasn't setting my constraint in a good way, or the size of my RecyclerView wasn't correct. The real problem is that my math skills weren't on point. Since this is something so obvious, I still think this might help some people so I'll post my solution anyway.

When I defined the guidelines from the item used in my RecyclerView I was calculating the percentage size for the entire screen, instead of using the sizes for a single item. So this resulted in items being displayed really small, and this explains why setting a minimal size solved my problem. Thanks for anyone looking at my XML

Answer 2

The layout for your items looks fine so I would assume the problem has to do with your RecyclerView's dimensions. You probably have the RecyclerView's layout_width and layout_height set to wrap_content meaning that the it will only take as much space as needed. However, it doesn't know how much space it needs because the item's layout is entirely based on the percentages of the parent (the parent being the RecyclerView).

If you tried also setting the RecyclerView's dimensions to match_parent, see below.

To solve this, you need to give your RecyclerView some space to work with, like this:

<android.support.v7.widget.RecyclerView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:id="@+id/id_of_your_recycler_view"/>

or constrain it appropriately with other Views in your layout.

Important: If your RecyclerView is inside a ConstraintLayout do not use match_parent for the dimensions. Use constraints and 0dp for the dimension to match_constraint. Using match_parent might cause unexpected results as stated in the documentation.

Answer 3

Try using wrap_content instead of match_parent on your ConstraintLayout. This should fix it.