Making ImageView take up size of container

Question

I'm trying to create the following layout:

Where after a certain device width, the container will only be a certain width and will not increase in size anymore, here it is set at 400dp. If the device is less than 400dp, then it will get the width of the device instead. The imageviews inside, should be half the width of the container. The container should also be centered after 400dp.

My current code doesn't center the container and it chops off the second image and the text on the right. How can I fix this?

<?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="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top|center"
    android:maxWidth="400dp">

    <androidx.cardview.widget.CardView
        android:id="@+id/postCard"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/postContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/postAuthorAvatar"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/landscape"

                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/postAuthorUsername"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="\@username"
                app:layout_constraintBottom_toBottomOf="@id/postAuthorAvatar"
                app:layout_constraintLeft_toRightOf="@id/postAuthorAvatar"
                app:layout_constraintTop_toTopOf="@id/postAuthorAvatar" />

            <TextView
                android:id="@+id/postDateTime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="21 Sept 2021"
                app:layout_constraintBottom_toBottomOf="@id/postAuthorAvatar"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="@id/postAuthorAvatar" />

            <TextView
                android:id="@+id/postTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@id/postAuthorAvatar" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@id/postTitle">

                <ImageView
                    android:id="@+id/postImgA"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:paddingRight="2.5dp"
                    android:adjustViewBounds="true"
                    android:scaleType="centerInside"
                    android:src="@drawable/landscape"/>

                <ImageView
                    android:id="@+id/postImgB"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:paddingLeft="2.5dp"
                    android:adjustViewBounds="true"
                    android:scaleType="centerInside"
                    android:src="@drawable/landscape"/>
            </LinearLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Use a Guideline in the project which runs through the middle of the layout

Code Snippet

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5"/>

<ImageView
                    android:id="@+id/postImgA"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                     app:layout_constraintEnd_toEndOf="parent"
                    android:layoutMargin ="16dp"
                  app:layout_constraintStart_toStartOf="@id/guideline"
                   android:scaleType="centerInside"
                    android:src="@drawable/landscape"/>


                    <ImageView
                    android:id="@+id/postImgB"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintStart_toStartOf="parent"
                   app:layout_constraintEnd_toEndOf="@id/guideline"
                   android:layoutMargin ="16dp"
                    android:adjustViewBounds="true"
                    android:scaleType="centerInside"
                    android:src="@drawable/landscape"/>

then attach the images to the guideline and then to the parent give a margin to each. Use "0dp" or match constraints for it to mimic the image.