'what should be the size of Drawer Header Image?

 public DrawerProfile(Context context) {
        super(context);
        HeaderImageView = new ImageView(context);
        HeaderImageView.setVisibility(VISIBLE);
        HeaderImageView.setScaleType(ImageView.ScaleType.CENTER);
        HeaderImageView.setImageResource(R.mipmap.drawer_background_image);
        addView(HeaderImageView);
}

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

Solution 1:^[1]

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 576x324 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:layout_width="match_parent"
    android:layout_height="@dimen/navDrawer_header_height"
    android:background="@drawable/img_navdrawer_header"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark" >    
</LinearLayout>

And this is how i have used it inside NavigationView

  <android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="@dimen/nav_drawer_width"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    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>

Hope this helps someone.

Solution 2:^[2]

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.

Solution 3:^[3]

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()) {
                    @Override
                    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) {
                            imgNavHeaderBg.setBackground(drawable);
                        }
                    }
                });
            }
        });

Solution 4:^[4]

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

Solution 5:^[5]

I use this library for dimension

https://github.com/intuit/sdp

And put header highlight as @dimen/_180sdp.

So 180 dp is the size of header

Looks perfect !

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mfaisalhyder
Solution 2	Chris Stillwell
Solution 3
Solution 4	Community
Solution 5	sohel.eco

'what should be the size of Drawer Header Image?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]