How do i fill up the drawerLayout

Question

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.stack.imgur.com/hQy1d.png
  [2]: https://i.stack.imgur.com/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>

Answer 1

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>

Answer 2

all right this is not an answer to your question. But you can improve your layout as well as performance. Then change your nav layout in your question according to this and update your question once again. then it could be more readable and easy to understand your problems. so anybody could find it easy to answer

Instead using a linear layout with orientation horizontal for icon and textView you can do instead as i shown below.

You current Implementation:

    <LinearLayout
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageView9"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_grid_on_black_24dp" />

        <TextView
            android:id="@+id/newInformation"
            android:textSize="15dp"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/newInformation"
            android:textColor="@android:color/background_light"/>

    </LinearLayout>

Now change that to something like this :

<TextView
    android:id="@+id/person_address"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    <!-- this is where your icon goes -->
    android:drawableLeft="@drawable/ic_grid_on_black_24dp"
    android:drawableStart="@drawable/ic_grid_on_black_24dp"

    <!-- your icon's padding -->
    android:drawablePadding="@dimen/activity_horizontal_margin"

    android:gravity="center_vertical" />

please change your layout into something like this, then i could try to answer your question.