CODEWITHSUNDEEP
androidandroid-layoutviewnavigation-drawer
Trent Pierce
Trent Pierce

Reputation: 397

Layout Image at the top of NavigationView inside DrawerLayout

I have a NavigationView inside a DrawerLayout, and the NavigationView provides the layout for the drawer that comes from the left side of the screen. I am using this for backward compatibility, and I need an image at the top as you would normally have in a navigation drawer. I have added an imageview to the NavigatonView, but the imageview is in the middle of my drawer. I need it at the top above the menu items. heres my sample code...

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:aapp="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/image_background">

    <!-- This LinearLayout represents the contents of the screen  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- The ActionBar displayed at the top -->
        <include
            layout="@layout/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <!-- The main content view where fragments are loaded -->
        <FrameLayout
            android:id="@+id/flContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <!-- The navigation drawer that comes from the left -->
    <!-- Note that `android:layout_gravity` needs to be set to 'start' -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="?attr/colorPrimaryDark"
        app:menu="@menu/menu_main"
        app:itemTextColor="@color/text_field_font_color">

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/nav_header"
                android:gravity="top"
                android:src="@drawable/nav_header"/>


    </android.support.design.widget.NavigationView>


</android.support.v4.widget.DrawerLayout>

Ive tried changing the android:layout_gravity, and the android:gravity of the imageview with no luck. How can I get this imageview to layout above the menu items in the navigationView?

Upvotes: 1

Views: 2890

Answers (5)

vaibhav
vaibhav

Reputation: 312

Hello you can put layout in navigation view and set image then it work 

 <android.support.design.widget.NavigationView
    android:id="@+id/nvView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="?attr/colorPrimaryDark"
    app:menu="@menu/menu_main"
    app:itemTextColor="@color/text_field_font_color">
  <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">    
          <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/nav_header"
            android:gravity="top"
            android:src="@drawable/nav_header"/>
     </RelativeLayout>

</android.support.design.widget.NavigationView>

Upvotes: 0

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21736

Instead of adding ImageView inside NavigationView, you can create another layout for header and set it to NavigationView using attribute app:headerLayout.

1. Create a layout with ImageView and other widgets as per your needs. Here I have created header layout with ImageView and two TextView's.

nav_header_main.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/nav_header_height"
    android:orientation="vertical"
    android:background="@color/colorAccent"
    android:padding="16dp"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/nav_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textSize="18sp"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[email protected]"
        android:textSize="14sp"
        android:textColor="#ffffff" />

</LinearLayout>

enter image description here

2. Add layout nav_header_main to NavigationView as header layout using attribute app:headerLayout="@layout/nav_header_main".

<android.support.design.widget.NavigationView
    android:id="@+id/nvView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="?attr/colorPrimaryDark"
    app:menu="@menu/menu_main"
    app:itemTextColor="@color/text_field_font_color"
    app:headerLayout="@layout/nav_header_main">

</android.support.design.widget.NavigationView>

OUTPUT:

enter image description here

Hope this will help~

Upvotes: 3

Muthukrishnan Rajendran
Muthukrishnan Rajendran

Reputation: 11622

Hi you can give like this,

layout/nav_header_layout.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/nav_header_height"
    android:background="@color/white"
    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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageView"
            android:layout_centerHorizontal="true"
            android:text="@string/app_name"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/primaryTextColor"
            android:textSize="16sp"
            android:textStyle="bold" />

    </RelativeLayout>


</LinearLayout>

and you can add this in your navigation layout like this,

<android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="?attr/colorPrimaryDark"
        app:menu="@menu/menu_main"
        app:itemTextColor="@color/text_field_font_color"
        app:headerLayout="@layout/nav_header_layout"
         />

Upvotes: 0

Dewey Reed
Dewey Reed

Reputation: 4956

Just right click project -> New -> Activity -> Navigation Drawer Activity and you'll see a sample which is enough to understand how to achieve it.

In short, add app:headerLayout rather than 

<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"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer"/>

Upvotes: 0

Michael Shrestha
Michael Shrestha

Reputation: 2555

You can inflate dynamically from the code like this

navigationView = (NavigationView) findViewById(R.id.NAV_ID_HERE);
View headerView = navigationView.inflateHeaderView(R.layout.nav_header);

in nav_header.xml you can put image or anything you like.

Remove your ImageView from your main xml file and put it inside nav_header.xml .

Upvotes: 0

Related Questions