title: How to make Android UI that looks exactly the same in every screen?
body: <p>I'm currently working on an Android Application development. I have written a UI Code that looks perfect in Android Simulator But when the same App is run on my Android Smartphone, the UI gets distorted. </p>
  
  <p>I have tried my layouts including LinearLayout, Relative Layout &amp; Constraint Layout but the results are not very much different.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout 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:background="@drawable/gradient"
      android:orientation="vertical"
      tools:context=".MainActivity"&gt;
  
      &lt;TextView
          android:id="@+id/Heading"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:fontFamily="sans-serif-smallcaps"
          android:gravity="center_horizontal"
          android:includeFontPadding="true"
          android:paddingTop="10sp"
          android:paddingBottom="10sp"
          android:text="PHYSICS"
          android:textColor="#FFFFFF"
          android:textSize="30dp"
          android:textStyle="bold"
          android:verticalScrollbarPosition="defaultPosition" /&gt;
  
      &lt;LinearLayout
          android:layout_width="match_parent"
          android:layout_height="460sp"
          android:background="#FFFFFF"
          android:orientation="vertical"&gt;
  
          &lt;Button
              android:id="@+id/button4"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="Mechanics" /&gt;
  
          &lt;Button
              android:id="@+id/button5"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="Oscillations and Waves" /&gt;
  
          &lt;Button
              android:id="@+id/button6"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="Thermodynamics" /&gt;
  
          &lt;Button
              android:id="@+id/button3"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="Solid States" /&gt;
      &lt;/LinearLayout&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>What do I need to make a UI that looks the same on every Android screen when the screen size is 4 inches or 5.</p>
  
  <p><strong>Original UI on Emulator</strong>
  <a href="https://i.stack.imgur.com/TkCRn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TkCRn.png" alt="Original UI on Emulator"></a></p>
  
  <p><strong>This is what it appears on my Smartphone</strong>
  <a href="https://i.stack.imgur.com/1K2hM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1K2hM.png" alt="This is what it appears on my Smartphone"></a></p>