26

How to design on Google’s Pixel XL?

over 6 years ago from , Designer

Hey all,

I started working on the design of an Android app and noticed quite a big difference on my Pixel XL. Elements are being displayed smaller. I’m using the 8pt grid with the exact measures from the Material guidelines. When viewing the design using Skala Preview you easily see the difference. Images aren’t scaled down like it happens on the iPhone 7 Plus, it’s showing exactly the same sizes as I’m using in Sketch.

Does anyone know why and how this is happening? And is there a way to work around it? (Changing the display size in settings isn't working)

Thanks!

Screenshot of the issue

33 comments

  • Marc EdwardsMarc Edwards, over 6 years ago

    Some more info, to build on Joshua’s reply.

    The Pixel uses a density of 2.6×. The Pixel XL uses a density of 3.5×.

    https://material.io/devices/

    Those are both non-integer values. When the UI is rendered, the view sizes and positions get scaled to the display size and rounded (to snap to pixels). The assets get bitmap scaled down. This is actually fairly abnormal for Android devices, where most have integer densities.

    When rendering the display on a Pixel XL, Android will use 4× assets and bitmap scale them down to 3.5× (87.5%). That means they’ll be blurrier.

    The scaling method for iOS is a bit different (I can provide a comparison if you’d like).

    Skala Preview (with the Sketch Preview plugin) sends the current artboard from your Sketch document at the size it was created. Skala View shows the exact image it was sent, using 1:1 pixel mapping (you can also zoom in Skala View, and zoom factors snap to integer values, unless you have fit to screen enabled).

    Please note that the Sketch Preview plugin has some scaling settings that will affect results, too.

    What’s happening

    If you create a 1440×2560 artboard in Sketch, and the Sketch Preview plugin has its default scaling (1×), Skala Preview will send the 1440×2560 image to Skala View, and Skala View will display it at 1440×2560, filling the screen (assuming Skala View is at 100% zoom).

    But, that won’t match a production app, if you’re creating your artwork at 3× or 4× scaling in Sketch. If you’re creating your artwork at 3×, then Android will display it larger (3× → 3.5×, or 116%). If you’re creating your artwork at 4×, then Android will display it smaller (4× → 3.5×, or 87.5%).

    What’s the solution? That will depend on how you want to work.

    Working at 1×

    If you want to work at 1×, where 1 pixel in Sketch = 1 Android dp, then use these settings:

    • Sketch artboards of 412×732 pixels.
    • Set Sketch Preview to scale to the explicit size of 3.5×.
    • Zoom to 100% in Skala View.

    Or alternatively:

    • Sketch artboards of 412×732 pixels.
    • Set Sketch Preview to scale to the explicit size of 4×.
    • Set Skala View to fit to screen.

    Working at 1× means you can use the exact dp sizes noted in the Material Design docs. This is my preferred way of working.

    Working at 2×

    • Sketch artboards of 822×1462 pixels.
    • Set Sketch Preview to scale to the explicit size of 2×.
    • Set Skala View to fit to screen.

    Working at 4×

    • Sketch artboards of 1646×2926 pixels.
    • Set Sketch Preview to scale to the explicit size of 1×.
    • Set Skala View to fit to screen.

    Those should mean the preview is the correct size. Please note that it won’t perfectly match how Android will render things, but it will be very close.

    Disclaimer: I haven’t done any tests on a Pixel or Pixel XL yet, but I believe all the information above to be true. If someone has corrections, feel free to let me know.

    28 points
    • Scott HurffScott Hurff, over 6 years ago

      Incredible comment. Thanks, Marc.

      2 points
    • Martijn Otter, over 6 years ago

      You're the man, Marc! Thanks a ton!

      1 point
    • Martijn Otter, over 6 years ago

      1 more question: It isn't completely clear to me why I should use the 412x732 resolution instead of the real 411x731 resolution. Why is that? :)

      0 points
      • Marc EdwardsMarc Edwards, over 6 years ago
        • 1440 / 3.5 = 411.4285714286
        • 2560 / 3.5 = 731.4285714286

        You can’t use 411.4285714286 or 731.4285714286 for your artboard dimensions, so you have to round the values up or down. Use whichever you’d prefer, but 412×732 sounds easier to work with, because it’s perfectly divisible by 4.

        4 points
    • Gabe WillGabe Will, over 6 years ago

      So would it be correct to say that when working at 1× on the Pixel, the artboard dimensions should be 416 × 738?

      And here I've been designing at 360 × 640…

      1 point
      • Martijn Otter, over 6 years ago

        Marc is suggesting 412x732. I'm not too sure where you got your numbers from. :)

        360x640 will still be the right size, only the Nexus 5X & 6P and Pixel devices use the 411x731.

        0 points
        • Gabe WillGabe Will, over 6 years ago

          Using 2.6 as the scale factor for the Pixel (non-XL), here's my math so you don't think I'm crazy:

          • 1080 / 2.6 = 415.38461538461
          • 1920 / 2.6 = 738.46153846153

          Does that make sense?

          1 point
          • Martijn Otter, over 6 years ago

            Oh yeah, for the regular Pixel. Makes sense, haven't thought about that.

            0 points
          • Marc EdwardsMarc Edwards, over 6 years ago

            Makes sense to me. :)

            Hopefully I’ll be able to do a test on a Pixel and Pixel XL to confirm the numbers are correct (current numbers are based on screenshots and conversations with other designers).

            1 point
          • Lee Beckwith, over 6 years ago

            Hey yeah I noticed the same thing but https://material.io/devices/ lists both devices as 411/731dp. The math for these devices just never find a source of truth, everywhere I look there is some weird rounding going on. Even if you did what I did and undo their math of how they arrived at 2.6 it doesn't add up. They list the dpi of Pixel at 441. 441/160 = 2.75625, not 2.6.

            0 points
      • Lee Beckwith, over 6 years ago

        Personally I'm still not convinced that using the 2.6x or 3.5x approximate sizes (412 or 416) are better than using a multiple of 360. For one thing the math seems to work out better. I'm guessing this has to do with what happens when the mocks are rendered on a physical Pixel phone screen, or maybe because developers are using 412 or 416 dp's instead of 360 dp's. Still not fully understanding the reason behind this.

        0 points
        • Gabe WillGabe Will, over 6 years ago

          Definitely with you on the math. I much prefer the numbers that multiples of 360 give me.

          However, if you're using something like Skala to preview your mocks, everything would look a little smaller in real life than in your mockups.

          If you're following the Material guidelines, this probably doesn't matter too much; you're going to be spacing things at 8dp, 16dp, 24dp, etc. regardless of how it looks on a test device.

          If you're creating your own layout guidelines, however—and you want to be sure you're seeing what the end user will see—then using the correct scale becomes more important.

          0 points
    • Lee Beckwith, over 6 years ago

      Ok maybe I don't understand the meaning of density, because wouldn't it be easier to just use 360x640 artboards or some multiple of 360, since 1080/360 = 3, and 1440/360 = 4, vs. the repeating decimals of using 411 or 415, both of which are only close to the true number of 1080/2.6 or 1440/3.5. Including the material design spec, why aren't the @1x guidelines designed for 360/640 artboards, or 720/x artboards. It seems the piece missing in my comprehension is the 2.6x and 3.5x density information. I don't get why this piece makes us design in artboards of /2.6 or /3.5 size, instead of simply a multiple of the screen's pixel dimensions (1080 or 1440 wide). Thanks for all your explanations btw!

      0 points
      • Marc EdwardsMarc Edwards, over 6 years ago

        The device’s UI density is used to scale Android’s dp units to the screen pixels.

        This means 1 dp will become 2.6 pixels on the Pixel. If you want to deal with dp units on your canvas when designing, you need to use a canvas that’s the screen res divided by 2.6. Dividing by 2.6 results in a fraction, so it has to be rounded up or down. It’s not as perfect as working with integer scaled displays, but I still think working at 1× is the best way to go.

        Hopefully that makes the maths a bit clearer?

        It’s worth noting that 1 dp becoming 2.6 pixels is a little more complex than noted above, when it comes to the final app running on the device — bitmap assets will be bitmap scaled down from the nearest larger size (probably 3×), and view sizes will be rounded so they align on a pixel boundary.

        0 points
    • Lee Beckwith, over 6 years ago

      Anyone know why 2.6 and 3.5 were chosen when, if you do the math, they are closer to 2.75 and 3.4?

      The Pixel:

      • The Pixel has a ppi/dpi of 441.

      • mdpi by default is considered 160

      • 441/160 = 2.75625, not "2.6".

      • if it were to be 2.6, you would need to do this: 441(dpi) / 2.6 = 169.615..., so rather than considering mdpi as 160 you'd have to consider it as 169.615 etc

      Same goes for Pixel XL

      • Has 534 pixel/in

      • says it's 3.5x

      • 534/160 = 3.3375

      0 points
  • Joshua Newton, over 6 years ago

    Hey,

    I spent a long time trying to understand this also. Take a look at Google's device metrics for a full spec of the Pixel and Pixel XL.

    https://material.io/devices/

    Because of the screen size and the resolution built into each device (Pixel/1080p, XL/1440p) this renders both screens at the exact same 1x point size (Or Density-independent pixels as Android states it in their design spec)

    I think the Icons will be rendering at different sizes due to each device registering as a different 'density' at render time...

    There's not much we can do about that I'm afraid, try changing the display size on the actual device and it will adjust the layout into a different layout density...

    https://developer.android.com/guide/practices/screens_support.html

    I haven't worked on this for a while though, so i can't help much further but hopefully that sheds some light!

    5 points
    • Martijn Otter, over 6 years ago

      Hey Joshua,

      Thanks a lot for your comment! Makes sense indeed, especially when checking out that metrics chart by Google. We probably have to live with it right know, but it's pretty annoying not to be able to check out the pixel perfect designs. Too bad!

      0 points
  • Mladen ZivanovicMladen Zivanovic, over 6 years ago

    I've noticed this too and would love to know why this happens. Here's a comparison between Nexus 5 and the Pixel. https://cl.ly/j63E

    3 points
  • Taylor LingTaylor Ling, over 6 years ago

    Just thought to chime in a bit on this - I think the awesome Marc (been always your fan and thanks for Skala Preview!) has addressed how to properly designed on Pixel XL (or Nexus 6P, they have the same pixel density), I would suggest to continue design Android apps at 360x640 (the standard Material Design 16:9 size) to avoid the illusion of the additional horizontal space (vertical space is less of a problem usually because we can do vertical scrolling), because at 412dp, you actually have that additional 52dp and you might actually try to fit as much things as possible, but the fact is that your app will be running on many devices with the standard 360dp width (there is even devices at 320dp width, although they are rare nowadays), so there is a chance that your design doesn't fit on such devices.

    Similar to iOS design, I always start at 360x640 for Android, and 320x568 for iOS for the base screen space that I can have, then I will make another artboard if I want to see how it will look like on a bigger phone, like Nexus 6P or iPhone 7 Plus. Otherwise there is a fair chance that your design on Pixel XL or iPhone 7 plus won't fit into smaller devices like Nexus 5 or iPhone SE.

    2 points
    • Lee Beckwith, over 6 years ago

      Wouldn't the extra space be scaled to fit everything horizontally?

      0 points
    • Marc EdwardsMarc Edwards, over 6 years ago

      Yep, keeping smaller devices in mind and starting with 360dp or 320pt wide is a great idea. That’s what I do as well.

      Also, thanks for the kind words! :)

      0 points
  • Antonio Civita, over 6 years ago

    Try this very useful app that draws material grids and keylines over the device screen.

    Material Cue

    1 point
  • Zach Buechler, over 6 years ago

    Standard artboard sizes for Material Design in Sketch are 360x640, but the 5X, 6P, Pixel, and Pixel XL all actually render at 411x731.

    I set artboards to these dimensions @1x for designs and use Crystal on my phone for pixel perfect results.

    1 point
  • Stefan TrkuljaStefan Trkulja, over 6 years ago

    As an aside – should the Google Material design stickersheet and other resources be available in different sizes? Sounds wrong to have to resize it all the time if you are working at 1x etc.

    0 points
    • Martijn Otter, over 6 years ago

      I don't really think they will add different sizes. As you can see at http://material.io/devices, there are quite a lot of different sizes.

      0 points
      • Stefan TrkuljaStefan Trkulja, over 6 years ago

        Sure. But what do you think is the right choice then if you want to adhere to Material guidelines? Multiply the whole stickersheet by an amount or something completely different?

        0 points
        • Taylor LingTaylor Ling, over 6 years ago

          There is not need for the stickersheet to be available in other sizes, and you should always design at 1x with the base resolution to ensure everything fits in the base screen space, and for devices with larger width and/or height, the layout and design will be adapted accordingly.

          0 points
          • Stefan TrkuljaStefan Trkulja, over 6 years ago

            I am working specifically for one device and my employer expects assets and previews to follow its resolution and measures.

            This particular phablet device has a resolution of 1440x2560 pixels so what does designing at 1x mean here?

            0 points
            • Taylor LingTaylor Ling, over 6 years ago

              By one device, do you mean the app is absolutely ONLY running on this device in a controlled environment? If it's not, then it is not reasonable to only design specifically based on that device.

              By 1x, what I meant is to design the app at the base resolution (the default is 360x640). Since you didn't mention about which device is that, so I didn't know the pixel density, but let's assume that it is a Pixel XL/Nexus 6P with 3.5x pixel density, you can design the app at 412x732 (suggested by Marc) which you should be able to accurately preview your design on the device using the 1x assets from Material team.

              But as I mentioned, if the app is not specifically running on that device itself only, then it's best to design the app at 360x640 to ensure the best layout compatibility with many devices out there.

              If you have some confusion for pixel density, resolution etc, this is a great read: http://sebastien-gabriel.com/designers-guide-to-dpi/

              0 points
              • Stefan TrkuljaStefan Trkulja, over 6 years ago

                Sorry, I wasn't clear enough. The app is in fact absolutely running ONLY on this device. :) Perhaps in the future it will run on some other similar device, but right now I'd like to have my Sketch mockups easily viewable on that exact device.The device in question is Lenovo Phab 2 Pro.

                Thanks for the link!

                0 points
  • Asis P.Asis P., over 6 years ago

    Had the same problem, spent a lot of time investigation. The simple answer is that the pixel density on the Pixel is higher than any common 4x android reference phone. Hence the disparity in seeing the designs on Skala preview. I'd look at the designs on a Nexus phone instead and trust the scale and ruler.

    0 points