title: Android Studio Constraint Layout pushing Images offscreen
body: <p>So I'm using constraint layout to try and have 4 icon images followed by text at the bottom of my page. Here is an example of the design <a href="https://imgur.com/a/6BEHL9N" rel="nofollow noreferrer">Design</a></p>
  
  <p>When I try to run the app though it shifts the layout offscreen. <a href="https://imgur.com/a/kcT3uIu" rel="nofollow noreferrer">Image</a></p>
  
  <p>I have everything constrained together, and I'll attach an example <a href="https://imgur.com/a/yAjExc3" rel="nofollow noreferrer">Constraints</a></p>
  
  <p>Here is the XML design code</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;FrameLayout 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=".HomeFragment"&gt;
  
  &lt;!-- TODO: Update blank fragment layout --&gt;
  
  &lt;android.support.constraint.ConstraintLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@drawable/gradientbackground"&gt;
  
  
      &lt;ProgressBar
  
          android:id="@+id/circularProgressbar"
          style="?android:attr/progressBarStyleHorizontal"
          android:layout_width="450dp"
          android:layout_height="450dp"
          android:layout_centerInParent="true"
          android:indeterminate="false"
          android:max="100"
          android:progress="100"
          android:progressDrawable="@drawable/circle"
          android:secondaryProgress="100"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintHorizontal_bias="0.496"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" /&gt;
  
  
      &lt;TextView
          android:id="@+id/tv"
          android:layout_width="250dp"
          android:layout_height="250dp"
          android:layout_centerInParent="true"
          android:layout_marginBottom="18dp"
          android:gravity="center"
          android:text="50%"
          android:textColor="@color/colorPrimaryDark"
          android:textSize="30sp"
          app:layout_constraintBottom_toBottomOf="@+id/circularProgressbar"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent" /&gt;
  
      &lt;TextView
          android:id="@+id/textView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginBottom="163dp"
          android:text="Steps"
          android:textAlignment="center"
          android:textSize="80sp"
          app:layout_constraintBottom_toBottomOf="@+id/tv"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent" /&gt;
  
      &lt;ImageView
          android:id="@+id/imageView"
          android:layout_width="0dp"
          android:layout_height="50dp"
          android:layout_marginStart="56dp"
          android:layout_marginTop="8dp"
          android:layout_marginEnd="52dp"
          android:layout_marginBottom="8dp"
          android:src="@drawable/calorie"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toStartOf="@+id/textView3"
          app:layout_constraintHorizontal_bias="0.526"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
          app:layout_constraintVertical_bias="0.453"
          tools:src="@tools:sample/backgrounds/scenic" /&gt;
  
      &lt;TextView
          android:id="@+id/textView3"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginTop="8dp"
          android:layout_marginEnd="348dp"
          android:layout_marginBottom="8dp"
          android:text="Calories"
          android:textColor="#ffffff"
          android:textSize="25sp"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@+id/imageView"
          app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
          app:layout_constraintVertical_bias="0.463" /&gt;
  
      &lt;ImageView
          android:id="@+id/imageView3"
          android:layout_width="50dp"
          android:layout_height="50dp"
          android:layout_marginStart="56dp"
          android:layout_marginTop="8dp"
          android:layout_marginBottom="8dp"
          android:src="@drawable/miles"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toEndOf="@+id/textView3"
          app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
          app:layout_constraintVertical_bias="0.453"
          tools:src="@tools:sample/backgrounds/scenic" /&gt;
  
      &lt;TextView
          android:id="@+id/textView4"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginStart="8dp"
          android:layout_marginTop="8dp"
          android:layout_marginEnd="8dp"
          android:layout_marginBottom="8dp"
          android:text="Miles"
          android:textColor="#ffffff"
          android:textSize="25sp"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintHorizontal_bias="0.502"
          app:layout_constraintStart_toStartOf="@+id/imageView3"
          app:layout_constraintTop_toBottomOf="@+id/circularProgressbar"
          app:layout_constraintVertical_bias="0.463" /&gt;
  
      &lt;ImageView
          android:id="@+id/imageView4"
          android:layout_width="50dp"
          android:layout_height="50dp"
          android:layout_marginStart="56dp"
          android:layout_marginTop="8dp"
          android:layout_marginBottom="8dp"
          android:src="@drawable/score"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/imageView"
          app:layout_constraintVertical_bias="0.486" /&gt;
  
      &lt;TextView
          android:id="@+id/textView5"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginStart="52dp"
          android:layout_marginTop="8dp"
          android:layout_marginBottom="8dp"
          android:text="Score"
          android:textColor="#ffffff"
          android:textSize="25sp"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toEndOf="@+id/imageView4"
          app:layout_constraintTop_toBottomOf="@+id/textView3"
          app:layout_constraintVertical_bias="0.532" /&gt;
  
      &lt;ImageView
          android:id="@+id/imageView5"
          android:layout_width="50dp"
          android:layout_height="50dp"
          android:layout_marginStart="8dp"
          android:layout_marginTop="8dp"
          android:layout_marginEnd="8dp"
          android:layout_marginBottom="8dp"
          android:src="@drawable/bonus"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toStartOf="@+id/textView8"
          app:layout_constraintHorizontal_bias="0.527"
          app:layout_constraintStart_toEndOf="@+id/textView5"
          app:layout_constraintTop_toBottomOf="@+id/imageView3"
          app:layout_constraintVertical_bias="0.486" /&gt;
  
      &lt;TextView
          android:id="@+id/textView8"
          android:layout_width="99dp"
          android:layout_height="41dp"
          android:layout_marginTop="8dp"
          android:layout_marginEnd="84dp"
          android:layout_marginBottom="8dp"
          android:text="Bonus"
          android:textColor="#ffffff"
          android:textSize="25sp"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintTop_toBottomOf="@+id/textView4"
          app:layout_constraintVertical_bias="0.532" /&gt;
  
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>Anyone have any ideas on how to fix this?</p>