макет ограничения не выглядит одинаково на другом экране

Question

Я хочу, чтобы мой макет поддерживал все размеры экрана, я использую макет ограничений, когда я запускаю его на разных эмуляторах, он не выглядит одинаково, я использую dp для размеров и полей, обратите внимание, что это приложение имеет 12 экраны, поэтому я не могу сделать макет для каждого размера экрана, я попытался установить ширину первых двух просмотров карт в wrap_content, но кажется, что он не работает [! [маленький экран] [1]] [1]

 <androidx.cardview.widget.CardView
        android:id="@+id/id_card_timeView"
        android:layout_width="326dp"
        android:layout_height="72dp"
        android:layout_marginStart="18dp"
        android:layout_marginTop="11dp"
        android:layout_marginEnd="16dp"
        app:cardBackgroundColor="#ff1972a0"
        app:cardCornerRadius="39dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cardView8">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="149dp"

            android:layout_marginTop="22dp"
            android:layout_marginEnd="145dp"
            android:layout_marginBottom="3dp"
            android:text="10"
            android:textColor="#fff"
            android:textSize="27sp" />

        <TextView
            android:layout_width="32dp"
            android:layout_height="58dp"
            android:layout_marginStart="90dp"

            android:layout_marginTop="22dp"
            android:layout_marginEnd="204dp"
            android:layout_marginBottom="3dp"
            android:text="09"
            android:textColor="#fff"
            android:textSize="27sp" />

        <TextView
            android:layout_width="159dp"
            android:layout_height="26dp"
            android:layout_marginStart="92dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="94dp"
            android:layout_marginBottom="46dp"
            android:maxLines="1"
            android:text="time until next session"
            android:textAllCaps="true"
            android:textColor="#fff"
            android:textSize="12sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="203dp"

            android:layout_marginTop="22dp"
            android:layout_marginEnd="91dp"
            android:layout_marginBottom="3dp"
            android:text="23"
            android:textColor="#fff"
            android:textSize="27sp" />
    </androidx.cardview.widget.CardView>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="62dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="278dp"
        android:text="OVERVIEW"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_card_timeView" />

    <View
        android:id="@+id/view7"
        android:layout_width="327dp"
        android:layout_height="1dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="3dp"
        android:layout_marginEnd="16dp"
        android:background="#707070ff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView13" />

    <View
        android:id="@+id/view6"
        android:layout_width="327dp"
        android:layout_height="1dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="3dp"
        android:layout_marginEnd="16dp"
        android:background="#707070ff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <View
        android:id="@+id/view8"
        android:layout_width="327dp"
        android:layout_height="1dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="3dp"
        android:layout_marginEnd="16dp"
        android:background="#707070ff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_reviews" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="17dp"
        android:layout_marginTop="27dp"
        android:layout_marginEnd="296dp"
        android:text="ORDERS"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_card_pagView" />

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_orderSmall"
        android:layout_width="wrap_content"
        android:layout_height="133dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_card_earning">

        <ImageView
            android:id="@+id/imageView9"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="101dp"
            android:layout_marginTop="12dp"
            android:background="@drawable/card_images"
            android:scaleType="center"
            android:src="@drawable/order_icon" />

        <TextView

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="67dp"
            android:layout_marginEnd="99dp"
            android:layout_marginBottom="40dp"
            android:text="ORDER"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp" />

        <TextView

            android:id="@+id/id_order_txt"
            android:layout_width="50dp"
            android:layout_height="49dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="18dp"
            android:layout_marginTop="81dp"
            android:layout_marginEnd="104dp"
            android:layout_marginBottom="3dp"
            android:text="44"
            android:textColor="#ff565659"
            android:textSize="30sp" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_pagView"

        android:layout_width="wrap_content"
        android:layout_height="133dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:background="@drawable/card_cut"
        app:layout_constraintEnd_toStartOf="@+id/id_card_orderSmall"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_sale_card">

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="101dp"
            android:layout_marginTop="12dp"
            android:layout_marginEnd="25dp"
            android:background="@drawable/card_images"
            android:scaleType="center"
            android:src="@drawable/pageview" />

        <TextView

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="67dp"
            android:layout_marginEnd="75dp"
            android:layout_marginBottom="40dp"
            android:text="PAGE VIEW"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp" />

        <TextView

            android:id="@+id/id_pageView_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="20dp"
            android:layout_marginTop="81dp"
            android:layout_marginEnd="85dp"
            android:layout_marginBottom="3dp"
            android:text="99k"
            android:textColor="#ff565659"
            android:textSize="30sp" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/id_sale_card"
        android:layout_width="wrap_content"
        android:layout_height="72dp"
        android:layout_marginStart="18dp"
        android:layout_marginTop="@dimen/_19sdp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toStartOf="@+id/id_card_earning"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view6">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="101dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="25dp"
            android:background="@drawable/card_images"
            android:scaleType="center"
            android:src="@drawable/sale" />

        <TextView
            android:id="@+id/id_sale_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="19dp"
            android:layout_marginTop="34dp"
            android:layout_marginEnd="98dp"
            android:layout_marginBottom="11dp"
            android:text="$0.00"
            android:textColor="#ff565659" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="18dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="109dp"
            android:layout_marginBottom="31dp"
            android:text="Sale"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp" />


    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_earning"
        android:layout_width="wrap_content"
        android:layout_height="72dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="@dimen/_19sdp"
        android:layout_marginEnd="18dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/id_sale_card"
        app:layout_constraintTop_toBottomOf="@+id/view6">


        <ImageView
            android:id="@+id/imageView8"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginStart="101dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/card_images"
            android:scaleType="center"
            android:src="@drawable/earning" />

        <TextView
            android:id="@+id/id_earning_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="19dp"
            android:layout_marginTop="34dp"
            android:layout_marginEnd="98dp"
            android:layout_marginBottom="11dp"
            android:text="$0.00"
            android:textColor="#ff565659" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="18dp"
            android:layout_marginTop="15dp"
            android:maxLines="1"
            android:text="Earning"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp" />

    </androidx.cardview.widget.CardView>

    <TextView
        android:id="@+id/id_reviews"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="19dp"
        android:layout_marginTop="22dp"
        android:layout_marginEnd="289dp"
        android:layout_marginBottom="10dp"

        android:text="REVIEWS"
        android:textAllCaps="true"
        app:layout_constraintBottom_toTopOf="@id/id_card_reviewBig"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_card_orderBig" />

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_orderBig"
        android:layout_width="326dp"
        android:layout_height="253dp"
        android:layout_marginStart="18dp"
        android:layout_marginTop="13dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.549"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view7">

        <TextView
            android:id="@+id/id_cardTxt_total"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="21dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Total"
            android:textColor="#ff565659" />

        <TextView
            android:id="@+id/completed_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="53dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="174dp"
            android:text="Completed"
            android:textColor="#ff1e9b37" />

        <TextView
            android:id="@+id/pending_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="85dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="110dp"
            android:text="Pending"
            android:textColor="#ff949494" />

        <TextView
            android:id="@+id/processing_txt"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="117dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Processing"
            android:textColor="#ff6c6ca7" />

        <TextView
            android:id="@+id/cancelled_txt"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="149dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Cancelled"
            android:textColor="#fff33d3d" />

        <TextView
            android:id="@+id/refunded_txt"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="181dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Refunded"
            android:textColor="#ffd6d61a" />

        <TextView
            android:id="@+id/onHold_txt"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="213dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="On Hold"
            android:textColor="#ffbf7f0f" />

        <TextView
            android:id="@+id/id_txt_total_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="21dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ff565659" />

        <TextView
            android:id="@+id/id_txt_completed_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="53dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ff1e9b37" />

        <TextView
            android:id="@+id/id_txt_pending_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="85dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ff949494" />

        <TextView
            android:id="@+id/id_txt_processing_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="117dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ff6c6ca7" />

        <TextView
            android:id="@+id/id_txt_cancelled_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="149dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#fff33d3d" />

        <TextView
            android:id="@+id/id_txt_refunded_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="181dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="206dp"
            android:text="100"
            android:textColor="#ffd6d61a" />

        <TextView
            android:id="@+id/id_txt_onHold_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="283dp"
            android:layout_marginTop="213dp"
            android:layout_marginEnd="10dp"

            android:text="100"
            android:textColor="#ffbf7f0f" />


    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/id_card_reviewBig"
        android:layout_width="326dp"
        android:layout_height="173dp"
        android:layout_marginStart="18dp"
        android:layout_marginTop="13dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="13dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.549"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view8">

        <TextView
            android:id="@+id/id_cardTxt_totalReviews"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="21dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="205dp"
            android:text="Total"
            android:textColor="#ff565659" />

        <TextView
            android:id="@+id/id_cardTxt_liveReviews"
            android:layout_width="wrap_content"
            android:layout_height="26dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginTop="53dp"
            android:layout_marginEnd="150dp"
            android:layout_marginBottom="174dp"
            android:text="Live"
            android:textColor="#ff565659" />



    </androidx.cardview.widget.CardView>




  [1]: https://i.stack.imgur.com/WsrEo.png

