How to use constraint layout so the card views are always in one place?

Question

I am using a constraint layout and card views in it, but on different screen sizes the card views are not in the same place. I thought the idea of constraint is that you only have to arrange the card view for one time and it automatically aligns to the different device sizes. The first picture shows the screen I want to have on every device size and the other picture shows you the result of a different size where the CardViews are obviously not in the right place.

I already tried using guidelines but it doesn't help. Or is it better to use another Layout like RelativeLayout? But what's then the point of a ConstraintLayout?

Design as it should be

Result with different size

Thank you for your help!

Here is my XML:

    <?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="match_parent"
    tools:context=".spielen_uebersicht">

    <TextView
        android:id="@+id/spieler_suche"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:text="Spieler suchen:"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.484"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView3"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_margin="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/spieler_suche">

        <SearchView
            android:id="@+id/searchView_spieler_suchen"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:clickable="true"
            android:focusable="true"
            android:gravity="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:queryBackground="@android:color/transparent" />


    </androidx.cardview.widget.CardView>


    <androidx.cardview.widget.CardView
        android:id="@+id/zufälliger_spieler"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="36dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cardView3"
        app:layout_constraintVertical_bias="0.198">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="Zufälliger Spieler"
            android:textAlignment="center"
            android:textSize="20sp" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:src="@mipmap/zufaelliger_spieler" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintBottom_toBottomOf="@+id/zufälliger_spieler"
        app:layout_constraintStart_toEndOf="@+id/zufälliger_spieler"
        app:layout_constraintTop_toBottomOf="@+id/cardView3"
        app:layout_constraintVertical_bias="1.0">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="Freunde einladen"
            android:textAlignment="center"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:src="@mipmap/freunde_einladen" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardViewFreundesübersicht"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="36dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintStart_toEndOf="@+id/cardView2"
        app:layout_constraintTop_toBottomOf="@+id/cardView">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp"
            android:text="Freundes-\nübersicht"
            android:textAlignment="center"
            android:textSize="20sp" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:src="@mipmap/freundes_uebersicht" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginStart="36dp"
        android:layout_marginTop="36dp"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="20dp"
        app:cardElevation="7dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/zufälliger_spieler">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="5dp"
            android:text="Anfragen"
            android:textAlignment="center"
            android:textSize="20sp" />

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_marginTop="25dp"
            android:src="@mipmap/freundes_anfragen" />

    </androidx.cardview.widget.CardView>


</androidx.constraintlayout.widget.ConstraintLayout>```

Answer 1

You don't see your layout the same way on different phones because your cardviews dimensions are a fixed size , why is it bad?

Different phones got different screen size , in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).

How to fix it:

You can just use app:layout_constraintWidth_percent and app:layout_constraintHeight_percent on your cardviews to give the size in precents according to the screen.

Something like 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="match_parent"
  android:layout_height="match_parent">


<Button
    android:id="@+id/button7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="Button"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"
    app:layout_constraintHeight_percent=".5"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/button7" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_begin="20dp"
    app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>

In this example, I have 4 buttons that represent your cardViews.
They are all equal in size and will be responsive to all screen sizes.

This layout will look like this (the arrow points to the guideline, to make it more understandable):

Answer 2

For Future Visitors, Chains are the magical word when trying to simulate Linear layout form. using horizontal chains with vertical ones along with using dynamic View sizes as Tamir Abutbul mentioned should be the best practice.

<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="match_parent">

<TextView
    android:id="@+id/textView24"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:gravity="center"
    android:text="Title"
    android:textColor="@android:color/black"
    android:textSize="?android:attr/actionBarSize"
    android:textStyle="bold"
    app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableBottom="@android:drawable/ic_media_play"
    android:text="text 4"
    android:textSize="24sp"
    android:padding="50dp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/btn3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/btn3"
    app:layout_constraintTop_toTopOf="@+id/btn3" />

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableBottom="@android:drawable/ic_media_play"
    android:text="text 2"
    android:textStyle="bold"
    android:textSize="24sp"
    android:padding="50dp"
    app:layout_constraintBottom_toBottomOf="@+id/btn4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/btn4"
    app:layout_constraintTop_toTopOf="@+id/btn4" />

<com.google.android.material.button.MaterialButton

    android:id="@+id/btn3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableBottom="@android:drawable/ic_media_play"
    android:text="text 3"
    android:textStyle="bold"
    android:textSize="24sp"
    android:padding="50dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/btn4"
    app:layout_constraintEnd_toStartOf="@+id/btn1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/btn4" />

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableBottom="@android:drawable/ic_media_play"
    android:text="text 1"
    android:textStyle="bold"
    android:textSize="24sp"
    android:padding="50dp"
    app:layout_constraintBottom_toTopOf="@+id/btn3"
    app:layout_constraintEnd_toStartOf="@+id/btn2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView24"/></androidx.constraintlayout.widget.ConstraintLayout>

Best of luck ;)