Background image dimension for Navigation Drawer header

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?

In MaterialNavigationDrawer library this is @dimen/userSpace (164dp for pre-v21, and 164+24 (status bar) = 188dp for v21 and above). I don't know how this dimension is calculated. Maybe look at images on the link provided by you and calculate the height corresponding to given dimensions - status bar, for example) https://github.com/neokree/MaterialNavigationDrawer/blob/master/MaterialNavigationDrawerModule/src/main/res/values/dimens.xml — krossovochkin, May 08 '15 at 13:18

Angad Singh · Answer 1 · 2016-07-09T17:17:07.783

25

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

edited Jul 09 '16 at 17:17

answered Jul 11 '15 at 13:23

Angad Singh

1,032
1
17
36

:O, Didn't used that image somewhere, just opened the apk with WinRAR. X_x – Angad Singh Jul 12 '15 at 11:32
2

xxxhdpi 1536 x 864 – Oluleye IResþekt Idowu Jul 29 '16 at 18:10
and what about ldpi ? – androniennn Oct 13 '16 at 15:33
@androniennn Not in use anymore – Angad Singh Apr 01 '17 at 10:41

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

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

score 2 · Answer 3 · answered May 08 '15 at 13:35

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/

Background image dimension for Navigation Drawer header

3 Answers3

Linked