title: Responsive cards laid out in a Grid
body: <p>I am trying to find the best possible way to create responsive grid layout using Layout XML in Android Studio.</p>
  
  <p>Let me first explain the design.
  As you can see below, I would like to develop an interface that will contain 10 cards.
  As the size of device changes, I would like the cards to shrink in height and then respectively, the contest inside the cards should also shrink (based on constraints I can put for them).</p>
  
  <p><a href="https://i.stack.imgur.com/2mAa9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2mAa9.png" alt="enter image description here"></a></p>
  
  <p>So I made a few attempts.
  First, I tried Constraint Layout (as described below).
  This resulted in the cards height being defined by the content inside the cards, hence the card size did not change when viewed on smaller device.</p>
  
  <p><a href="https://i.stack.imgur.com/EaGmm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EaGmm.png" alt="enter image description here"></a></p>
  
  <p>Then I tried GridLayout.
  Once again, this resulted in card size being determined by the content and the layout could not scale dynamically.</p>
  
  <p>So, I am trying to find out what I might try next so that I can get the desired results.
  Maybe using Cards is a bad idea?
  Should I be using Linear Layout instead?
  Are there any examples out there that I can refer?
  or
  Going with Different layouts for different resolutions is the option?</p>
  
  <p>Too many questions at this point.</p>
  
  <h1>UPDATE:</h1>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;androidx.constraintlayout.widget.Guideline
      android:id="@+id/midGuide"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintGuide_percent="0.50121653"
      app:layout_constraintStart_toStartOf="parent" /&gt;
  
  &lt;TextView
      android:id="@+id/l1_title"
      android:layout_width="0dp"
      android:layout_height="85dp"
      android:layout_rowWeight="1"
      android:layout_columnWeight="1"
      android:layout_marginStart="20dp"
      android:layout_marginTop="20dp"
      android:fontFamily="@font/anton"
      android:paddingStart="0dp"
      android:text="1"
      android:textColor="#FFFFFF"
      android:textSize="50sp"
      app:autoSizeTextType="uniform"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" /&gt;
  
  &lt;TextView
      android:id="@+id/bestScoretext"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:fontFamily="sans-serif-medium"
      android:text="Best Score"
      android:textAlignment="textEnd"
      android:textColor="#FFFFFF"
      android:textSize="14sp"
      app:autoSizeTextType="uniform"
      app:layout_constraintBottom_toTopOf="@+id/bestScore"
      app:layout_constraintEnd_toEndOf="@+id/bestScore" /&gt;
  
  &lt;TextView
      android:id="@+id/bestScore"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginEnd="20dp"
      android:fontFamily="sans-serif-medium"
      android:text="1.9pt"
      android:textAlignment="viewEnd"
      android:textColor="#FFFFFF"
      android:textSize="38sp"
      app:autoSizeTextType="uniform"
      app:layout_constraintBaseline_toBaselineOf="@+id/l1_title"
      app:layout_constraintEnd_toEndOf="parent" /&gt;
  
  &lt;ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginStart="20dp"
      android:layout_marginTop="30dp"
      android:layout_marginBottom="20dp"
      android:background="#FFFFFF"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/l1c6"
      app:srcCompat="?attr/homeAsUpIndicator" /&gt;
  
  &lt;!-- Card 1 --&gt;
  &lt;androidx.cardview.widget.CardView
      android:id="@+id/l1c0"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="20dp"
      android:layout_marginEnd="5dp"
      android:layout_marginTop="10dp"
      android:padding="5dp"
      app:cardBackgroundColor="@color/bgHome"
      app:cardCornerRadius="12dp"
      app:cardElevation="0dp"
      app:cardMaxElevation="0dp"
      app:layout_constraintEnd_toStartOf="@+id/midGuide"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/l1_title"
      app:layout_constraintBottom_toTopOf="@+id/l1c2"&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/rounded"
          android:padding="10dp"&gt;
  
          &lt;TextView
              android:id="@+id/subLevel0"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text=".0"
              android:textColor="@color/cardview_light_background"
              android:textSize="30sp"
              app:autoSizeTextType="uniform"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/subScore0"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="3.8pt"
              android:textColor="@color/yellow"
              android:textSize="20sp"
              android:textStyle="bold"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toStartOf="@+id/c0Guide"
              app:layout_constraintStart_toStartOf="@+id/subLevel0" /&gt;
  
          &lt;ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_toRightOf="@+id/subLevel0"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintHorizontal_bias="0.81"
              app:layout_constraintStart_toEndOf="@+id/c0Guide"
              app:layout_constraintTop_toTopOf="parent"
              app:srcCompat="@drawable/ic_1_0_icon" /&gt;
  
          &lt;androidx.constraintlayout.widget.Guideline
              android:id="@+id/c0Guide"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginStart="25dp"
              android:layout_marginEnd="75dp"
              android:orientation="vertical"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintGuide_begin="51dp"
              app:layout_constraintStart_toStartOf="parent" /&gt;
  
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
  &lt;/androidx.cardview.widget.CardView&gt;
  
  
  &lt;!-- Card 2 --&gt;
  &lt;androidx.cardview.widget.CardView
  
      android:id="@+id/l1c1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="5dp"
      android:layout_marginEnd="20dp"
      android:padding="5dp"
      app:cardBackgroundColor="@color/bgHome"
      app:cardCornerRadius="12dp"
      app:cardElevation="0dp"
      app:cardMaxElevation="0dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="@+id/midGuide"
      app:layout_constraintTop_toTopOf="@+id/l1c0"&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/rounded"
          android:padding="10dp"&gt;
  
          &lt;TextView
              android:id="@+id/subLevel1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text=".1"
              android:textColor="@color/cardview_light_background"
              android:textSize="30sp"
              app:autoSizeTextType="uniform"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/subScore1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="4.2pt"
              android:textColor="@color/yellow"
              android:textSize="20sp"
              android:textStyle="bold"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintStart_toStartOf="@+id/subLevel1" /&gt;
  
          &lt;ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_toRightOf="@+id/subLevel1"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintHorizontal_bias="0.81"
              app:layout_constraintStart_toEndOf="@+id/c1Guide"
              app:layout_constraintTop_toTopOf="parent"
              app:srcCompat="@drawable/ic_1_1_icon" /&gt;
  
          &lt;androidx.constraintlayout.widget.Guideline
              android:id="@+id/c1Guide"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginStart="25dp"
              android:layout_marginEnd="75dp"
              android:orientation="vertical"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintGuide_begin="51dp"
              app:layout_constraintStart_toStartOf="parent" /&gt;
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
  &lt;/androidx.cardview.widget.CardView&gt;
  
  &lt;!-- Card 3 --&gt;
  &lt;androidx.cardview.widget.CardView
      android:id="@+id/l1c2"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="20dp"
      android:layout_marginEnd="5dp"
      android:layout_marginTop="10dp"
      android:padding="5dp"
      app:cardBackgroundColor="@color/bgHome"
      app:cardCornerRadius="12dp"
      app:cardElevation="0dp"
      app:cardMaxElevation="0dp"
      app:layout_constraintEnd_toStartOf="@+id/midGuide"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/l1c0"
      app:layout_constraintBottom_toTopOf="@+id/l1c4"&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/rounded"
          android:padding="10dp"&gt;
  
          &lt;TextView
              android:id="@+id/subLevel2"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text=".2"
              android:textColor="@color/cardview_light_background"
              android:textSize="30sp"
              app:autoSizeTextType="uniform"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/subScore2"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="3.8pt"
              android:textColor="@color/yellow"
              android:textSize="20sp"
              android:textStyle="bold"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toStartOf="@+id/c2Guide"
              app:layout_constraintStart_toStartOf="@+id/subLevel2" /&gt;
  
          &lt;ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_toRightOf="@+id/subLevel2"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintHorizontal_bias="0.81"
              app:layout_constraintStart_toEndOf="@+id/c2Guide"
              app:layout_constraintTop_toTopOf="parent"
              app:srcCompat="@drawable/ic_1_2_icon" /&gt;
  
          &lt;androidx.constraintlayout.widget.Guideline
              android:id="@+id/c2Guide"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginStart="25dp"
              android:layout_marginEnd="75dp"
              android:orientation="vertical"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintGuide_begin="51dp"
              app:layout_constraintStart_toStartOf="parent" /&gt;
  
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
  &lt;/androidx.cardview.widget.CardView&gt;
  
  &lt;!-- Card 4 --&gt;
  &lt;androidx.cardview.widget.CardView
  
      android:id="@+id/l1c3"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="5dp"
      android:layout_marginEnd="20dp"
      android:padding="5dp"
      app:cardBackgroundColor="@color/bgHome"
      app:cardCornerRadius="12dp"
      app:cardElevation="0dp"
      app:cardMaxElevation="0dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="@+id/midGuide"
      app:layout_constraintTop_toTopOf="@+id/l1c2"&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/rounded"
          android:padding="10dp"&gt;
  
          &lt;TextView
              android:id="@+id/subLevel3"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text=".3"
              android:textColor="@color/cardview_light_background"
              android:textSize="30sp"
              app:autoSizeTextType="uniform"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/subScore3"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="4.2pt"
              android:textColor="@color/yellow"
              android:textSize="20sp"
              android:textStyle="bold"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintStart_toStartOf="@+id/subLevel3" /&gt;
  
          &lt;ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_toRightOf="@+id/subLevel3"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintHorizontal_bias="0.81"
              app:layout_constraintStart_toEndOf="@+id/c3Guide"
              app:layout_constraintTop_toTopOf="parent"
              app:srcCompat="@drawable/ic_1_3_icon" /&gt;
  
          &lt;androidx.constraintlayout.widget.Guideline
              android:id="@+id/c3Guide"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginStart="25dp"
              android:layout_marginEnd="75dp"
              android:orientation="vertical"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintGuide_begin="51dp"
              app:layout_constraintStart_toStartOf="parent" /&gt;
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
  &lt;/androidx.cardview.widget.CardView&gt;
  
  &lt;!-- Card 5 --&gt;
  &lt;androidx.cardview.widget.CardView
      android:id="@+id/l1c4"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="20dp"
      android:layout_marginEnd="5dp"
      android:layout_marginTop="10dp"
      android:padding="5dp"
      app:cardBackgroundColor="@color/bgHome"
      app:cardCornerRadius="12dp"
      app:cardElevation="0dp"
      app:cardMaxElevation="0dp"
      app:layout_constraintEnd_toStartOf="@+id/midGuide"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/l1c2"
      app:layout_constraintBottom_toTopOf="@+id/l1c6"&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/rounded"
          android:padding="10dp"&gt;
  
          &lt;TextView
              android:id="@+id/subLevel4"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text=".4"
              android:textColor="@color/cardview_light_background"
              android:textSize="30sp"
              app:autoSizeTextType="uniform"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/subScore4"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="3.8pt"
              android:textColor="@color/yellow"
              android:textSize="20sp"
              android:textStyle="bold"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toStartOf="@+id/c4Guide"
              app:layout_constraintStart_toStartOf="@+id/subLevel4" /&gt;
  
          &lt;ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_toRightOf="@+id/subLevel4"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintHorizontal_bias="0.81"
              app:layout_constraintStart_toEndOf="@+id/c4Guide"
              app:layout_constraintTop_toTopOf="parent"
              app:srcCompat="@drawable/ic_1_0_icon" /&gt;
  
          &lt;androidx.constraintlayout.widget.Guideline
              android:id="@+id/c4Guide"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginStart="25dp"
              android:layout_marginEnd="75dp"
              android:orientation="vertical"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintGuide_begin="51dp"
              app:layout_constraintStart_toStartOf="parent" /&gt;
  
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
  &lt;/androidx.cardview.widget.CardView&gt;
  
  &lt;!-- Card 6 --&gt;
  &lt;androidx.cardview.widget.CardView
  
      android:id="@+id/l1c5"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="5dp"
      android:layout_marginEnd="20dp"
      android:padding="5dp"
      app:cardBackgroundColor="@color/bgHome"
      app:cardCornerRadius="12dp"
      app:cardElevation="0dp"
      app:cardMaxElevation="0dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="@+id/midGuide"
      app:layout_constraintTop_toTopOf="@+id/l1c4"&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/rounded"
          android:padding="10dp"&gt;
  
          &lt;TextView
              android:id="@+id/subLevel5"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text=".5"
              android:textColor="@color/cardview_light_background"
              android:textSize="30sp"
              app:autoSizeTextType="uniform"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/subScore5"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="4.2pt"
              android:textColor="@color/yellow"
              android:textSize="20sp"
              android:textStyle="bold"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintStart_toStartOf="@+id/subLevel5" /&gt;
  
          &lt;ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_toRightOf="@+id/subLevel5"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintHorizontal_bias="0.81"
              app:layout_constraintStart_toEndOf="@+id/c5Guide"
              app:layout_constraintTop_toTopOf="parent"
              app:srcCompat="@drawable/ic_1_3_icon" /&gt;
  
          &lt;androidx.constraintlayout.widget.Guideline
              android:id="@+id/c5Guide"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginStart="25dp"
              android:layout_marginEnd="75dp"
              android:orientation="vertical"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintGuide_begin="51dp"
              app:layout_constraintStart_toStartOf="parent" /&gt;
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
  &lt;/androidx.cardview.widget.CardView&gt;
  
  &lt;!-- Card 7 --&gt;
  &lt;androidx.cardview.widget.CardView
      android:id="@+id/l1c6"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="20dp"
      android:layout_marginEnd="5dp"
      android:layout_marginTop="10dp"
      android:padding="5dp"
      app:cardBackgroundColor="@color/bgHome"
      app:cardCornerRadius="12dp"
      app:cardElevation="0dp"
      app:cardMaxElevation="0dp"
      app:layout_constraintEnd_toStartOf="@+id/midGuide"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/l1c4"
      app:layout_constraintBottom_toTopOf="@+id/l1c8"&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/rounded"
          android:padding="10dp"&gt;
  
          &lt;TextView
              android:id="@+id/subLevel6"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text=".6"
              android:textColor="@color/cardview_light_background"
              android:textSize="30sp"
              app:autoSizeTextType="uniform"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/subScore6"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="3.8pt"
              android:textColor="@color/yellow"
              android:textSize="20sp"
              android:textStyle="bold"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toStartOf="@+id/c6Guide"
              app:layout_constraintStart_toStartOf="@+id/subLevel6" /&gt;
  
          &lt;ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_toRightOf="@+id/subLevel6"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintHorizontal_bias="0.81"
              app:layout_constraintStart_toEndOf="@+id/c6Guide"
              app:layout_constraintTop_toTopOf="parent"
              app:srcCompat="@drawable/ic_1_0_icon" /&gt;
  
          &lt;androidx.constraintlayout.widget.Guideline
              android:id="@+id/c6Guide"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginStart="25dp"
              android:layout_marginEnd="75dp"
              android:orientation="vertical"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintGuide_begin="51dp"
              app:layout_constraintStart_toStartOf="parent" /&gt;
  
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
  &lt;/androidx.cardview.widget.CardView&gt;
  
  &lt;!-- Card 8 --&gt;
  &lt;androidx.cardview.widget.CardView
  
      android:id="@+id/l1c7"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginStart="5dp"
      android:layout_marginEnd="20dp"
      android:padding="5dp"
      app:cardBackgroundColor="@color/bgHome"
      app:cardCornerRadius="12dp"
      app:cardElevation="0dp"
      app:cardMaxElevation="0dp"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="@+id/midGuide"
      app:layout_constraintTop_toTopOf="@+id/l1c6"&gt;
  
      &lt;androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/rounded"
          android:padding="10dp"&gt;
  
          &lt;TextView
              android:id="@+id/subLevel7"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text=".7"
              android:textColor="@color/cardview_light_background"
              android:textSize="30sp"
              app:autoSizeTextType="uniform"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent" /&gt;
  
          &lt;TextView
              android:id="@+id/subScore7"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="4.2pt"
              android:textColor="@color/yellow"
              android:textSize="20sp"
              android:textStyle="bold"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintStart_toStartOf="@+id/subLevel7" /&gt;
  
          &lt;ImageView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_toRightOf="@+id/subLevel7"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintHorizontal_bias="0.81"
              app:layout_constraintStart_toEndOf="@+id/c5Guide"
              app:layout_constraintTop_toTopOf="parent"
              app:srcCompat="@drawable/ic_1_3_icon" /&gt;
  
          &lt;androidx.constraintlayout.widget.Guideline
              android:id="@+id/c7Guide"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginStart="25dp"
              android:layout_marginEnd="75dp"
              android:orientation="vertical"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintGuide_begin="51dp"
              app:layout_constraintStart_toStartOf="parent" /&gt;
  
      &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  
  &lt;/androidx.cardview.widget.CardView&gt;
  
  
  &lt;!-- Cards end --&gt;
  
  &lt;androidx.constraintlayout.widget.Barrier
      android:id="@+id/barrier"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:barrierDirection="left" /&gt;
  
  
  &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  </code></pre>