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?
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
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
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/
来源：https://stackoverflow.com/questions/30124740/background-image-dimension-for-navigation-drawer-header