Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Sliding Drawer 
3.
Important Methods of Sliding Drawer
4.
Attributes of Sliding Drawer
5.
Example Application
6.
Frequently Asked Question
7.
Conclusion
Last Updated: Mar 27, 2024
Easy

Sliding Drawer in Android

Author Akshit Pant
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this article, we’ll be learning about Sliding Drawer, their importance and their better alternatives.
The sliding drawer hides information from view and allows the user to drag a handle to bring it back into view. SlidingDrawer can be utilized in both vertical and horizontal orientations.
Before jumping directly on how Android Studio does this, first knowing the basic knowledge of Kotlin and how to use it is strongly recommended.

So, let us start reading about how the Sliding drawer works in Android.

Sliding Drawer 

Sliding drawer is a unique widget made up of two child views: the handle that the user drags, and the content that is tied to it and dragged along with it.

A few points to remember about the Sliding drawer are:

  1. The sliding Drawer should only be used as an overlay within layouts. For example, Sliding Drawer should only be used within a Relative Layout or a Frame Layout.
  2. The size of the Sliding Drawer determines how much space the content will take up after it slides out, so match parent should be used for both dimensions.
  3. The sliding Drawer must define the id of the handle and the content within an XML file(layout file).
    Note: In API level 17, this class(Sliding drawer) was deprecated.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Important Methods of Sliding Drawer

Let's look at some of the most essential SliderLayout methods that may be used to manage the SliderDrawer.

  • open(): This method is used to quickly open the drawer. We need to utilize this method because we sometimes open the drawer when we click on a View (onClick button, onClickTextView, etc.).
  • close(): This approach is used to quickly close the drawer onClick of the view.
  • animateOpen(): This method is used to animate the drawer opening. This method is similar to the standard open() function, with the exception that we utilize it when the drawer is needed to be opened with animation.
  • animateClose(): This method is used to animate the drawer closing. This method is identical to the simple close() function, with the exception that we utilize it when the drawer is needed to be closed with an animation.
  • isOpened(): This method describes whether the drawer is currently fully opened or not. This method returns a boolean(true or false). If the drawer is currently open, it returns true; otherwise, it returns false.
  • lock(): This technique is used to lock the SliderDrawer and prevent it from responding to touch events. In some cases, we need to lock the drawer so that touch events are disabled, and we use this way to do so.
  • unlock(): This method unlocks the SlidingDrawer, allowing touch events to be processed. This function is utilized when we lock the drawer for a situation and then need to unlock it so that touch events may be processed.
  • setOnDrawerCloseListener(OnDrawerCloseListeneronDrawerCloseListener): As the name suggests, this method is typically used to set the listener that receives a notification when the drawer becomes close.
  • setOnDrawerOpenListener(OnDrawerOpenListeneronDrawerOpenListener): As the name suggests, this method is typically used to set the listener that receives the notification when the drawer becomes open.
  • setOnDrawerScrollListener(OnDrawerScrollListeneronDrawerScrollListener): As the name suggests, this method is typically used to set the listener that receives the notification when the drawer starts or ends a scroll.

Attributes of Sliding Drawer

Now let's go through some of the basic SliderDrawer attributes that will assist us in customizing it in our layout file (XML); these are given below:

  • id: Used to give SliderDrawer a distinct identity.
  • handle: This particular attribute is used as an Identifier for the child that represents the drawer's handle, and In the application, this is always displayed(means always visible in the app).
  • content: You can specify the contents of the drawer here. The contents can be viewed by clicking on the handle. The open() and close() methods make content visible and invisible, respectively.
  • orientation: The child's orientation can be set horizontally or vertically using the orientation attribute. The default orientation of SliderDrawer is vertical.
  • rotation: The view can be rotated in degrees using this attribute. To rotate the view in different orientations, we set the rotate value in degrees(90/180/270/360 degrees, etc.).

Let's see the use of these discussed methods and attributes with a working example given below.

Example Application

Open Android Studio, start an empty activity, give a name to your app( Sliding Drawer CN in our case), and let Android do the Gradle syncing.

