Align custom view to left of navigation drawer

Question

As you can see the custom layout is at the right and after some research I found that the blank space is reserved for icon and text of item. Is there a way to remove that blank space and align the custom layout to the left?

I am using menu to fill the navigation view as shown below:

<?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:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.NavigationView
        android:id="@+id/nav1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_drawer_items"
        app:itemBackground="@color/app_bg_color"
        app:itemIconTint="@color/text_white"
        app:itemTextColor="@color/text_white"
        android:background="@color/bottom_navigation_color"
        android:fitsSystemWindows="true"
        android:theme="@style/NavigationView" />
</android.support.v4.widget.DrawerLayout>

nav_drawer_items

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/tabs"
    android:title="MAIN">
    <menu>
        <item
            android:id="@+id/nav_highlights"
            android:icon="@drawable/icon_home"
            android:title="@string/nav_home"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_movies"
            android:icon="@drawable/icon_movie"
            android:title="@string/nav_movies"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_originals"
            android:icon="@drawable/icon_original"
            android:title="@string/nav_originals"
            android:checkable="true"/>

        <item
            android:id="@+id/nav_live_tv"
            android:icon="@drawable/icon_live"
            android:title="@string/nav_live_tv"
            android:checkable="true"/>
    </menu>

</item>

<item
    android:id="@+id/support"
    android:title="SUPPORT">
    <menu>
        <item
            android:id="@+id/nav_about_us"
            android:icon="@drawable/icon_about"
            android:title="@string/nav_about_us"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_feedback"
            android:icon="@drawable/icon_feedback"
            android:title="@string/nav_feedback"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_setting"
            android:icon="@drawable/icon_setting"
            android:title="@string/nav_setting"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_logout"
            android:icon="@drawable/icon_logout"
            android:title="@string/nav_logout"
            android:checkable="true"/>
    </menu>
</item>

<item
    android:id="@+id/connect_us"
    android:title="Connect with us">
    <menu>
        <item
            android:id="@+id/social_items"
            android:checkable="true"
            app:showAsAction="always"
            android:title=""
            app:actionLayout="@layout/connect_us"/>
    </menu>
</item>

</menu>

In menu you can see that I am using a layout using app:actionLayout in last item. Here is the connect_us.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="match_parent"
android:background="@color/app_bg_color"
android:orientation="horizontal"
android:gravity="start">

    <ImageView
        android:id="@+id/connect_youtube"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/youtube_icon"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:padding="5dp" />
    <ImageView
        android:id="@+id/connect_facebook"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/facebook_icon"
        android:padding="5dp"/>
    <ImageView
        android:id="@+id/connect_twitter"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/twitter_icon"
        android:padding="5dp"/>

</LinearLayout>

try adding minus left margin to your contact_us layout's parent layout — yogesh lokhande, Feb 08 '18 at 11:34
I tried that but it only moves the layout to left within itself not to the left of drawer — dazed'n'confused, Feb 08 '18 at 11:45
have you tried changing `android:gravity="start"` to `android:gravity="left"`? — Anoop, Feb 08 '18 at 11:56

Abhishek kumar · Accepted Answer · 2018-02-08T13:22:56.053

Change your code according to my , its working . Take RelativeLayout as parent (only change with your connect_us.xml):

connect_us.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="wrap_content"
    android:orientation="horizontal"
    android:background="#FFFFFF"
    android:gravity="left">

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

        <ImageView
            android:id="@+id/connect_youtube"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher"
            android:padding="5dp" />
        <ImageView
            android:id="@+id/connect_facebook"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher"
            android:padding="5dp"/>
        <ImageView
            android:id="@+id/connect_twitter"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher"
            android:padding="5dp"/>
    </LinearLayout>


</RelativeLayout>

Second Solution :

In your main_activity.xml (fix the width of the Navigation drawer)

I used here android.support.design.widget.NavigationView to android:layout_width="320dp" I know its not a proper solution to fix layout_width.

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="320dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer"
    />

And connect_us.xml layout also set the layout_width = "320dp"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="320dp"
android:layout_height="match_parent"
android:background="@color/app_bg_color"
android:orientation="horizontal"
android:gravity="start">

    <ImageView
        android:id="@+id/connect_youtube"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/youtube_icon"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:padding="5dp" />
    <ImageView
        android:id="@+id/connect_facebook"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/facebook_icon"
        android:padding="5dp"/>
    <ImageView
        android:id="@+id/connect_twitter"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/twitter_icon"
        android:padding="5dp"/>

</LinearLayout>

now i'm checking this with my android studio, i will update you @dazed'n'confused — Abhishek kumar, Feb 08 '18 at 12:02
@Abhishekkumar is there any way to change the height of only the item containing social icons? — dazed'n'confused, Feb 09 '18 at 04:28

score 0 · Answer 2 · answered Feb 08 '18 at 12:09

Try adding your navigation view and Custom Layout (connect_us) inside a NestedScrollView as below:-

<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.NavigationView
            android:id="@+id/nav1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:background="@color/bottom_navigation_color"
            android:fitsSystemWindows="true"
            android:theme="@style/NavigationView"
            app:headerLayout="@layout/nav_header"
            app:itemBackground="@color/app_bg_color"
            app:itemIconTint="@color/text_white"
            app:itemTextColor="@color/text_white"
            app:menu="@menu/nav_drawer_items" />

        <include
            android:id="@+id/footer_layout"
            layout="@layout/connect_us"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.DrawerLayout>

Also, make sure to disable Nested Scrolling of NavigationView's child as below:-

ViewCompat.setNestedScrollingEnabled(navigationView.getChildAt(0), false);

There is scrolling issue while using NestedScrollView like that. Issue like: drawer scrolls vertically only when I move my finger in straight vertical line else the drawer closes if I move my finger in curve vertically. — dazed'n'confused, Feb 09 '18 at 03:42
have you added this?ViewCompat.setNestedScrollingEnabled(navigationView.getChildAt(0), false); — Karan Kalsi, Feb 09 '18 at 07:52

score 0 · Answer 3 · answered Feb 09 '18 at 03:38

I got a solution for this use recyclerview and inside your navigation view and add your views to recyclerview and create your adapter :

<?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:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include
                android:id="@+id/my"
                layout="@layout/nav_header_main" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rvNavMenu"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginTop="10dp"
                android:layout_weight="7"
                android:overScrollMode="never" />
        </LinearLayout>
    </android.support.design.widget.NavigationView>


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

Align custom view to left of navigation drawer

3 Answers3

Linked