Why does my cardview go over the whole width in Android Studio?

Question

Im using this cardview (blue) and another one in an recyclerview to display messages sent and received.

But the cardview (blue) goes over the whole width as you can see int the picture and I cant stop 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="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:maxWidth="200dp"
        app:cardBackgroundColor="#147EFB"
        app:cardCornerRadius="25dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/OutgoingSender"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="90dp"
                android:text="No sender available"
                android:textColor="#FFFFFFFF"
                android:textStyle="bold"
                app:layout_constraintEnd_toStartOf="@+id/OutgoingDate"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/OutgoingDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="15dp"
                android:text="No date"
                android:textColor="#FFFFFFFF"
                android:textStyle="italic"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/OutgoingContent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:layout_marginBottom="15dp"
                android:text="No message content available"
                android:textColor="#FFFFFFFF"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="@+id/OutgoingSender"
                app:layout_constraintTop_toBottomOf="@+id/OutgoingSender" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

I tried to change the root elements width, and to restrict the maxWidth of the cardview but neither helped.

Answer 1

try following code snippet. It will move whole card view to the right and wrap the content around it. I see unnecessary usage of ConstraintLayout as a root. CardView itself can serve as parent and this will also optimize the layout rendering a bit. I hope this helps

<?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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp"
    android:layout_gravity="end">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/OutgoingSender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="90dp"
            android:text="No sender available"
            android:textColor="#FFFFFFFF"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@+id/OutgoingDate"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/OutgoingDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="15dp"
            android:text="No date"
            android:textColor="#FFFFFFFF"
            android:textStyle="italic"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/OutgoingContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:layout_marginBottom="15dp"
            android:text="No message content available"
            android:textColor="#FFFFFFFF"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/OutgoingSender"
            app:layout_constraintTop_toBottomOf="@+id/OutgoingSender" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>