Sliding drawer with menu and functions...

Question

Hi there,

I am working on a video editing app and on my Wildfire the camera app uses a sliding drawer for image adjustments, but it doesn't only list the options (as icons) but when you tap an icon the actual functions or adjustments that you can make are also part of the sliding drawer (see image).

I was wondering if I also could do that in my app and what I would need to do for that. If someone can help me out or maybe knows a tutorial for this, that would be great.

Thank you.

---

I am still working on the above but I have a problem with my slider and the icons...what happens is that when I tap the slider to close the drawer again everything disappears. (see below)

Slider open: Slider closed:

I don't really know what I may have done wrong...

This is what I have been doing so far:

<?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"
            android:background="@drawable/shape_background_gradient"
                  >

        <VideoView
            android:layout_width="240px"
            android:layout_height="180px"
            android:id ="@+id/VideoViewEdit"
            android:layout_centerHorizontal="true"
            >
        </VideoView>
        <ScrollView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/VideoViewEdit">
            <TableLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:stretchColumns="0">
                <TableRow
                        android:background="@drawable/shape_track_background"
                        android:padding="5px"
                        >
                    <ImageView android:layout_width="wrap_content"
                               android:layout_height="wrap_content"
                               android:src="@drawable/ic_editor_videotrack"
                               android:padding="5px"
                               android:layout_gravity="left"/>

                </TableRow>
                <TableRow
                        android:background="@drawable/shape_track_background"
                        android:padding="5px"
                        >
                        <ImageView android:layout_width="wrap_content"
                               android:layout_height="wrap_content"
                               android:src="@drawable/ic_editor_audiotrack"
                               android:padding="5px"
                               android:layout_gravity="left"/>


                </TableRow>
                <TableRow
                        android:background="@drawable/shape_track_background"
                        android:padding="5px"
                        >
                    <ImageButton android:layout_width="wrap_content"
                               android:layout_height="wrap_content"
                               android:src="@drawable/ic_editor_add_media"
                               android:padding="5px"
                               android:layout_gravity="left"
                               />
                </TableRow>
            </TableLayout>
        </ScrollView>
 <SlidingDrawer
     android:id="@+id/drawer"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:handle="@+id/handle"
     android:content="@+id/content">

     <ImageView
         android:id="@id/handle"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/slider_handle"
         />

     <LinearLayout
         android:id="@id/content"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:orientation="vertical">
        <ImageButton 
            android:id="@+id/button_exposure"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#77000000"
            android:src="@drawable/ic_slider_exposure"
            android:padding="5px"
            android:layout_marginBottom="1px"
            android:layout_gravity="left"/>
        <ImageButton 
            android:id="@+id/button_properties"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#77000000"
            android:src="@drawable/ic_slider_properties"
            android:padding="5px"
            android:layout_marginBottom="1px"
            android:layout_gravity="left"/>
        <ImageButton 
            android:id="@+id/button_special_effects"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#77000000"
            android:src="@drawable/ic_slider_special_effects"
            android:padding="5px"
            android:layout_marginBottom="1px"
            android:layout_gravity="left"/>
        <ImageButton 
            android:id="@+id/button_test1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#77000000"
            android:src="@drawable/ic_slider_exposure"
            android:padding="5px"
            android:layout_marginBottom="1px"
            android:layout_gravity="left"/>
        <ImageButton 
            android:id="@+id/button_test2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#77000000"
            android:src="@drawable/ic_slider_exposure"
            android:padding="5px"
            android:layout_marginBottom="1px"
            android:layout_gravity="left"/>

     </LinearLayout>
 </SlidingDrawer>
</RelativeLayout>

Answer 1

What part are you having trouble with? The drawer or the settings? For the setting check out view stubs, if it's the drawer you're struggling with try SlidingDrawer.