Add Constraints to ConstraintLayout - Android Studio - kotlin

Question

I've been trying to use constraints with a ConstraintLayout with an ID of card_details to position it on the screen, but the constraints are not working, and the IDE is not recommending them as available attributes as well.
Here's the code I'm using.
<com.google.android.material.card.MaterialCardView
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/product_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/product_image"
android:layout_width="match_parent"
android:layout_height="280dp"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ImageContrastCheck"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/card_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/product_image">
<TextView
android:id="#+id/product_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/product_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/product_title" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
Here's how they look like:
How the constraints look
The highlighted item should be placed beneath the image with these constraints, but they don't for some reason.
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/product_image"
Any idea why? Help is appreciated.
Thanks.

Answer 1

Because the ImageView is not inside the ConstraintLayout. You can only put constraints with respect to other views inside that ConstraintLayout. Try moving the ImageView inside the ConstraintLayout