Background image dimension for Navigation Drawer h

Question

Basically I liked the background used by Mr. Jonathan Lee for Navigation Drawer header back ground in google official link http://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-content

So I wanted to reproduce something similar inspired by that. I believe that I need to make a similar design in photoshop and set it as the background image. But the question is, what should be the dimensions and pixels so that it matches different kind of devices?

The above link has guidelines for icons and margins, but I haven't seen any dimensions mentioned for that background.

Does anybody have any idea or link that can help?

Answer 1

Unzipped an APK and this is what I have found out-

mdpi-
    width=384 pixels
    height=216 pixels
hdpi-
    width=576 pixels
    height=324 pixels
xhdpi-
    width=768 pixels
    height=432 pixels
xxhdpi-
    width=1152 pixels
    height=648 pixels

Image source= Google's Newsstand Application, Tool=Adobe photoshop 7.0

Answer 2

I would recommend using adobe illustrator as it works great with ui design. Most mobile devices/tablets have a width ranging from 320px - up to 1080px and still increasing as new phones/tablets are released. Scalable vector graphics works great with prototyping ui layouts.

check out: http://www.uxbooth.com/articles/considerations-for-mobile-design-part-2-dimensions/

Answer 3

Width is:

Mobile:

Width = Screen width − 56 dp

Maximum width: 320dp

Maximum width applies only when using a side nav on the left. When using a panel on the right, the panel can cover the full width of the screen.

http://www.google.com/design/spec/layout/structure.html#structure-side-nav

Height is determined by the aspect ratio of the image you want:

http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-ratio-keylines

Probably 16:9