Navigation drawer header layout : "Connected"

Question

I would like to have the same result for the header of the navigation drawer as in this picture :

Actually, the xml code of my nav header (which I add in the MainActivity using navigationView.addHeaderView(navHeader); ) is the following :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:orientation="horizontal"
    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/loginView"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:gravity="center"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:src="@android:drawable/ic_menu_camera" />

<TextView
    android:id="@+id/loginName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:text="SE CONNECTER"
    android:textAppearance="@style/TextAppearance.AppCompat.Body1"
    android:textSize="16sp" />

</LinearLayout>

And I get that as result:

Sorry for the french in the screenshot ;)

score 0 · Answer 1 · answered Nov 09 '15 at 16:58

0

Try to use android:fitsSystemWindows="true" on your LinearLayout:

<LinearLayout
    ...
    android:fitsSystemWindows="true"
    ...
    >

answered Nov 09 '15 at 16:58

hata

11,633
6
46
69

score 0 · Accepted Answer · answered Nov 09 '15 at 20:21

Problem solved.

I used this :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingTop="24dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView
    android:id="@+id/loginView"
    android:layout_width="24dp"
    android:layout_height="24dp"

    android:layout_marginTop="20dp"
    android:src="@drawable/ic_account_circle_white_24dp" />

<TextView
    android:id="@+id/loginName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="56dp"
    android:layout_marginStart="56dp"
    android:layout_marginTop="23dp"
    android:layout_marginBottom="23dp"
    android:text="@string/connect_yourself"
    android:textAppearance="@style/TextAppearance.AppCompat.Body1"
    android:textSize="14sp" />

</RelativeLayout>

But thank you anyway !

Navigation drawer header layout : "Connected"

2 Answers2