title: Android UI Design: Supporting Multiple Screens
body: <p>I have read this tutorial <a href="http://developer.android.com/guide/practices/screens_support.html" rel="noreferrer">SUPPORTING MULTIPLE SCREENS</a> several times and many stackoverflow questions regarding <code>Design Android UIs to fit well with all android screen sizes</code>. </p>
  
  <p>But still struggling with providing the best and the same user experience for all screen sizes equally.</p>
  
  <p>When I am designing the Interfaces always keeping the following diagram in mind.<img src="https://i.stack.imgur.com/eS8kZ.png" alt="enter image description here"></p>
  
  <p>For the moment in my app it uses following folder structure under the res folder.</p>
  
  <p><img src="https://i.stack.imgur.com/a1v0A.png" alt="enter image description here"></p>
  
  <p>Also I have used <strong>dp</strong> and <strong>sp</strong> units in the xml layout files when defining the sizes. </p>
  
  <p><strong>Small screen sizes</strong></p>
  
  <p>When it comes to small screen sizes it perfectly refer to the UIs defined under <code>layout-small</code> and display without any issue. </p>
  
  <p><strong>Normal screen sizes</strong></p>
  
  <p>When I design layouts for normal screen sizes<code>(layout folder)</code>, I used <code>3.5 inches</code> android device and <code>3.7 inches</code> emulator to test how UI looks like in normal screen size. </p>
  
  <p>So my layouts look excellent in this size but Samsung Gallaxy S3 (<code>4.8 inches</code>) and S4 (<code>5.0 inches</code>) having slightly bigger screens and they still refer to the normal screen sized layouts. Therefore in Those bigger screens have a considerable space left from the bottom not using and UI doesn't look nice.</p>
  
  <p>Also In the manifest file, I have defined the following,</p>
  
  <pre><code>&lt;uses-sdk
      android:minSdkVersion="4"
      android:targetSdkVersion="17" /&gt;
  
  &lt;supports-screens 
      android:largeScreens="true" 
      android:normalScreens="true" 
      android:smallScreens="true" 
      android:anyDensity="true" /&gt;
  </code></pre>
  
  <p>I have no issue with the image density(<code>drawable-hdpi/drawable-xhdpi/drawable-mdpi/drawable-ldpi</code>)</p>
  
  <p><strong>(1).</strong> Wonder what I am missing or doing wrong to result like this specially in Bigger screens (4.8 inches) to refer normal layouts.</p>
  
  <p><strong>(2).</strong> Also If someone can explain best practices and the standard way of defining folder structure under the <code>Res</code> folder to fit well with all the screen sizes in android, would be grateful as this is so confusing. Thanks. </p>