title: Differences between android studio preview and phone
body: <p>I have an ImageView called 'neura_bar_img' and two TextViews to its right:</p>
  
  <p><a href="https://i.stack.imgur.com/kvMdi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kvMdi.jpg" alt="enter image description here"></a></p>
  
  <p>The XML code:</p>
  
  <pre><code>&lt;android.support.v7.widget.CardView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/summaryCard"
      android:layout_below="@+id/topCard"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      app:layout_heightPercent="25%"
      app:layout_marginTopPercent="3%"
      &gt;
  
      &lt;RelativeLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:paddingTop="3dp"
          android:paddingBottom="3dp"&gt;
  
          &lt;RelativeLayout
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerHorizontal="true"&gt;
              &lt;ImageView
                  android:layout_width="270dp"
                  android:layout_height="113dp"
                  android:id="@+id/neura_bar_img"
                  android:src="@drawable/detailed_daily_sum"
                  android:layout_centerVertical="true" /&gt;
  
              &lt;TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignTop="@id/neura_bar_img"
                  android:layout_alignBottom="@id/neura_bar_img"
                  android:layout_alignLeft="@id/neura_bar_img"
                  android:layout_alignRight="@id/neura_bar_img"
                  android:gravity="center"
                  android:id="@+id/detailed_goal_text"
                  android:textStyle="italic"
                  android:text="0"
                  android:textSize="30sp"
                  android:textColor="@color/graphicsBlue"/&gt;
  
              &lt;TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:id="@+id/detailed_bites_eaten_text"
                  android:layout_alignTop="@id/neura_bar_img"
                  android:layout_alignBottom="@id/neura_bar_img"
                  android:layout_alignLeft="@id/neura_bar_img"
                  android:layout_alignRight="@id/neura_bar_img"
                  android:gravity="center"
                  android:layout_marginRight="170dp"
                  android:layout_marginTop="10dp"
                  android:textStyle="bold|italic"
                  android:text="0"
                  android:textSize="45sp" /&gt;
  
              &lt;TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:id="@+id/sports_part_text"
                  android:layout_alignTop="@id/neura_bar_img"
                  android:layout_alignBottom="@id/neura_bar_img"
                  android:gravity="center"
                  android:layout_marginTop="58dp"
                  android:layout_marginLeft="0dp"
                  android:layout_toRightOf="@+id/neura_bar_img"
                  android:text="---"
                  android:textSize="30sp"
                  android:textColor="@color/graphicsOrange"/&gt;
  
              &lt;TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:id="@+id/bites_part_text"
                  android:layout_alignTop="@id/neura_bar_img"
                  android:layout_alignBottom="@id/neura_bar_img"
                  android:gravity="center"
                  android:layout_marginBottom="54dp"
                  android:layout_marginLeft="0dp"
                  android:layout_toRightOf="@+id/neura_bar_img"
                  android:text="0"
                  android:textSize="30sp"
                  android:textColor="@color/graphicsGrey"/&gt;
          &lt;/RelativeLayout&gt;
      &lt;/RelativeLayout&gt;
  &lt;/android.support.v7.widget.CardView&gt;
  </code></pre>
  
  <p>On Android Studio's preview it looks just fine. But on some devices there is a gap between the ImageView and the Text View. Here is an example:</p>
  
  <p><a href="https://i.stack.imgur.com/0kFSg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0kFSg.jpg" alt="enter image description here"></a></p>
  
  <ul>
  <li>This picture was taken from LG G3 for example but I saw the same problem on Moto G</li>
  </ul>
  
  <p>I have no idea why this is happening, and didn't find any similar cases online.</p>
  
  <p>Thanks in advance!</p>