title: Why Android app looks different in some phones
body: <p>I have an Android app that, in most phones it looks as want to. Like this:
  <a href="https://i.stack.imgur.com/QbRUh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QbRUh.png" alt="enter image description here" /></a></p>
  <p>But in some phones, texts looks too big and everything looses proportions. Like this:
  <a href="https://i.stack.imgur.com/gW7dJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gW7dJ.jpg" alt="enter image description here" /></a></p>
  <p>One of my xml file is this:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;LinearLayout
      xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
      xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
      xmlns:tools=&quot;http://schemas.android.com/tools&quot;
      android:layout_width=&quot;match_parent&quot;
      android:layout_height=&quot;match_parent&quot;
      tools:context=&quot;independent.dev.ui.Activities.WheelActivity&quot;
      android:background=&quot;@drawable/wheel_background&quot;
      android:orientation=&quot;vertical&quot;&gt;
  
      &lt;LinearLayout
          android:layout_width=&quot;match_parent&quot;
          android:layout_height=&quot;wrap_content&quot;
          android:orientation=&quot;horizontal&quot;
          android:gravity=&quot;center_horizontal&quot;&gt;
  
          &lt;ImageView
              android:layout_width=&quot;80dp&quot;
              android:layout_height=&quot;80dp&quot;
              android:background=&quot;@drawable/wheel_icon&quot; /&gt;
  
          &lt;TextView
              android:layout_width=&quot;wrap_content&quot;
              android:layout_height=&quot;wrap_content&quot;
              android:textSize=&quot;25sp&quot;
              android:text=&quot;Convertidor de graduación&quot;
              android:layout_gravity=&quot;center&quot;
              android:textColor=&quot;@color/white&quot;/&gt;
      &lt;/LinearLayout&gt;
  
      &lt;LinearLayout
          android:layout_width=&quot;match_parent&quot;
          android:layout_height=&quot;match_parent&quot;
          android:orientation=&quot;vertical&quot;
          android:gravity=&quot;center_horizontal&quot;
          android:layout_marginHorizontal=&quot;30dp&quot;&gt;
  
          &lt;RelativeLayout
              android:layout_width=&quot;match_parent&quot;
              android:layout_height=&quot;0dp&quot;
              android:orientation=&quot;vertical&quot;
              android:gravity=&quot;center&quot;
              android:layout_weight=&quot;1&quot;&gt;
  
              &lt;ImageView
                  android:layout_width=&quot;100dp&quot;
                  android:layout_height=&quot;65dp&quot;
                  android:background=&quot;@drawable/isotype_green&quot;
                  android:layout_marginTop=&quot;50dp&quot;
                  android:layout_centerHorizontal=&quot;true&quot;/&gt;
  
              &lt;LinearLayout
                  android:layout_width=&quot;match_parent&quot;
                  android:layout_height=&quot;wrap_content&quot;
                  android:orientation=&quot;horizontal&quot;
                  android:gravity=&quot;center_horizontal&quot;
                  android:layout_marginTop=&quot;50dp&quot;
                  android:layout_alignParentBottom=&quot;true&quot;&gt;
  
                  &lt;TextView
                      android:layout_width=&quot;0dp&quot;
                      android:layout_height=&quot;wrap_content&quot;
                      android:text=&quot;@string/wheelOriginalScale&quot;
                      android:fontFamily=&quot;@font/helvetica&quot;
                      android:textSize=&quot;24sp&quot;
                      android:textColor=&quot;@color/white&quot;
                      android:layout_weight=&quot;1&quot;
                      android:textAlignment=&quot;center&quot;/&gt;
  
                  &lt;View
                      android:layout_width=&quot;2dp&quot;
                      android:layout_height=&quot;match_parent&quot;
                      android:background=&quot;@color/white&quot;/&gt;
  
                  &lt;TextView
                      android:layout_width=&quot;0dp&quot;
                      android:layout_height=&quot;wrap_content&quot;
                      android:text=&quot;@string/wheelGrades&quot;
                      android:textAlignment=&quot;center&quot;
                      android:fontFamily=&quot;@font/helveticabold&quot;
                      android:textSize=&quot;28sp&quot;
                      android:textColor=&quot;@color/white&quot;
                      android:layout_weight=&quot;1&quot;
                      android:layout_gravity=&quot;center&quot;/&gt;
  
                  &lt;View
                      android:layout_width=&quot;2dp&quot;
                      android:layout_height=&quot;match_parent&quot;
                      android:background=&quot;@color/white&quot;/&gt;
  
                  &lt;TextView
                      android:layout_width=&quot;0dp&quot;
                      android:layout_height=&quot;wrap_content&quot;
                      android:text=&quot;@string/wheelObjectiveScale&quot;
                      android:textAlignment=&quot;center&quot;
                      android:fontFamily=&quot;@font/helvetica&quot;
                      android:textSize=&quot;24sp&quot;
                      android:textColor=&quot;@color/white&quot;
                      android:layout_weight=&quot;1&quot;/&gt;
              &lt;/LinearLayout&gt;
          &lt;/RelativeLayout&gt;
  
          &lt;LinearLayout
              android:layout_width=&quot;match_parent&quot;
              android:layout_height=&quot;0dp&quot;
              android:orientation=&quot;horizontal&quot;
              android:gravity=&quot;center_vertical&quot;
              android:layout_weight=&quot;0.8&quot;&gt;
  
              &lt;com.aigestudio.wheelpicker.WheelPicker
                  android:id=&quot;@+id/wOriginalScale&quot;
                  android:layout_width=&quot;0dp&quot;
                  android:layout_height=&quot;180dp&quot;
                  android:layout_weight=&quot;1&quot;
                  android:fontFamily=&quot;@font/helveticabold&quot;/&gt;
  
              &lt;com.aigestudio.wheelpicker.WheelPicker
                  android:id=&quot;@+id/wGrades&quot;
                  android:layout_width=&quot;0dp&quot;
                  android:layout_height=&quot;180dp&quot;
                  android:layout_weight=&quot;1&quot;
                  android:fontFamily=&quot;@font/helveticabold&quot;/&gt;
  
              &lt;com.aigestudio.wheelpicker.WheelPicker
                  android:id=&quot;@+id/wObjectiveScale&quot;
                  android:layout_width=&quot;0dp&quot;
                  android:layout_height=&quot;180dp&quot;
                  android:layout_weight=&quot;1&quot;
                  android:fontFamily=&quot;@font/helveticabold&quot;/&gt;
          &lt;/LinearLayout&gt;
  
          &lt;LinearLayout
              android:layout_width=&quot;wrap_content&quot;
              android:layout_height=&quot;0dp&quot;
              android:orientation=&quot;horizontal&quot;
              android:layout_weight=&quot;0.7&quot;&gt;
  
              &lt;LinearLayout
                  android:layout_width=&quot;wrap_content&quot;
                  android:layout_height=&quot;wrap_content&quot;
                  android:orientation=&quot;horizontal&quot;
                  android:background=&quot;@drawable/view_border&quot;
                  android:paddingHorizontal=&quot;20dp&quot;
                  android:layout_gravity=&quot;center&quot;&gt;
  
                  &lt;TextView
                      android:layout_width=&quot;wrap_content&quot;
                      android:layout_height=&quot;wrap_content&quot;
                      android:fontFamily=&quot;@font/helveticabold&quot;
                      android:text=&quot;Resultado:  &quot;
                      android:textColor=&quot;@color/appGreen&quot;
                      android:textSize=&quot;30sp&quot; /&gt;
  
                  &lt;TextView
                      android:id=&quot;@+id/tvResult&quot;
                      android:layout_width=&quot;wrap_content&quot;
                      android:layout_height=&quot;wrap_content&quot;
                      android:textSize=&quot;30sp&quot;
                      android:text=&quot;5.4&quot;
                      android:textColor=&quot;@color/white&quot;/&gt;
              &lt;/LinearLayout&gt;
          &lt;/LinearLayout&gt;
      &lt;/LinearLayout&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  <p>I don't know why this happens.
  At the beginning of the app, in those phones that now looks weird, that app crashed because the images I'm using were too big so I created the &quot;drawable-xxhdpi&quot; folder, move pictures there, and now the app doesn't crashes but it looks like this.
  Any ideas of what could be happening???
  Many thanks!</p>