How to Create Sliding Drawer For Displaying Image in Android?

A Sliding Drawer in Android is a mechanism of displaying hidden content on the screen when invoked and displayed by a handle generally a Button or an ImageView. Hidden content can be a view of any type. In General, hidden content can be of any ViewGroup. A sample photo of the Slider Drawer is shown below.

It is very similar to a Navigation Drawer. Slider Drawer orientation (top, left, right, bottom) can be changed programmatically. However, in default mode, a Slider Drawer is placed at the top of the screen. In this article, we will show you how you could display an Image using a Slider Drawer in Android. Follow the below steps once the IDE is ready.

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. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Add an Image Asset or Import an Image in the drawable folder

We added an Image Asset as shown below. This view will invoke the hidden content

Step 3: Import another Image Source for hidden content

Import an image and store it in the drawable folder.

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Add a Sliding Drawer as shown below. Set the orientation to 180 to align it to the left of the screen. Add two ImageViews inside the Sliding Drawer opening and closing tags. First ImageView will display the asset and second the hidden content. Now add handle attribute to first ImageView and content to second ImageView in the Slider Drawer.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <SlidingDrawer
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:content="@id/image_view_2"
        android:rotation="180"
        android:handle="@id/image_view_1"
        tools:ignore="UselessParent">

        <ImageView
            android:id="@+id/image_view_1"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:src="@drawable/ic_baseline_arrow_forward_ios_24"
            android:rotation="180"/>

        <ImageView
            android:id="@+id/image_view_2"
            android:layout_width="300sp"
            android:layout_height="300sp"
            android:src="@drawable/sample_image"/>

    </SlidingDrawer>

</RelativeLayout>

Step 5: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail. No changes are required here.

Kotlin

package org.geeksforgeeks.slidingdrawer

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

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

Output:

You can see that when we click on the handle, the hidden content is displayed.