Android: Navigation Drawer Header Image

Question

I try to create a Navigation Drawer for all my Activities. I use Android Studio and generate a Navigation Drawer Activity. My other Activities extends in it to get the Navigation Drawer. I insert a Pictue with the Android Studio Feature and now exist the hdpi and xhdpi... in the "mipmap" Folder.

I change in the Navigation Header Layout Background to my inserted Image:

android:background="@mipmap/ic_lmg_bck"

nav_header_nd.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@mipmap/ic_lmg_bck"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@drawable/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Nutzername"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nutzernameemail" />

</LinearLayout>

All works but the Image is blurred and to small:

Original Picture:

How it is possible to resize the Image ?

try changing the ImageView's scaleType property – Manny265 Dec 26 '16 at 19:46 — Manny265, Dec 26 '16 at 19:46

Excel1 · Accepted Answer · 2017-01-02T16:21:41.617

3

To add the background, you need to only copy/paste your picture to the drawable folder (Don´t add the Image with "add new Image Asset").

After this you go to your: nav_header_nd.xml

And change background to:

android:background="@drawable/mypicture"

edited Jan 02 '17 at 16:21

answered Jan 02 '17 at 16:14

Excel1

463
1
6
18

score 0 · Answer 2 · answered Dec 26 '16 at 19:51

Here is the code which I use, it is little customized navigationView:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/content_home"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:scaleType="centerCrop"
            android:layout_weight="1" />

        <LinearLayout
            android:id="@+id/ll_feedback"
            style="@style/Navigation_linear">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="44dp"
                android:src="@drawable/feedback" />

            <TextView
                style="@style/Navigation_text"
                android:text="Give us feedback" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_share_app"
            style="@style/Navigation_linear">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="44dp"
                android:src="@drawable/faq" />

            <TextView
                style="@style/Navigation_text"
                android:text="Share app" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_rate_app"
            style="@style/Navigation_linear">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="44dp"
                android:src="@drawable/rate" />

            <TextView
                style="@style/Navigation_text"
                android:text="Rate app" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_setting"
            style="@style/Navigation_linear">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="44dp"
                android:src="@drawable/setting" />

            <TextView
                style="@style/Navigation_text"
                android:text="Settings" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_notifications"
            style="@style/Navigation_linear">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="44dp"
                android:src="@drawable/notification" />

            <TextView
                style="@style/Navigation_text"
                android:text="Notifications" />
        </LinearLayout>

        <ImageView
            android:id="@+id/backNavigation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="72dp"
            android:layout_marginLeft="16dp"
            android:adjustViewBounds="true"
            android:background="?attr/selectableItemBackground"
            android:clickable="true"
            android:padding="24dp"
            android:src="@drawable/arrow_left" />
    </LinearLayout>
</android.support.design.widget.NavigationView>

Try it, and let me know if it helps.

Thank you for help. I tried it but i got many errors (missing Strings...). And the Image stay same. Nothing changes at the Image so it didnt worked. — Excel1, Dec 26 '16 at 20:03
@Excel1 remove the tag and you've got to use your own string. The first ImageView inside navigation view is your Header. You also have to Initialize NavigationView in your java file. — Abhi, Dec 26 '16 at 20:06
@Excel1 Try this [link](http://www.android4devs.com/2015/06/navigation-view-material-design-support.html) — Abhi, Dec 26 '16 at 20:11
I red it. But they also used an Image like: android:background="@drawable/background_material". But i think, that their Image got used correctly — Excel1, Dec 26 '16 at 20:23
@Excel1 use android:src="@drawable/background_material" instead of android:background="@drawable/background_material". And also use android:scaleType="centerCrop" — Abhi, Dec 26 '16 at 20:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131528/discussion-between-bhavesh-misri-and-excel1). — Abhi, Dec 26 '16 at 20:45

Android: Navigation Drawer Header Image

2 Answers2

Linked