Now, start working on the studio by editing the activity_main.xml file.
 Code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <SlidingDrawer
            android:id="@+id/simpleSlidingDrawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:content="@+id/content"
            android:handle="@+id/handle"
            android:orientation="horizontal"
            android:rotation="180">
         
            <Button
                android:id="@id/handle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#FFEC43"
                android:rotation="270"
                android:text="@string/open_it"
                android:textColor="#FFC9C9" />
        
            <LinearLayout
                android:id="@id/content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:rotation="180">
            
                <ListView
                    android:id="@+id/simpleListView"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent" />
            </LinearLayout>
        </SlidingDrawer>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

In this step, we have added the code for displaying a SlidingDrawer by using its methods and attributes. This XML code will result in one Button for the SlidingDrawer's handle and a ListView for the SlidingDrawer's content.
 

Now, create a new XML layout file (main->res->layout) with the name items_list.xml and add the following code to it.

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
 
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:textColor="#FF5E95" />
</LinearLayout>

Here we're going to make items view that will be presented within each row.

Code:

MainActivity.kt

In this step, we'll open MainActivity and add code to start/instantiate the ListView, SlidingDrawer, and Button. We first create a String array(nameArray) and then use an ArrayAdapter to populate the list with data. Here we have also used setOnDrawerOpenListener event to set handle button text to(Close It) and setOnDrawerCloseListener event to set handle button text to(Open It) on opening and closing of the sliding drawer.

package com.codingninjas.slidingdrawercn

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

class MainActivity : AppCompatActivity() {
    
    var nameArray = arrayOf(
        "Coding",
        "Ninjas",
        "Technical",
        "Blog",
        "Writing",
        "On Android",
        "App",
        "Development",
        "In Kotlin",
        "- Sliding",
        "- Drawer"
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val simpleSlidingDrawer =
            findViewById<View>(R.id.simpleSlidingDrawer) as SlidingDrawer // initiating SlidingDrawer
        val slidingDrawer_bttn =
            findViewById<View>(R.id.handle) as Button // inititating Button 
        val simpleListView =
            findViewById<View>(R.id.simpleListView) as ListView // initiating ListView(that stores content of sliding drawer through string array)
       
        val arrayAdapter =
            ArrayAdapter(applicationContext, R.layout.items_list, R.id.name, nameArray)
        // setting up adapter to fill the data in the ListView
        simpleListView.adapter = arrayAdapter
        // setOnDrawerOpenListener 
        simpleSlidingDrawer.setOnDrawerOpenListener { slidingDrawer_bttn.text = "Close It" }
        // setOnDrawerCloseListener 
        simpleSlidingDrawer.setOnDrawerCloseListener { 
            slidingDrawer_bttn.text = "Open It"
        }
    }
}

Output:

 

     

When you launch the app, you'll notice a button with “OPEN IT” text. The content will appear on the screen after you click or slide on that button. All the content will be hidden if you click the button again. In Android, we used Sliding Drawer to accomplish this.

Frequently Asked Question

  1. How can I add items to the Android Navigation Drawer?
    Declare a DrawerLayout as the root view to add a navigation drawer. Add a layout for the main UI content and another view that contains the contents of the navigation drawer to the DrawerLayout.
     
  2. What is drawer navigation, and how does it work?
    The navigation drawer is a user interface panel that displays the main navigation menu for your program. When the user presses the drawer symbol in the app bar or swipes a finger from the left side of the screen, the drawer appears.
     
  3. What is ViewPager Android studio?
    In Android, ViewPager is a class that allows the user to navigate across data pages by swiping left and right. This class allows you to flip through pages in your app, and moreover, It's a widget that can be found in the support library.

Conclusion

In this article, we learned about Sliding drawer and their implementation. 
You can head over to our Android Development Course on the Coding Ninjas Website to dive deep into Android Development and build future applications.
We hope this article has helped you enhance your knowledge of the Android UI Sliding drawer. If you want to learn more, check out our Android UI and Competitive Programming articles. Do upvote this article to help other ninjas grow.
Happy Coding!

Previous article
Event Handling In Android
Next article
Button in Android
Live masterclass