Android Devs: Do your layouts look squashed on newer devices or spread out on older ones?
Do your layouts look squashed on newer devices? Or perhaps they look too spread out on older devices. Here’s why!
Noticing the problem
I’ve never owned a Nexus 6 (too expensive? I don’t make Apple fan scratch!). Last year I started a project before the Nexus 5X came out, I did my development using Nexus 5 and Galaxy Nexus as the target devices. The thinking was that going forward, most devices would at least be 1080p, but just in case smaller screen devices stick to 720p, I should test on both.
When I finally got my hands on a Nexus 5X, I noticed that all my buttons looks squashed! I’ve always followed the (now) age old recommendation of using at least 48dp width and height for a touchable areas size, so I was surprised to find that my buttons look squashed. Not just that, my layouts looked crowded in a general where the TextViews seemed too close to one and other and the floating labels looked like they were too close to the EditTexts.
I’ve created a sample project to demonstrate this, and trust me, it looks much more crowded on the phone than it does here. What going on here? Even the status bar and navigation bar is shorter! Since, both of the devices are on Android 7, the change of the status bar height from 25dp to 24dp in Android M does not explain this. Plus, the divider in our layout on the Nexus 5X is a lot more than 1dp higher.
Whats going on here?
Now, some of you out there are calling me a rookie or n00b because you already know what’s going on. To you I say, good for you! The rest of you, the answer is below.
Suspecting that I or a team member may have changed something to cause this problem, I started checking my layout folders, dimension files and even styles. Everything seemed like it was in order. I started thumbing through my git history to see if something could have been changed to cause this issue. Nothing!
Google searches did not turn up anything (hence this article), but then, I remembered something in the back of my head. A year or so ago, Android Developers published a blog post titled “Getting Your Apps Ready for Nexus 6 and Nexus 9”. I had glanced over this article last year, but I guess nothing stuck in my brain. I went over it again, the article mostly covered which density buckets to use for images and which layout folders to use to target these devices. This is nice to know, but doesn’t explain why my layouts look squashed or crowded.
The article did impart another bit of knowledge that answered the question of why my layouts looked squashed.
The Nexus 6 boasts an impressive 5.96” Quad HD screen display at a resolution of 2560 x 1440 (493 ppi). This translates to ~ 730 x 410 dp(density independent pixels).
I will admit that I glanced over this bit repeatedly before it stuck in my head. Take a look at the Device Metrics page on design.google.com. Scroll down to where Nexus 5X and Nexus 5 are mentioned. You will notice the following:
While the screen size in pixels is the same, the screen size in density independent pixels is very different! Roughly speaking, in terms of density independent pixels, Nexus 5x, 6 and 6P have a 15% larger screen! There are some phones like the LG G3 that are even larger!
This makes my layouts look squashed for obvious reasons, but “squashed” implied that the layout issue exists vertically and not horizontally, why? The short answer is, the problem also exists horizontally, but it’s less noticeable. Text is normally is in scale-able pixels and doesn’t really seem to suffer as noticeably. Otherwise, most of our widths are configured to match_parent, wrap_content or be a relative weight; which means it’s harder to notice.
Is this really a problem?
Put an other way, since screens are measure diagonally, Nexus 5X is 3.8% bigger than the Nexus 5 (Nexus 5 is 5" screen, Nexus 5X is 5.2" screen), however, since the grids in DIP are 360 x 640 dp for Nexus 5 versus 411 x 731 dp for Nexus 5X, the Nexus 5X’s screen in terms of DIP’s diagonally is 12.4% bigger (look Maa! I needed Pythagoras in real life after all!).
If your app uses the extra width without accounting for older devices, you’ll have an issue in your layout. The same can happen with the height. This can be problematic with the new ConstraintsLayout, if you take full advantage of the 411dp width, older devices with 360dp width won’t render properly. If you take full advantage of the 731 dp height, without taking scrolling into consideration for your screen or design, you’ll have a problem. The same can happen if you design for smaller DIP grids, you could have extra space when you don’t expect it. The lesson here is, just because screens have the same resolution, don’t assume they have the same grid in terms of DIP.
When combing through my app and comparing screens side-by-side between a Nexus 5 and Nexus 5X, I noticed that the issue existed in every layout. However, it’s not really noticeable in most cases and doesn’t “look bad”. So much so that most designers I work with, didn’t notice the issue on most screens.
So, is this really a problem? Depends on your design and layout.
What can I do to solve this problem?
This depends on how you code. There is an argument to be made for generic dimension values, versus functional ones. Personally, I use generic dimension values and functional ones, so for me, the answer was fairly easy.
For context, my layout is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<TextView
android:id="@+id/txt_label_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/space_x2"
android:text="Date & Time"
android:textSize="@dimen/txt_small"/>
<TextView
android:id="@+id/txt_region"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txt_label_time"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/space_x2"
android:text="GMT+10"
android:textSize="@dimen/txt_medium"/>
<TextView
android:id="@+id/txt_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txt_region"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/space"
android:text="00:00:00.00"
android:textSize="@dimen/txt_large"/>
<TextView
android:id="@+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txt_time"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/space"
android:text="Friday, January 1 2016"
android:textSize="@dimen/txt_medium"/>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/dp1"
android:layout_below="@+id/txt_date"
android:layout_marginTop="@dimen/space_x4"
android:background="#dadada"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="@dimen/space_x6"
android:layout_alignParentBottom="true"
android:textSize="@dimen/txt_medium"
android:text="Button"/>
</RelativeLayout>Below is my values/dimens.xml file:
<resources>
<!-- Generic dimensions -->
<dimen name="dp1">1dp</dimen>
<dimen name="space_half">4dp</dimen>
<dimen name="space">8dp</dimen>
<dimen name="space_x2">16dp</dimen>
<dimen name="space_x3">24dp</dimen>
<dimen name="space_x4">32dp</dimen>
<dimen name="space_x5">40dp</dimen>
<dimen name="space_x6">48dp</dimen>
<dimen name="txt_small">14sp</dimen>
<dimen name="txt_medium">16sp</dimen>
<dimen name="txt_large">24sp</dimen>
<!-- Functional dimensions -->
<dimen name="activity_horizontal_margin">@dimen/space_x2</dimen>
<dimen name="activity_vertical_margin">@dimen/space_x2</dimen>
</resources>I know that the newer Nexus devices are 411dp x 731dp so, I created a new values folder and a new dimensions file values-sw410dp/dimens.xml and updated my generic values increasing them by 15%
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="space_half">4.6dp</dimen>
<dimen name="space">9.2dp</dimen>
<dimen name="space_x2">18.4dp</dimen>
<dimen name="space_x3">27.6dp</dimen>
<dimen name="space_x4">36.8dp</dimen>
<dimen name="space_x5">46dp</dimen>
<dimen name="space_x6">55.2dp</dimen>
<dimen name="txt_small">16.1sp</dimen>
<dimen name="txt_medium">18.4sp</dimen>
<dimen name="txt_large">27.6sp</dimen>
</resources>The result was much closer:
Should I do this?
Honestly, the answer depends on whether you’re just updating an existing project to support / fix layouts on the newer devices or if you’re redesigning your app from scratch.
If you’re updating or fixing layouts for an existing app? Then by all means, feel free do this*. I would recommend that you don’t use odd numbers and fractions like I did above, but rather align your dimensions to the closest factor of 4 or 8dp. The above was just an example.
*Note: I’m not advocating this as the or as the only solution by any means, the solution largely depends on your code and your requirements. The aim of this article was to make you aware of a possible issue and offer a quick solution.
I also scaled the text to get the two devices to align as closely as possible. Honestly, you don’t have to do this. But again, depends on your design and/or layout. Android is pretty good about making sure that text size remains readable as long as you’re using scale-able pixels but some times, the text size is as much about positioning elements around the text, as much as it is about making sure the text is readable.
If you’re designing and developing from scratch, I would design my app to look best on each kind of device. Or just decide up front if you want to scale up for newer devices or scale down for older devices.
Finally
In order to keep building great apps, read more of my articles.