Answer 1

Это правда, что @Venky ответил, но в своем ответе я хочу объяснить, почему ваш макет не выглядит одинаково на всех устройствах:

• В Android необходимо учитывать количествоРазные размеры экрана при разработке приложения для Android.
• Разные телефоны получили разные размеры экрана, в вашем макете вы используете фиксированный размер для вашего представления (например, фиксированный размер android: layout_width = "155dp") и результатэто то, что может хорошо выглядеть на одном экране (экран предварительного просмотра вашей андроид-студии), но не будет хорошо смотреться на другом экране (ваш реальный телефон).

Простое решение будет сделать ширину вашеговыглядит как match_parent (таким образом, он будет распространяться по всему экрану), а высота ваших просмотров - wrap_content

примерно так:

 <androidx.cardview.widget.CardView
        android:id="@+id/id_sale_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toStartOf="@+id/id_card_earning"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view6">

<androidx.cardview.widget.CardView
        android:id="@+id/id_card_earning"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view6">

Редактировать:

Это мой новый макет с использованием Guidelines :

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
  android:layout_height="match_parent">


<android.support.v7.widget.CardView
    android:id="@+id/id_card_timeView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    app:cardBackgroundColor="#ff1972a0"
    app:cardCornerRadius="39dp"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="149dp"

        android:layout_marginTop="22dp"
        android:layout_marginEnd="145dp"
        android:layout_marginBottom="3dp"
        android:text="10"
        android:textColor="#fff"
        android:textSize="27sp" />

    <TextView
        android:layout_width="32dp"
        android:layout_height="58dp"
        android:layout_marginStart="90dp"

        android:layout_marginTop="22dp"
        android:layout_marginEnd="204dp"
        android:layout_marginBottom="3dp"
        android:text="09"
        android:textColor="#fff"
        android:textSize="27sp" />

    <TextView
        android:layout_width="159dp"
        android:layout_height="26dp"
        android:layout_marginStart="92dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="94dp"
        android:layout_marginBottom="46dp"
        android:maxLines="1"
        android:text="time until next session"
        android:textAllCaps="true"
        android:textColor="#fff"
        android:textSize="12sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="203dp"

        android:layout_marginTop="22dp"
        android:layout_marginEnd="91dp"
        android:layout_marginBottom="3dp"
        android:text="23"
        android:textColor="#fff"
        android:textSize="27sp" />
