Search code examples
androidandroid-layoutmaterial-designandroid-navigationviewandroid-vectordrawable

No margin in Navigation Drawer item on pre-lollipop devices


I am implementing the android's default Navigation Drawer Activity. Its working perfectly in API >= Lollipop but in case of Pre Lollipop Devices it is working but there are no margins for item icon and item TextView badge.

To make it easy to understand please check the screenshot below: enter image description here

I tried to search the answer for the issue but I haven't find any solution.

Here is my drawer_activity.xml

<?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_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <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"
        android:background="#FFFFFF"
        app:itemTextColor="#0B0A12"
        app:headerLayout="@layout/nav_header_drawer"
        app:menu="@menu/activity_drawer_drawer"
        app:itemBackground="@drawable/drawer_item_bg"/>

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

Here is my menu_drawer.xml

<?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">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_dashboard"
            android:icon="@drawable/ic_dashboard"
            android:title="Dashboard" />
        <item
            android:id="@+id/nav_appointments"
            android:icon="@drawable/ic_appointments"
            app:actionViewClass="android.widget.TextView"
            android:title="My Appointments" />
        <item
            android:id="@+id/nav_patients"
            android:icon="@drawable/ic_patients"
            app:actionViewClass="android.widget.TextView"
            android:title="My Customers" />
        <item
            android:id="@+id/nav_pat_ref"
            android:icon="@drawable/ic_pat_ref"
            app:actionViewClass="android.widget.TextView"
            android:title="Customer Referrals" />
        <item
            android:id="@+id/nav_pat_rew"
            android:icon="@drawable/ic_pat_rew"
            android:title="Customer Reviews" />
        <item
            android:id="@+id/nav_doc_ref"
            android:icon="@drawable/ic_doc_ref"
            android:title="Business Owner Referrals"
            android:titleCondensed="Business Referrals"/>
        <item
            android:id="@+id/nav_messages"
            android:icon="@drawable/ic_envelope"
            android:title="Messages" />
        <item
            android:id="@+id/nav_profile"
            android:icon="@drawable/ic_profile"
            android:title="My Profile" />
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/ic_setting"
            android:title="Settings" />
        <item
            android:id="@+id/nav_logout"
            android:icon="@drawable/ic_logout"
            android:title="Logout" />
    </group>
</menu>

I am using vector image assest for the navigation item ico. Here is one of them ic_dashboard.xml

<vector android:height="24dp" android:viewportHeight="634.0"
    android:viewportWidth="583.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#BBBBBE" android:pathData="M93.5,155.3c20.6,-14.8 41.6,-29.1 62.4,-43.7c22.3,-15.8 44.5,-31.8 66.8,-47.7c20.8,-14.9 41.7,-29.7 62.5,-44.5c8.1,-5.8 12.6,-5.9 20.6,-0c19.1,13.9 38.5,27.5 57.8,41c22.6,15.8 44.8,32 67.2,48c22.8,16.2 46.3,31.6 68.8,48.2c4.6,3.4 -8.5,-6.2 11.1,8.4c18.7,13.1 37.3,26.2 56,39.4c6.3,4.5 6.3,12 3.8,15.6c-4,5.9 -11.7,6.8 -17.7,2.5c-15.4,-11.1 -30.7,-22.1 -46.9,-33.6c0,104.9 0,209.1 0,313.3c-140.3,0 -280.7,0 -421,0c0,-104.1 0,-208.3 0,-313.1c-10.9,7.7 -21.4,15.1 -31.9,22.5c-5.3,3.8 -10.4,7.8 -15.8,11.4c-6.2,4.1 -13.5,2.5 -17.1,-3.4c-3,-4.8 -0.8,-11.5 5,-15.5M295,480c61.2,0 122.3,-0.1 183.5,0.1c4.5,0 5.6,-1.1 5.6,-5.6C484,375.8 484,277.2 484,178.5c0,-1 -0.1,-2 0,-3c0.1,-1.6 -0.5,-2.5 -2,-3.5c-13.9,-9.8 -27.5,-20 -41.5,-29.7c-21.7,-15 -43.2,-30.4 -64.6,-45.7c-26.1,-18.7 -52.3,-37 -78.5,-55.6c-1.5,-1.1 -2.4,-1.1 -3.9,-0c-15,10.8 -30.1,21.4 -45.1,32.1c-25.6,18.2 -51.1,36.5 -76.8,54.7c-19.7,13.9 -39.5,27.7 -59.2,41.5c-3.8,2.6 -5.6,5.7 -5.6,10.8c0.2,98.3 0.2,196.7 0.1,295c-0,4.1 0.9,5.1 5.1,5.1C173,480 234,480 295,480z"/>
    <path android:fillColor="#BBBBBE" android:pathData="M295.5,402c-18.3,0 -36.6,0 -55,-0c-6.8,-0 -11.6,-4.6 -11.6,-11.1c0,-6.1 4.9,-10.9 11.3,-10.9c36.8,-0 73.6,-0.1 110.4,0c6.8,0 11.5,4.9 11.3,11.3c-0.2,6.3 -4.9,10.6 -11.5,10.6C332.2,402 313.9,402 295.5,402z"/>
</vector>

Please guide how to provide the margins in Pre Lollipop devices.

Thanks.


Solution

  • You can set padding dynamically like below:

    Check for the device's api and if it is less than lollipop then apply below code,

    NavigationView navigationView = (NavigationView) findViewById(R.id.navigationView);
    ((NavigationMenuView)navigationView.getChildAt(0)).setPadding(10, 10, 10, 10);
    

    You need to set padding to NavigationMenuView instead of NavigationView.

    The above code is just example to set padding of child available at position Zero.

    Hope it helps you.