How to add Cross Button at the top right corner of Navigation Drawer

Question

I have created a navigation drawer,When user click on hamburger icon it opens the drawer. I need to add a close button in drawer. This is what i need to implement.

I have tried, bunt unable to add an image on the Drawer Layout. This is my code to add Navigation Drawer. Kindly guide me how to add an image at the top right corner of Drawer.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/base_layout">

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


</LinearLayout>


    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        android:layout_gravity="start"
        android:background="@drawable/sidebg"
        app:menu="@menu/drawer_menu"
        app:itemTextColor= "#ffffff"
        app:headerLayout="@layout/navigation_drawer_header"
        android:gravity="bottom|left"
        android:dividerHeight="0dp"
        app:itemIconTint="@android:color/white"
        >

    </android.support.design.widget.NavigationView>




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

Amir · Answer 1 · 2016-08-30T19:17:12.883

ActionBarDrawerToggle will fix your problem:

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer icon to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description */
                R.string.drawer_close  /* "close drawer" description */
                ) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                getActionBar().setTitle(mTitle);
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getActionBar().setTitle(mDrawerTitle);
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);

Alternative way:

<?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"
    android:orientation="vertical">

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


        <!--your layout here -->
    </android.support.v4.widget.DrawerLayout>


    <ImageView
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:id="@+id/im_close_btn"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:visibility="gone"
        android:src="@drawable/ic_close"/>
</RelativeLayout>

Thanks, but still i am unable to understand that how to add `X` image at the top right corner — dev90, Aug 30 '16 at 19:11
If you want to use ActionBarDrawerToggle make it RTL will fix your problem. alternative way is to put a close button in corner and when Drawer Open make it visible. — Amir, Aug 30 '16 at 19:14
You're showing the v4 `ActionBarDrawerToggle`, whereas the OP mentions the hamburger icon, which is implemented in the v7 class. Also, the OP states that they want the close `Button` in the drawer, but that's not what your "Alternative way" demonstrates. — Mike M., Aug 30 '16 at 19:33
@MikeM. Thanks, As I understood it's drawerLayout put whole screen so He needs a button to close a DrawerLayout so I suggest alternative way. — Amir, Aug 30 '16 at 19:35

score 0 · Answer 2 · edited May 23 '17 at 10:33

Add a click listener to the imageview of the X icon.

imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Drawer.closeDrawer(Gravity.LEFT);
        }
    });

To add the icon you want to do a sort of custom view

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com" />
</RelativeLayout>

<LinearLayout
    android:id="@+id/drawer"
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:orientation="vertical"
    android:background="@android:color/background_dark"
    android:padding="5dp" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="android-coding"/>
    <ImageView
        android:id="@+id/imageview"
     android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="yourdrawable"
        />
</LinearLayout>

See My source

Same as your question.

Ah yes see the updates. There is probably other ways of doing Custom views. That is the keyword you need. — StarWind0, Aug 30 '16 at 19:32

score 0 · Answer 3 · answered Aug 30 '16 at 19:23

navigation_drawer_header.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="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <Button
        android:id="@+id/closeButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="X"
        android:layout_gravity="right"/>
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@android:drawable/sym_def_app_icon" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android.studio@android.com" />

</LinearLayout>

Java Code

View headerView = navigationView.getHeaderView(0);
        Button closeButton = (Button) headerView.findViewById(R.id.closeButton);

        closeButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawer.closeDrawer(Gravity.LEFT);
            }
        });

score 0 · Answer 4 · answered Aug 30 '16 at 19:25

I believe you want to know how to add the "x" button. Well, Do you see the line below in your NavigationView :

app:headerLayout="@layout/navigation_drawer_header"

This is the header layout of your drawer. Open this layout and put your ImageView in it. As simple as that.

How to add Cross Button at the top right corner of Navigation Drawer

4 Answers4