Search code examples
androidandroid-layoutnavigation-drawerandroid-navigationview

Navigation drawer header layout : "Connected"


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

Here (in green)

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:

this

Sorry for the french in the screenshot ;)


Solution

  • 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 !