Next Tutorial
Coding a Sliding Drawer with ListView

Prev Page
View All Tutorials

---

Android Tutorial, Coding a Sliding Drawer

If you are just arriving at this page; and you are not familiar with creating Android Apps,we suggest you begin with our tutorials introduction: About Our Tutorials. From there follow along with each tutorial lesson.

---

This is the App - Sliding Drawer

This is Sliding Drawer Left to Right

Android, How to Code a Sliding Drawer

A sliding drawer is a feature you can add to your UI (user interface), which allows for an additional view to slide out from the side of your app which overlaps your app's view. You can toggle the sliding drawer view by adding a handle to it by using an image.

The drawer can slide from top to bottom, left to right, right to left, or bottom to top. For our app tutorial, the drawer will slide from left to right.

As the drawer has its own self contained view, you can add to it whatever you like; textview, imageview, buttons. You can add a background color also.

For our app, we added a green background to the sliding drawer view, an image, and some text. When you click on the little square icon, the drawer will slide from left to right. And, to slide it back, click the icon again.

To change the position of the square icon, you can use the android:rotation attribute in your SlidingDrawer element code.
Then, just give a number for the value. We gave the android rotation a value of 180, which positioned the icon close to the side of the view.

Also, in the SlidingDrawer element you can code the handle for your drawer. To do so, you use android:handle, and then give it an id name. For this app we gave it the id name of /handle. Then in your ImageView, you make reference to the handle name from the SlidingDrawer element's code. And, you also code the name of the image you want to use as the handle. We used the image named - arrow_icon.png for our handle image.

Additional Reading at Android Developer website
Sliding Drawer Android

Creating - Naming Your App Using AIDE

When creating your app,(from left menu) choose:
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
or
Hello World App Java/xml
if your using the original version of AIDE

You can name your app whatever you like; if your using the name as shown in our example code use;

SlidingDrawer for the App Name and,
for the package name(next line) use:
com.aac.leftrightdrawerexample

The Coded Pages

Code for the app - Sliding Drawer

For this app we need to edit these pages;

1 layout file, main.xml; located at res/layout/main.xml, already created, just replace the code on this page with the code from our Example Code section and save the page.

The layout page has our Sliding Drawer code and it has the handle code for the sliding drawer. The ImageView with the id of handle contains the image: arrow_icon.png, that will be used as the handle for the sliding drawer.

We also wanted to add an image and some text to our drawer view. To do so, we coded a linear layout container, and within that container we added our ImageView element(with the id of imageView1), and to that we added our image - imagedrawer.png, and our TextView element for the text, which we coded in the text string named - drawertext, at res/strings.xml file.

We added a green background to our sliding drawer view. This is coded in the Linear Layout code.

Our app layout has a LinearLayout wrapper, and then a FrameLayout. We used the frame layout so the views would overlap each other. For our image and text in the drawer, we used a LinearLayout to use as the container to put our ImageView and TextView elements. And, we coded our 'handle' image; arrow_icon.png. You can save this image to your smartphone or tablet at the Example Code section on this page.

1 java class page; MainActivity.java; located at app/src/java/MainActivity.java, already created; we have to copy and replace the code on this page with the code from our Example Code section. Save the page once the code is pasted.

The java page also has our import statement codes. The import codes must be coded in your java page for each code class your implementing.
The import codes for this app are:

import android.app.Activity;
import android.os.Bundle;

1 strings file, strings.xml required for this App: The string file located at res/values/strings.xml has the required app_name string for the app name, and the text for each of the views.

Just copy/paste the code from our Example Codes section. Save the page.

EXAMPLE CODE - Code For This Tutorial

JUST copy the code for this tutorial App Name is 'SlidingDrawer" - located at AppProjects/SlidingDrawer in AIDE, open the AIDE app, then open App Projects, THEN select the 'SLidingDrawer', app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name 'SlidingDrawer' is there next to AppProjects like so: AppProjects/SlidingDrawer, then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, Install, and Open your app.


Make sure you SAVED EACH PAGE,(or choose automatic saving in AIDE settings) before you RUN your code. SAVE, RUN, INSTALL, OPEN, your App. Once it has been installed on your tablet, you can open it Simply by Clicking on the Android little green App Icon,with the wording 'SlidingDrawer' on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app again.

Example Code App - SlidingDrawer :
Use Mouse To Copy Paste the Code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:text="@string/viewtext" android:textSize="21dp" android:color="#eeccee" android:layout_gravity="center" android:typeface="serif" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <SlidingDrawer android:id="@+id/drawer" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:handle="@+id/handle" android:rotation="180" android:content="@+id/content"> <ImageView android:id="@id/handle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/arrow_round_right" android:rotation="270"/> <LinearLayout android:id="@id/content" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#324312" android:rotation="180" android:orientation="vertical"> <ImageView android:id="@+id/imageView1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/imagedrawer" /> <TextView android:text="@string/drawertext" android:textSize="21dp" android:layout_gravity="center" android:typeface="serif" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </SlidingDrawer> </FrameLayout> </LinearLayout> _________________________________ package com.aac.leftrightdrawerexample; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } ____________________________ strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">SlidingDrawer</string> <string name="drawertext">This is text in the sliding drawer </string> <string name="viewtext">This is text in the View</string> </resources>
Right Click, SAVE Image as arrow_icon.png
Put at res/drawable-hdpi folder

This free script provided by
JavaScript Kit