Home » Android » android – what should be the size of Drawer Header Image?

android – what should be the size of Drawer Header Image?

Posted by: admin May 14, 2020 Leave a comment

 public DrawerProfile(Context context) {
        HeaderImageView = new ImageView(context);

I want to add an image in Drawer and it should cover the entire area of drawer header. I want to know what should the size of the Image (resolution) be; which will be suitable for every phone with variety of screen resolution. How can I minimize the size of the photo?

Here in this screenshot, The header image is not covering the entire area of Drawer

enter image description here

How to&Answers:

i recently made an app and did thorough research on almost every Material Design aspect, so i would like to share my experience here, it might help you.

1st go through this wonderful article, it will guide you set up Nav Drawer with every property and views used with it.

Drawer Image should be or usually 16/9 of your Nav Drawer’s width.
( HeaderHeight = NavDrawerWidth * 9/16 )

I used an image of 576×324 pixels (pretty clean and nice pic, nearly 27KB) and put it inside drawable-nodpi to avoid auto scaling and memory issues.

I use nav Drawer of width 304dp (mostly you will find it, on google apps, but they have also used 320dp on some apps as well, like Play Music, Hangouts etc).

Height of HeaderImage probably stay the same for almost all Devices except tablets.

For devices till sw-480dp-xxxhdpi use Drawer width 304dp and Header Height of 170dp.

From devices sw-600dp above, use Drawer width 400dp and Header Image height 225dp at least.

This is my drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:theme="@style/ThemeOverlay.AppCompat.Dark" >    

And this is how i have used it inside NavigationView

    app:menu="@menu/drawer" />

Now time to set their boundaries, /res/values/dimens/

<dimen name="nav_drawer_width">304dp</dimen>
<dimen name="navDrawer_header_height">170dp</dimen>

For tablets: /res/values-sw600dp/, /res/values/sw-720dp

<dimen name="nav_drawer_width">400dp</dimen>
<dimen name="navDrawer_header_height">225dp</dimen>

enter image description here

Hope this helps someone.


Given HeaderImageView is set to match the width and height of the Drawer, just set the ScaleType to FIT_CENTER then your image will scale to fill the entire Drawer.


Use the code Below to load an image into a Relative or Linear Layout in Navigation Drawer Header

RelativeLayout imgNavHeaderBg = navHeader.findViewById(R.id.headerRelativelayout);

imgNavHeaderBg.post(new Runnable(){
            public void run(){
                Glide.with("Your Class".this).load("URL").asBitmap().into(new SimpleTarget<Bitmap>(imgNavHeaderBg.getMeasuredWidth(), imgNavHeaderBg.getMeasuredHeight()) {
                    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                        Drawable drawable = new BitmapDrawable(getResources(), resource);
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {


Rule of thumb for header view height is

HeaderHeight = NavDrawerWidth * 9/16.

So basically it’s between 140 to 169dp.

use different dimen file for best result in different screen

hdpi – height = 170dp
xhdpi – height = 180dp