SlidingDrawer in Android with Example

SlidingDrawer is a common requirement in android mobiles to view the content whenever needed by sliding horizontally as well as vertically. In this article, let us check out Sliding Drawer which is used to hide the content out from the screen and allows the user to drag a handle to bring the content on the screen whenever needed in a very user-friendly way. The sliding drawer is a special widget and it contains two children's views, one to handle that the user’s drags and the other is content attached to the handle which dragged along with it. 

Important Methods of SlidingDrawer

As this is the sliding drawer, we can drag and see the contents whenever necessary. So basically, open and close are the very important methods associated with that. In our example, using that lets us have a small demo code. Besides, those other important methods are also there and they are also discussed here. To initialize(or instantiate) a variable of SlidingDrawer, we need to do like below

First initiate the SlidingDrawer, slidingDrawer is the id of SlidingDrawer defined in activity_main.xml. Here using slidingDrawer as object and this is used throughout next

val slidingDrawer = findViewById<SlidingDrawer>(R.id.slidingDrawer)

open the Sliding Drawer

slidingDrawer.open(); 

close the Sliding Drawer

slidingDrawer.close()

open the Sliding Drawer but with an animation

slidingDrawer.animateOpen()

close the Sliding Drawer but with an animation

slidingDrawer.animateClose()

To check whether the drawer is open or not

val isSliderSrawerOpen: Boolean = slidingDrawer.isOpened()

If we do not want touch events to occur, set this

slidingDrawer.lock()

In order to process the touch events if accidentally locked or due to some requirement got locked

slidingDrawer.unlock()

Setter Methods

1. setOnDrawerCloseListener {}

This method is used to sets the listener that receives the notification when the drawer becomes close. The name of the method is self-explanatory. 

slidingDrawer.setOnDrawerCloseListener {
    // add code here
}

2. setOnDrawerOpenListener {}

This method is used to set the listener that receives the notification when the drawer becomes open. The name of the method is self-explanatory.

slidingDrawer.setOnDrawerOpenListener {
    // add code here
}

3. setOnDrawerScrollListener {}

This method is used to set the listener that receives the notification when the drawer starts or ends a scroll. The name of the method is self-explanatory.

slidingDrawer.setOnDrawerScrollListener {
    // add code here
}

Important Attributes of SlidingDrawer

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project.

Then create a new layout for each item of the list view. Go to app > res > layout > right-click > New > Layout Resource File and create a new layout file and name this file as list_item.xml. This XML is going to hold the contents which you are specifying in the ArrayAdapter. Let us declare them in LinearLayout with a vertical orientation so that contents can be scrolled up and down in a vertical direction.

Now, create a drawable file for the background of the drawer layout. Go to app > res > drawable, right click and select New > Drawable Resource File and create a new file and name this file drawer_bg.xml. In this file we will set a corner radius and a background tint to separate the drawer layout from the main screen.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- textview as a content of the background -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is the background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- Sliding drawer layout -->
    <SlidingDrawer
        android:id="@+id/slidingDrawer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:content="@+id/drawerContent"
        android:handle="@+id/handleButton"
        android:orientation="horizontal"
        android:rotation="180"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <!-- Button to open the SlidingDrawer -->
        <Button
            android:id="@id/handleButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rotation="270"
            android:text="Open"
            android:textColor="#fff" />

        <!-- layout for the content of the SlidingDrawer -->
        <LinearLayout
            android:id="@id/drawerContent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal"
            android:background="@drawable/drawer_bg"
            android:rotation="180">

            <!-- Define all your current, Widgets here which
                 you want to add in Sliding Drawer Layout -->
            <ListView
                android:id="@+id/listView"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                tools:listitem="@layout/list_item" />
        </LinearLayout>
    </SlidingDrawer>
</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- TextView for the list item -->
    <TextView
        android:id="@+id/name1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textColor="@color/white" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/colorPrimary"/>
    <corners android:topRightRadius="32dp" android:bottomRightRadius="32dp"/>

