How do i fill up the drawerLayout

I designed my layout for headerView and wanted to add an image icon on its right side,just like the photo.

The problem is that it will show the spaces like in the image, even if I delete the image layout,the spaces are still there.

I try to change the parent layout or child layout for their layout width, any parameter like math parent or wrap content or give a dp.

I tried the official demo to fix it , but it did not work.

Can anyone teach me how to do this?

My nav_heafer.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="wrap_content"
    android:layout_height="match_parent"
    android:background="#66CDAA"
    android:orientation="horizontal">
    <!--the left navigationView-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp">
            <!--the left icon-->
            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                app:srcCompat="@drawable/ic_grid_on_black_24dp" />
            <!--the left textView-->
            <TextView
                android:id="@+id/logIn"
                android:textColor="@android:color/background_light"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/pageLogIn"
                android:background="?android:attr/selectableItemBackground"
                android:clickable="true"/>
            <!--the left button-->
            <Button
                android:id="@+id/logOut"
                android:text="@string/logOut"
                android:layout_width="65dp"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
    <!--I just want a outstanding icon over here,on the right side of navigationView-->
    <!--I try add the LinearLayout,but it shows strange-->
</LinearLayout>


  [1]: https://i.sstatic.net/hQy1d.png
  [2]: https://i.sstatic.net/E9jyu.png

My MainActivity xml:

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    tools:context="com.example.user.taiwandigestionsociety_v11.MainActivity">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF">



        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:theme="@style/ToolBarStyle"
            app:layout_scrollFlags="scroll|enterAlways"
            android:background="@color/colorPrimary">
        </android.support.v7.widget.Toolbar>

        <FrameLayout
            android:id="@+id/mainFrame"
            android:layout_gravity="end"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

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


    <!--control navigationView width-->
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="230dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@android:color/white"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/drawer_menu">
</android.support.design.widget.NavigationView>


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

Solution

all right, finally i understood your problem and solved.This should give you something like below.

so let's get started!

very first of all you want to remove the white background behind your icon, so set transparent background to your navigation view as shown below.

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

    <!-- it works as transparent background color -->
    android:background="@android:color/transparent"

    app:headerLayout="@layout/navigation_header_support" />

for your custom header, you should use relative layout as parent because you want your close icon to be at the most right side of your navigation panel. so we can align that close icon according to parent. this time set background color to your direct child of your relative parent layout, as i did for linear layout.

In order to fit the icon within relative layout, leave some margin from right for linear layout, so leftovers right margin space will be occupied by your icon. set the same width of your icon as much space you pushed your linear layout from right. Here i leave 32dp margin from right, and set the width of my icon to match it.

For proper position of that icon i used the following attributes. You should adjust yours.

android:layout_alignParentRight="true"
android:layout_alignParentTop="true"

The nav_header.xml

   <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">



        <LinearLayout
            android:paddingTop="64dp"

            <!-- background color -->
            android:background="@color/blue_2"

            android:layout_marginRight="32dp"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:textColor="@android:color/white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/activity_horizontal_margin"
                android:drawableLeft="@drawable/ic_pin_primary"
                android:drawablePadding="@dimen/activity_horizontal_margin"
                android:drawableStart="@drawable/ic_pin_primary"
                android:gravity="center_vertical"
                android:typeface="normal"
                android:textSize="18sp"
                android:text="Location"
                android:textStyle="bold" />

            <!-- Other items go here -->
        </LinearLayout>


        <ImageView
            android:background="@color/blue_2"
            android:layout_alignParentRight="true"
            android:layout_marginTop="64dp"
            android:layout_alignParentTop="true"
            android:src="@drawable/ic_pencil"
            android:layout_width="32dp"
            android:layout_height="32dp" />

    </RelativeLayout>