Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Using SlidingDrawer to Overlap Other Components

Author: Mike Rowehl
Published? true -- FormatLanguage: W

Problem:

The proper layout of SlidingDrawer isn't covered to well in the SDK documentation. Here's how to use the control to overlay other components in a layout. As well as how to position elements in the underlying layout to avoid the drawer handle.

Solution:

The SlidingDrawer really should be in a FrameLayout or a RelativeLayout. Using it in a LinearLayout makes it difficult to get the drawer to overlay the rest of the controls on the screen. When using a RelativeLayout a new problem arises however. The SlidingDrawer wants to overlay everything. Thus positioning it over a ListView could result in the bottom entries of the list being covered. A clean solution is to use a spacer in the underlying layout to get everything to line up.

Discussion:

First off is the layout including the SlidingDrawer itself. Note that there's a spacer TextView aligned with the bottom of the RelativeLayout using the DrawerButton style. The drawer handle itself is also a TextView using the same style. Positioning the main ListView for the layout above the spacer ensures that none of the list items are hidden by the handle when the drawer is closed.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
    <TextView style="@style/DrawerButton" android:layout_alignParentBottom="true"
            android:id="@+id/spacer" android:text="Spacer" />
    <ListView 
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/contact_list"
        android:layout_alignParentTop="true"
        android:layout_above="@id/spacer"
        >
    </ListView>
    
    <SlidingDrawer android:layout_width="fill_parent"
        android:id="@+id/drawer" android:handle="@+id/drawer_button"
        android:content="@+id/drawer_content" 
        android:layout_height="wrap_content" android:layout_alignParentBottom="true">
        <TextView android:id="@id/drawer_button" style="@style/DrawerButton"
            android:gravity="right|center_vertical" android:text="Handle"
            ></TextView>
        <ListView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/drawer_content"
            android:background="#000000"
            >
        </ListView>
    </SlidingDrawer>
</RelativeLayout>

I pull the DrawerButton settings out into a style so that I don't have to change them on both the spacer and the handle item to keep them in sync:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="DrawerButton" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">#EEEEEE</item>
        <item name="android:textColor">#111111</item>
        <item name="android:gravity">right|center_vertical</item>
        <item name="android:paddingRight">3pt</item>
        <item name="android:paddingTop">2pt</item>
        <item name="android:paddingBottom">2pt</item>
    </style>
</resources>

Now the drawer should slide up over the ListView on the main screen without hiding any of the content when closed.

No records found.