ConstraintLayout, adding constraints moves all my elements

Question

I am trying to design a custom field for a recyclerview, but I encountered problems regarding the ConstraintLayout. Using the design, I moved all my design elements where I wanted, but as soon as I add any kind of constraint (using Infer Contstraints or writing directly in the XML file, all of the elements move in completely different positions which are in no way how I positioned them. Here is my XML code:

<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/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/list_row_selector"
android:padding="8dp"
tools:layout_editor_absoluteY="81dp">

<!-- Thumbnail Image -->
<ImageView
    android:id="@+id/thumbnail"
    android:layout_width="87dp"
    android:layout_height="89dp"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="8dp" />

<!-- Movie Title -->
<TextView
    android:id="@+id/title"
    android:layout_width="216dp"
    android:layout_height="wrap_content"
    android:textSize="@dimen/title"
    android:textStyle="bold"
    tools:layout_editor_absoluteX="90dp"
    tools:layout_editor_absoluteY="8dp" />

<!-- Rating -->
<TextView
    android:id="@+id/rating"
    android:layout_width="72dp"
    android:layout_height="21dp"
    android:textSize="@dimen/rating"
    tools:layout_editor_absoluteX="90dp"
    tools:layout_editor_absoluteY="85dp" />

<!-- Genre -->
<TextView
    android:id="@+id/genre"
    android:layout_width="334dp"
    android:layout_height="28dp"
    android:textColor="@color/genre"
    android:textSize="@dimen/genre"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="114dp" />

<!-- Release Year -->
<TextView
    android:id="@+id/releaseYear"
    android:layout_width="129dp"
    android:layout_height="21dp"
    android:textColor="@color/year"
    android:textSize="@dimen/year"
    tools:layout_editor_absoluteX="172dp"
    tools:layout_editor_absoluteY="85dp" />

<ImageView
    android:id="@+id/btnBookOption"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:focusable="false"
    android:src="@drawable/book_add_touch"
    android:textColor="@color/white"
    tools:ignore="RtlHardcoded"
    tools:layout_editor_absoluteX="304dp"
    tools:layout_editor_absoluteY="39dp" />

<TextView
    android:id="@+id/author"
    android:layout_width="195dp"
    android:layout_height="38dp"
    tools:layout_editor_absoluteX="90dp"
    tools:layout_editor_absoluteY="39dp" />

</android.support.constraint.ConstraintLayout>

Here is how I am trying to make my list look:

And here is how it looks after I add constraints

How can I add the constraints, but make the layout look like in the first pic at the same time? Thank you.

Answer 1

Try this..

<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/relativeLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:padding="8dp"
    tools:layout_editor_absoluteY="81dp">

    <!-- Thumbnail Image -->
    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="87dp"
        android:layout_height="89dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:background="@tools:sample/backgrounds/scenic" />

    <!-- Movie Title -->
    <TextView
        android:id="@+id/title"
        android:layout_width="216dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@id/thumbnail"
        tools:text="@tools:sample/first_names" />

    <!-- Rating -->
    <TextView
        android:id="@+id/rating"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:textSize="@dimen/rating"
        app:layout_constraintEnd_toStartOf="@+id/releaseYear"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintStart_toEndOf="@+id/thumbnail"
        app:layout_constraintTop_toBottomOf="@id/btnBookOption"
        tools:text="@tools:sample/us_zipcodes" />

    <!-- Genre -->
    <TextView
        android:id="@+id/genre"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="20dp"
        android:layout_marginTop="12dp"
        android:textColor="@color/genre"
        android:textSize="@dimen/genre"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/rating"
        tools:text="@tools:sample/cities" />

    <!-- Release Year -->
    <TextView
        android:id="@+id/releaseYear"
        android:layout_width="129dp"
        android:layout_height="21dp"
        android:textColor="@color/year"
        android:textSize="@dimen/year"
        app:layout_constraintEnd_toStartOf="@id/btnBookOption"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="5"
        app:layout_constraintStart_toEndOf="@+id/rating"
        app:layout_constraintTop_toBottomOf="@id/btnBookOption"
        tools:text="@tools:sample/date/ddmmyy" />

    <TextView
        android:id="@+id/author"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        app:layout_constraintTop_toTopOf="@id/btnBookOption"
        app:layout_constraintBottom_toBottomOf="@id/btnBookOption"
        app:layout_constraintEnd_toStartOf="@+id/btnBookOption"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/thumbnail"
        tools:text="@tools:sample/full_names" />

    <ImageView
        android:id="@+id/btnBookOption"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/author"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:ignore="RtlHardcoded"
        tools:src="@android:drawable/alert_dark_frame" />


</android.support.constraint.ConstraintLayout>

Answer 2

You have to create the constraints properly. You can check the documentation for more details.

Be aware that the tools annotated parameters are only for development preview. When you run your app the compiler removes those parameters.

<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/relativeLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="8dp"
    tools:layout_editor_absoluteY="81dp">

    <!-- Thumbnail Image -->
    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="87dp"
        android:layout_height="89dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="8dp" />

    <!-- Movie Title -->
    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/thumbnail"
        app:layout_constraintTop_toTopOf="@id/thumbnail"
        tools:layout_editor_absoluteX="90dp"
        tools:layout_editor_absoluteY="8dp" />

    <!-- Rating -->
    <TextView
        android:id="@+id/rating"
        android:layout_width="72dp"
        android:layout_height="21dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintStart_toEndOf="@id/thumbnail"
        app:layout_constraintTop_toBottomOf="@id/author"
        tools:layout_editor_absoluteX="90dp"
        tools:layout_editor_absoluteY="85dp" />

    <!-- Genre -->
    <TextView
        android:id="@+id/genre"
        android:layout_width="334dp"
        android:layout_height="28dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="114dp" />

    <!-- Release Year -->
    <TextView
        android:id="@+id/releaseYear"
        android:layout_width="129dp"
        android:layout_height="21dp"
        android:layout_marginStart="8dp"
        app:layout_constraintStart_toEndOf="@id/rating"
        tools:layout_editor_absoluteX="172dp"
        tools:layout_editor_absoluteY="85dp" />

    <ImageView
        android:id="@+id/btnBookOption"
        android:layout_width="24dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:focusable="false"
        app:layout_constraintBottom_toTopOf="@id/releaseYear"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/author"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:ignore="RtlHardcoded"
        tools:layout_editor_absoluteX="304dp"
        tools:layout_editor_absoluteY="39dp" />

    <TextView
        android:id="@+id/author"
        android:layout_width="0dp"
        android:layout_height="38dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toStartOf="@id/btnBookOption"
        app:layout_constraintStart_toEndOf="@id/thumbnail"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:layout_editor_absoluteX="90dp"
        tools:layout_editor_absoluteY="39dp" />

<android.support.constraint.ConstraintLayout>