</android.support.v7.widget.CardView>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="OVERVIEW"
    android:textAllCaps="true"
    android:textColor="#ff565659"
    android:textSize="12sp"
    app:layout_constraintBottom_toTopOf="@+id/id_sale_card"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/id_card_timeView" />

<View
    android:id="@+id/view7"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:background="#707070ff"
    app:layout_constraintBottom_toTopOf="@+id/id_card_orderBig"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/textView13" />

<View
    android:id="@+id/view6"
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:background="#707070ff"
    app:layout_constraintBottom_toTopOf="@+id/id_card_pagView"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/id_sale_card" />

<TextView
    android:id="@+id/textView13"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="ORDERS"
    android:textAllCaps="true"
    android:textColor="#ff565659"
    android:textSize="12sp"
    app:layout_constraintBottom_toTopOf="@+id/view7"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/id_card_pagView" />

<android.support.v7.widget.CardView
    android:id="@+id/id_card_orderSmall"
    android:layout_width="0dp"
    android:layout_height="0dp"

    app:layout_constraintBottom_toTopOf="@+id/view7"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/id_card_pagView"
    app:layout_constraintTop_toBottomOf="@+id/id_card_earning">

    <ImageView
        android:id="@+id/imageView9"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="101dp"
        android:layout_marginTop="12dp"
        android:background="@drawable/card_images"
        android:scaleType="center"
        android:src="@drawable/order_icon" />

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="16dp"
        android:layout_marginTop="67dp"
        android:layout_marginEnd="99dp"
        android:layout_marginBottom="40dp"
        android:text="ORDER"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp" />

    <TextView

        android:id="@+id/id_order_txt"
        android:layout_width="50dp"
        android:layout_height="49dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="18dp"
        android:layout_marginTop="81dp"
        android:layout_marginEnd="104dp"
        android:layout_marginBottom="3dp"
        android:text="44"
        android:textColor="#ff565659"
        android:textSize="30sp" />
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/id_card_pagView"

    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/card_cut"
    app:layout_constraintBottom_toTopOf="@+id/textView13"
    app:layout_constraintEnd_toStartOf="@+id/id_card_orderSmall"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/view6">

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="101dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="25dp"
        android:background="@drawable/card_images"
        android:scaleType="center"
        android:src="@drawable/pageview" />

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="16dp"
        android:layout_marginTop="67dp"
        android:layout_marginEnd="75dp"
        android:layout_marginBottom="40dp"
        android:text="PAGE VIEW"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp" />

    <TextView

        android:id="@+id/id_pageView_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="81dp"
        android:layout_marginEnd="85dp"
        android:layout_marginBottom="3dp"
        android:text="99k"
        android:textColor="#ff565659"
        android:textSize="30sp" />
