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

SlidingDrawer Overlapping other UI components

Author: Wagied Davids
Published? false -- FormatLanguage: W

Problem:

You want the SlidingDrawer to overlap other UI components eg. ListView

Solution:

The default behaviour of the SlidingDrawer component is to maximize to a height of the position of the last component on the screen. But if the last component is at the very bottom, then the SlidingDrawer will not be apparently visible!

The Solution: Manipulating Androids View layer to hide/reveal components! listview - a reference to the ListView component declared in your XML-layout file. slidingDrawer - a reference to the SlidingDrawer component in our XML-layout file.

// Get reference to SlidingDrawer slidingDrawer = (SlidingDrawer) this.findViewById(R.id.slidingDrawer); slidingDrawer.setOnDrawerOpenListener(this); slidingDrawer.setOnDrawerCloseListener(this);

@Override public void onDrawerOpened() {

       listView.setVisibility(ListView.GONE);

}

@Override public void onDrawerClosed() {

listView.setVisibility(ListView.VISIBLE);

}

Discussion:

File: main.xml

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

	<ListView
		android:id="@+id/list_journal"
		android:layout_width="fill_parent"
		android:layout_height="365dip" />

	<SlidingDrawer
		android:id="@+id/slidingDrawer"
		android:handle="@+id/drawerHandle"
		android:content="@+id/contentLayout"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content">

		<ImageView
			android:id="@+id/drawerHandle"
			android:src="@drawable/help_tab_selector"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content">
		</ImageView>

		<LinearLayout
			xmlns:android="http://schemas.android.com/apk/res/android"
			android:id="@+id/contentLayout"
			android:gravity="center"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:background="@drawable/bg">
			<ImageView
				android:src="@drawable/icon"
				android:layout_width="fill_parent"
				android:layout_height="wrap_content"
				android:layout_gravity="center">
			</ImageView>
		</LinearLayout>
	</SlidingDrawer>
</LinearLayout>

File: list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/list_item"
	android:gravity="center"
	android:textColor="@color/white"
	android:textAppearance="?android:attr/textAppearanceMedium"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content">
</TextView>

File: Main.java

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;

public class Main extends Activity implements OnDrawerOpenListener,
		OnDrawerCloseListener {

	private ListView listView;
	private SlidingDrawer slidingDrawer;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		// Set the View Layer
		setContentView(R.layout.main);
		
		List<String> data= getData();

		// Get reference to ListView
		listView = (ListView) this.findViewById(R.id.list_journal);
		ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, R.layout.list_item, data);
		listView.setAdapter(arrayAdapter);

		// Get reference to SlidingDrawer
		slidingDrawer = (SlidingDrawer) this.findViewById(R.id.slidingDrawer);
		slidingDrawer.setOnDrawerOpenListener(this);
		slidingDrawer.setOnDrawerCloseListener(this);
	}
	
	/**
	 * Get some data
	 * @return
	 */
	private List<String> getData()
	{
		List<String> data= new ArrayList<String>();
		for( int i= 0; i < 20; i++)
		{
			data.add( String.valueOf(i));
		}
		return data;
	}

	@Override
	public void onDrawerOpened() {
		listView.setVisibility(ListView.GONE);
	}

	@Override
	public void onDrawerClosed() {
		listView.setVisibility(ListView.VISIBLE);
	}

}

Download:

The source code for this project can be downloaded from http://www.filefactory.com/file/b49a47h/n/TestSlidingDrawerOverList.zip.
mikerowehl 2011-07-10 21:34:13.445 Though this is a good hack for some cases it really shouldn't be the default technique to steer folks to for getting the drawer to overlap. Better is to use a RelativeLayout as the parent and set to drawer to align with the bottom. I'll post a recipe with a pure layout technique.