How to design on Google’s Pixel XL?

9 days 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)


Screenshot of the issue


  • Marc EdwardsMarc Edwards, 6 days 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×.

    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.

    25 points
    • Scott HurffScott Hurff, 6 days ago

      Incredible comment. Thanks, Marc.

      2 points
    • Martijn Otter, 6 days ago

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

      1 point
    • Martijn Otter, 6 days 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, 6 days 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.

        2 points
    • Gabe WillGabe Will, 4 days 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, 4 days 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, 4 days 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, 4 days ago

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

            0 points
          • Marc EdwardsMarc Edwards, 3 days 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
  • Joshua Newton, 8 days ago


    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.

    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...

    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
    • , 8 days 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, 9 hours ago

    I've noticed this too and would love to know why this happens. Here's a comparison between Nexus 5 and the Pixel.

    3 points
  • Zach Buechler, 7 days 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
  • Antonio Civita, 8 days ago

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

    Material Cue

    1 point
  • Asis PandaAsis Panda, 8 days 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
  • Stefan TrkuljaStefan Trkulja, 5 days 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
    • , 5 days ago

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

      0 points
      • Stefan TrkuljaStefan Trkulja, 4 days 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, 3 days 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, 3 days 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, 6 hours 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:

              0 points
              • Stefan TrkuljaStefan Trkulja, 5 minutes 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
  • Taylor LingTaylor Ling, 3 days 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.

    0 points