Transparent Navigation Drawer with Custom Layout - Android

Trying to make Totally transparent Navigation Drawer with Custom Design (trying to include only Custom layout).

Transparent background and Zero elevation in Navigation Drawer.
I do not want default header or menu items, I want to add custom design in other xml Layout then include inside

How can I achieve this?

Solution

Video Example:

If you want, make your Navigation Drawer totally Transparent then use this. You can make your custom design in xml then include inside NavigationView.

<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawerlayout" <!-- we will use this layout id in java for hide elevation -->
android:orientation="vertical"
android:focusableInTouchMode="true"
>

<com.google.android.material.navigation.NavigationView
    android:background="@android:color/transparent" <!-- for transparent -->
    android:layout_width="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    android:layout_height="match_parent">

    <include layout="@layout/custom_nav_drawer" />

</com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

in our Activity java class for hide drawer Shadow/elevation

DrawerLayout drawerLayout=findViewById(R.id.drawerlayout);
drawerLayout.setDrawerElevation(0f);

Answer is complete here.

But if you want code of this DrawerLayout with circular Image Here is full code.

add Dependencies

//drawer layout
implementation "androidx.drawerlayout:drawerlayout:1.1.1"
//circle image
implementation 'com.mikhaellopez:circularimageview:4.3.1'

custom_nav_drawer.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layoutCustomNavDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

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

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="36dp"
        app:cardBackgroundColor="@color/white"
        app:cardCornerRadius="20dp"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <!-- space  for view just hahah -->
            <View
                android:layout_width="match_parent"
                android:layout_height="150dp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <!-- buttons in nav -->
                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:focusable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    app:cardElevation="0dp"
                    app:cardUseCompatPadding="true">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <ImageView
                            android:layout_width="23dp"
                            android:layout_height="23dp"
                            android:layout_marginStart="10dp"
                            android:src="@drawable/ic_direction" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="15dp"
                            android:fontFamily="@font/medium"
                            android:text="Bill pay"
                            android:textColor="@color/black"
                            android:textSize="16sp" />


                    </LinearLayout>


                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:focusable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    app:cardElevation="0dp"
                    app:cardUseCompatPadding="true">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <ImageView
                            android:layout_width="23dp"
                            android:layout_height="23dp"
                            android:layout_marginStart="10dp"
                            android:src="@drawable/ic_direction" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="15dp"
                            android:fontFamily="@font/medium"
                            android:text="Recharge"
                            android:textColor="@color/black"
                            android:textSize="16sp" />


                    </LinearLayout>


                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:focusable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    app:cardElevation="0dp"
                    app:cardUseCompatPadding="true">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <ImageView
                            android:layout_width="23dp"
                            android:layout_height="23dp"
                            android:layout_marginStart="10dp"
                            android:src="@drawable/ic_direction" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="15dp"
                            android:fontFamily="@font/medium"
                            android:text="Complaint Preference"
                            android:textColor="@color/black"
                            android:textSize="16sp" />


                    </LinearLayout>


                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:focusable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    app:cardElevation="0dp"
                    app:cardUseCompatPadding="true">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <ImageView
                            android:layout_width="23dp"
                            android:layout_height="23dp"
                            android:layout_marginStart="10dp"
                            android:src="@drawable/ic_direction" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="15dp"
                            android:fontFamily="@font/medium"
                            android:text="Special offer"
                            android:textColor="@color/black"
                            android:textSize="16sp" />


                    </LinearLayout>


                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:focusable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    app:cardElevation="0dp"
                    app:cardUseCompatPadding="true">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <ImageView
                            android:layout_width="23dp"
                            android:layout_height="23dp"
                            android:layout_marginStart="10dp"
                            android:src="@drawable/ic_direction" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="15dp"
                            android:fontFamily="@font/medium"
                            android:text="Bill pay"
                            android:textColor="@color/black"
                            android:textSize="16sp" />


                    </LinearLayout>


                </androidx.cardview.widget.CardView>
            </LinearLayout>
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_gravity="top"
        android:layout_marginStart="4dp"
        android:layout_marginTop="45dp"
        app:cardBackgroundColor="#FEF9DB"
        app:cardCornerRadius="7dp"
        app:cardUseCompatPadding="true"
        app:strokeColor="#FFC50A"
        app:strokeWidth="1dp">

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

            android:orientation="horizontal">

            <com.mikhaellopez.circularimageview.CircularImageView
                android:id="@+id/nav_profile"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_marginStart="30dp"
                android:src="@drawable/png_user_photo_blank"
                app:civ_border_color="#3f51b5"
                app:civ_border_width="1dp"
                app:civ_shadow="false"
                app:civ_shadow_color="#3f51b5"
                app:civ_shadow_radius="10dp" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginStart="10dp"
                android:layout_toEndOf="@+id/nav_profile"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/roboto_medium_numbers"
                    android:text="Akshay Jiii"
                    android:textColor="@color/black"
                    android:textSize="17sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/semibold"
                    android:text="987654321"
                    android:textSize="14sp" />
            </LinearLayout>

            <ImageView
                android:layout_width="30dp"
                android:layout_height="27dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:src="@drawable/ic_arrow_right" />
        </RelativeLayout>


    </com.google.android.material.card.MaterialCardView>
</FrameLayout>

Thanks Happy Coding:)