1

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?

TexD
  • 162
  • 1
  • 10

1 Answers1

1

Video Example: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:)

TexD
  • 162
  • 1
  • 10
  • consider gaining reputation by answering questions and resolving problems of other users instead of posting basically trivial answer for own question. besides that: this question was already asked and answered [HERE](https://stackoverflow.com/questions/41674469/android-navigation-view-transparency), so its duplicate – snachmsm Dec 23 '22 at 17:41
  • @snachmsm , (This is best Example of my question see this [image](https://i.stack.imgur.com/ZNAe8.png) ). Your linked question making only background transparent but not make `elevation zero`. (self QnA is features of `StackOverflow` for help others). This is not duplicate it covers 3 Major problems to make Modern Navigation drawer. – TexD Dec 23 '22 at 17:50
  • still should be answered under already existing question (exacly same "problem") asked earlier, in fact there are plenty of them... some of those might be asked years ago when there were no elevation param, so some answers may be outdated, but still your answer should be placed somewhere there, will gain reputation in time. we don't need yet another link in search engines, we need to ask one clear question and get one (or few alternatives) answers in one topic/link – snachmsm Dec 23 '22 at 22:09
  • Thanks man, this is amazing example and idea. – AG-Developer Feb 14 '23 at 19:08