</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/id_sale_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/view6"
    app:layout_constraintEnd_toStartOf="@+id/id_card_earning"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/textView2">

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="101dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="25dp"
        android:background="@drawable/card_images"
        android:scaleType="center"
        android:src="@drawable/sale" />

    <TextView
        android:id="@+id/id_sale_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="19dp"
        android:layout_marginTop="34dp"
        android:layout_marginEnd="98dp"
        android:layout_marginBottom="11dp"
        android:text="$0.00"
        android:textColor="#ff565659" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="18dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="109dp"
        android:layout_marginBottom="31dp"
        android:text="Sale"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp" />


</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/id_card_earning"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/id_card_orderSmall"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/id_sale_card"
    app:layout_constraintTop_toBottomOf="@+id/id_card_timeView">


    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="101dp"
        android:layout_marginTop="15dp"
        android:background="@drawable/card_images"
        android:scaleType="center"
        android:src="@drawable/earning" />

    <TextView
        android:id="@+id/id_earning_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="19dp"
        android:layout_marginTop="34dp"
        android:layout_marginEnd="98dp"
        android:layout_marginBottom="11dp"
        android:text="$0.00"
        android:textColor="#ff565659" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="18dp"
        android:layout_marginTop="15dp"
        android:maxLines="1"
        android:text="Earning"
        android:textAllCaps="true"
        android:textColor="#ff565659"
        android:textSize="12sp" />