</shape>

Design UI:

Step 3: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.

package org.geeksforgeeks.demo;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SlidingDrawer;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    // Declare the cryptocurrency name array
    private String[] nameArray = {
        "Bitcoin", "Ethereum", "Litecoin", "IOTA", "Libra", "Monero",
        "EOS", "NEO", "ATOM", "Tether", "XRP", "Bitcoin Cash", "Binance Coin",
        "REN", "Bitcoin SV", "USD Coin", "Stellar", "Tezos", "Dash", "Zcash"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // initiate the SlidingDrawer
        SlidingDrawer slidingDrawer = findViewById(R.id.slidingDrawer);

        // initiate a Button which is used for handling the content of SlidingDrawer
        // We can able to have open and close methods for this handleButton
        Button handleButton = findViewById(R.id.handleButton);

        // initiate the ListView that is used for content of SlidingDrawer adapter
        // for the list view. As all are text, it is defined as ArrayAdapter<String>
        // Your cryptocurrency items are going to be displayed via this view using
        // below cryptocurrency ArrayAdapter
        ListView listView = findViewById(R.id.listView);

        // Below syntax is for defining ArrayAdapter
        ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(
            getApplicationContext(),
            R.layout.list_item,
            R.id.name1,
            nameArray
        );

        // set an adapter to fill the data in the ListView
        listView.setAdapter(arrayAdapter);

        // implement setOnDrawerOpenListener event, name itself suggests that
        // we need to write code for drawer opening
        slidingDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener() {
            @Override
            public void onDrawerOpened() {
                // When drawer is opened, we may need to indicate user that close option is available,
                // so just setting text to close. But required functionality can be done here
                handleButton.setText("Close");
            }
        });

        // implement setOnDrawerCloseListener event, name itself suggests we need to write close events
        slidingDrawer.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener() {
            @Override
            public void onDrawerClosed() {
                // if close is done, we should have the option to open. according
                // to the requirement, carry out necessary steps for close
                handleButton.setText("Open");
            }
        });
    }
}

package org.geeksforgeeks.demo

import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.Button
import android.widget.ListView
import android.widget.SlidingDrawer
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private var nameArray = arrayOf("Bitcoin", "Ethereum", "Litecoin", "IOTA", "Libra", "Monero",
        "EOS", "NEO", "ATOM", "Tether", "XRP", "Bitcoin Cash", "Binance Coin",
        "REN", "Bitcoin SV", "USD Coin", "Stellar", "Tezos", "Dash", "Zcash")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // initiate the SlidingDrawer
        val slidingDrawer = findViewById<SlidingDrawer>(R.id.slidingDrawer)

        // initiate a Button which is used for handling the content of SlidingDrawer
        // We can able to have open and close methods for this handleButton
        val handleButton = findViewById<Button>(R.id.handleButton)

        // initiate the ListView that is used for content of SlidingDrawer adapter
        // for the list view. As all are text, it is defined as ArrayAdapter<String>
        // Your cryptocurrency items are going to be displayed via this view using
        // below cryptocurrency ArrayAdapter
        val listView = findViewById<ListView>(R.id.listView)

        // Below syntax is for defining ArrayAdapter
        val arrayAdapter = ArrayAdapter(applicationContext, R.layout.list_item, R.id.name1, nameArray)

        // set an adapter to fill the data in the ListView
        listView.adapter = arrayAdapter

        // implement setOnDrawerOpenListener event, name itself suggests that
        // we need to write code for drawer opening
        slidingDrawer.setOnDrawerOpenListener {
            // When drawer is opened, we may need to indicate user that close option is available,
            // so just setting text to close. But required functionality can be done here
            handleButton.text = "Close"
        }

        // implement setOnDrawerCloseListener event, name itself suggests we need to write close events
        slidingDrawer.setOnDrawerCloseListener {
            // if close is done, we should have the option to open. according
            // to the requirement, carry out necessary steps for close
            handleButton.text = "Open"
        }
    }
}

Output: