what should be the size of Drawer Header Image?

Question

 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

Lent

Answer 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.

Philosophical

in my project, I am not using xml for it. How can i do the same in java? – Lent

I don't know what is the mechanism of HeaderViewImage class here, you can try like this if this class supports HeaderViewImage.setBounds(0,0, width in px, height in px) put values here accordingly. – Philosophical

That's very nice but compare your values to gmail/inbox/other google app and you'll see the their drawer's width are not 304dp. Tested with my nexus 5x – Hibbitts

Thank for your info! Do u know how to remove the white space between the header image and 1st menu item? Like the one shown in your pic. – Macguiness

Answer 2

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 !

Mcnamee

Answer 3

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.

Inclement

Its working but still the image is not covering the entire area. What should be the image size? – Lent

Answer 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

Romaineromains

Answer 5

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);
                        }
                    }
                });
            }
        });

Goal