</android.support.v7.widget.CardView>

<android.support.v7.widget.CardView
    android:id="@+id/id_card_orderBig"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/id_card_timeView"
    app:layout_constraintStart_toStartOf="@+id/id_card_timeView"
    app:layout_constraintTop_toBottomOf="@+id/view7">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/completed_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Completed"
            android:textColor="#ff1e9b37"
            app:layout_constraintBottom_toTopOf="@+id/processing_txt"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/onHold_txt" />

        <TextView
            android:id="@+id/pending_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Pending"
            android:textColor="#ff949494"
            app:layout_constraintBottom_toTopOf="@+id/refunded_txt"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/cancelled_txt" />

        <TextView
            android:id="@+id/processing_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Processing"
            android:textColor="#ff6c6ca7"
            app:layout_constraintBottom_toTopOf="@+id/cancelled_txt"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/completed_txt" />

        <TextView
            android:id="@+id/cancelled_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Cancelled"
            android:textColor="#fff33d3d"
            app:layout_constraintBottom_toTopOf="@+id/pending_txt"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/processing_txt" />

        <TextView
            android:id="@+id/refunded_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="Refunded"
            android:textColor="#ffd6d61a"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/onHold_txt"
            app:layout_constraintTop_toBottomOf="@+id/pending_txt" />

        <TextView
            android:id="@+id/onHold_txt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:text="On Hold"
            android:textColor="#ffbf7f0f"
            app:layout_constraintBottom_toTopOf="@+id/completed_txt"
            app:layout_constraintEnd_toStartOf="@+id/guideline7"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/id_txt_total_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:text="100"
            android:textColor="#ff565659"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_processing_bigCard"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline7"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/id_txt_completed_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#ff1e9b37"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_pending_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_pending_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_pending_bigCard" />

        <TextView
            android:id="@+id/id_txt_pending_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#ff949494"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_completed_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_refunded_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_refunded_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_refunded_bigCard" />

        <TextView
            android:id="@+id/id_txt_processing_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#ff6c6ca7"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_cancelled_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_total_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_total_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_total_bigCard" />

        <TextView
            android:id="@+id/id_txt_cancelled_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#fff33d3d"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_onHold_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_total_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_total_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_processing_bigCard" />

        <TextView
            android:id="@+id/id_txt_refunded_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="100"
            android:textColor="#ffd6d61a"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_pending_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_total_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_total_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_onHold_bigCard" />

        <TextView
            android:id="@+id/id_txt_onHold_bigCard"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"

            android:text="100"
            android:textColor="#ffbf7f0f"
            app:layout_constraintBottom_toTopOf="@+id/id_txt_refunded_bigCard"
            app:layout_constraintEnd_toEndOf="@+id/id_txt_total_bigCard"
            app:layout_constraintStart_toStartOf="@+id/id_txt_total_bigCard"
            app:layout_constraintTop_toBottomOf="@+id/id_txt_cancelled_bigCard" />

        <android.support.constraint.Guideline
            android:id="@+id/guideline7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="163dp"
            app:layout_constraintGuide_percent=".56" />


        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Он такой, как он будет выглядеть:

Answer 2

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff5f5f5">
  <androidx.cardview.widget.CardView
            android:id="@+id/id_sale_card"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="18dp"
            android:layout_marginTop="19dp"
            android:layout_marginEnd="16dp"
            app:layout_constraintEnd_toStartOf="@+id/id_card_earning"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view6">
<androidx.cardview.widget.CardView
            android:id="@+id/id_card_earning"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="189dp"
            android:layout_marginTop="19dp"
            android:layout_marginEnd="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view6">  

Сохраняйте пользовательский интерфейс таким же образом и используйте ниже libs

Intuit SSP Intuit SDP