title: Layout looks different in Android emulator compared to real device
body: <p>I am encountering a problem and I need your help. The thing is that the layout in Android emulator that I created using Android studio looks different on a real device. I have 4 ImageButtons and they are separated in the layout file. This is correctly displayed in the Emualtor. However, on a 4'screen on a real device they are overlapping, which looks quite bad. Here you can see the two layouts. I indicated the gap with an error on the emulator's screenshot.:<a href="https://i.stack.imgur.com/McVJ6.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p><a href="https://i.stack.imgur.com/QBW4H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QBW4H.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/oD4nA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oD4nA.png" alt="enter image description here"></a></p>
  
  <p>Here you can see the code of the XML layout file:</p>
  
  <pre><code>&lt;android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
      &lt;android.support.v7.widget.Toolbar
          android:id="@+id/toolbar_mainActivity"
          android:layout_width="432dp"
          android:layout_height="135dp"
          android:background="#435cb53f"
          android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintVertical_bias="0.0"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
          app:titleTextColor="@android:color/holo_green_light"&gt;
  
          &lt;TextView
              android:id="@+id/textView_ToolBar_FoodSelectionActivity"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginBottom="8dp"
              android:layout_marginEnd="8dp"
              android:layout_marginLeft="8dp"
              android:layout_marginRight="8dp"
              android:layout_marginStart="8dp"
              android:layout_marginTop="8dp"
              android:gravity="center"
              android:layout_gravity="center"
              android:textColor="@android:color/white"
              android:textSize="24sp"
              android:text="Food" /&gt;
      &lt;/android.support.v7.widget.Toolbar&gt;
  
      &lt;ScrollView
          app:layout_constraintTop_toBottomOf="@id/toolbar_mainActivity"
          app:layout_constraintBottom_toTopOf="@id/bottom_layout"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          android:layout_width="0dp"
          android:layout_height="0dp"&gt;
          &lt;android.support.constraint.ConstraintLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              tools:context=".MainActivity"
              tools:ignore="ExtraText"&gt;
  
  
              &lt;ImageButton
                  android:id="@+id/imageButton_1"
                  android:layout_width="0dp"
                  android:layout_height="128dp"
                  android:layout_marginTop="12dp"
                  android:background="#00000000"
                  android:scaleType="fitCenter"
                  app:layout_constraintEnd_toStartOf="@+id/imageButton_2"
                  app:layout_constraintHorizontal_chainStyle="spread"
                  app:layout_constraintHorizontal_weight="1"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toTopOf="parent"
                  app:srcCompat="@drawable/test_dish_1" /&gt;
  
              &lt;ImageButton
                  android:id="@+id/imageButton_2"
                  android:layout_width="0dp"
                  android:layout_height="128dp"
                  android:layout_marginTop="12dp"
                  android:background="#00000000"
                  android:scaleType="fitCenter"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintHorizontal_weight="1"
                  app:layout_constraintStart_toEndOf="@+id/imageButton_1"
                  app:layout_constraintTop_toTopOf="parent"
                  app:srcCompat="@drawable/test_dish_1" /&gt;
  
              &lt;ImageButton
                  android:id="@+id/imageButton_4"
                  android:layout_width="0dp"
                  android:layout_height="128dp"
                  android:layout_marginTop="12dp"
                  android:background="#00000000"
                  android:scaleType="fitCenter"
                  app:layout_constraintEnd_toStartOf="@id/imageButton_3"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toBottomOf="@id/imageButton_1"
                  app:layout_constraintVertical_chainStyle="packed"
                  app:srcCompat="@drawable/test_dish_1" /&gt;
  
              &lt;ImageButton
                  android:id="@+id/imageButton_3"
                  android:layout_width="0dp"
                  android:layout_height="128dp"
                  android:layout_marginTop="12dp"
                  android:background="#00000000"
                  android:scaleType="fitCenter"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toEndOf="@id/imageButton_4"
                  app:layout_constraintTop_toBottomOf="@id/imageButton_1"
                  app:srcCompat="@drawable/test_dish_1" /&gt;
  
  
  
  
  
  
          &lt;/android.support.constraint.ConstraintLayout&gt;
      &lt;/ScrollView&gt;
  
      &lt;LinearLayout
          android:background="#FFD600"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          android:id="@+id/bottom_layout"
          android:layout_width="0dp"
          android:layout_height="60dp"&gt;
  
          &lt;Button
              android:id="@+id/button1"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_gravity="center_vertical"
              android:layout_margin="4dp"
              android:layout_weight="1"
              android:background="@drawable/test_dish_1"
              android:text="A" /&gt;
  
  
          &lt;Button
              android:layout_gravity="center_vertical"
              android:id="@+id/button2"
              android:layout_weight="1"
              android:text="B"
              android:layout_width="0dp"
              android:layout_margin="4dp"
              android:layout_height="wrap_content"/&gt;
  
  
          &lt;Button
              android:layout_gravity="center_vertical"
              android:id="@+id/button3"
              android:layout_width="0dp"
              android:layout_weight="1"
              android:text="C"
              android:layout_margin="4dp"
              android:layout_height="wrap_content"/&gt;
  
          &lt;Button
              android:layout_gravity="center_vertical"
              android:id="@+id/button4"
              android:layout_width="0dp"
              android:layout_weight="1"
              android:text="D"
              android:layout_margin="4dp"
              android:layout_height="wrap_content"/&gt;
  
      &lt;/LinearLayout&gt;
  &lt;/android.support.constraint.ConstraintLayout&gt;
  </code></pre>
  
  <p>Does anyone have an idea what the problem might be? For me this is quite strange, as the emulator displays correctly what I specified in the XML layout file while it looks faulty on the real device. I'd appreciate every comment.</p>
  
  <p>Update: I added margins for all ImageButtons by using
                  android:layout_marginStart="10dp"
                  android:layout_marginEnd="10dp"
  However, while on the emulator things changed a little bit (the margins to the rims are increased) on the real device nothing changed. </p>
  
  <p>Does someone have an idea what the problem might be. I am still struggeling on this one and I am running out of ideas. I'd appreciate your help.</p>
  
  <p>Update 2: Here is the '@drawable/test_dish_1' picture as lincollincol demanded:<a href="https://i.stack.imgur.com/vcID9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vcID9.png" alt="enter image description here"></a></p>