CODEWITHSUNDEEP
androidandroid-layoutandroid-fragmentsnavigation-drawerdrawerlayout
dev90
dev90

Reputation: 7529

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

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.

enter image description here

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>

Upvotes: 1

Views: 2907

Answers (4)

MakerModder
MakerModder

Reputation: 1571

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.

Upvotes: 0

Faisal
Faisal

Reputation: 616

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.

Upvotes: 0

Muhammad Waleed
Muhammad Waleed

Reputation: 2601

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="[email protected]" />

</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);
            }
        });

Upvotes: 0

Amir
Amir

Reputation: 16587

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>

Upvotes: 1

Related Questions