android how to place two slidingdrawer handler beside each other

Question

(solved by myself)
Need some advice on how to do this.
To clarify i Added two pictures showing the two slidingDrawers on the left side.
They are by default overlapping so i changed one image to the android-icon to see the problem better.

For reference
Im Using this Drawer custom widget created by Alessandro Crugnola
for my two drawer you see on the image left side.

I know by default the handler are position centered and need advice on how to put them beside each other vertically. They must take up hole screen as picture show.

I have tested layout_weight="1" and also putting them inside a LinearLayout
But that give me a half size drawer. I pretty much understand that the default slidingdrawer cannot do this so the question is what kind of hack will do this.

Is there a way to do this?

(UPDATE WITH HOW IT CAN LOOK WHEN TWO IMAGES OVERLAP, se detail in discussion below)

MY XML:

    <Gallery xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/imageEditGallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:spacing="2px"
        android:gravity="top"
        android:paddingTop="20dip"
    />
    <RelativeLayout
        android:id="@+id/InnerRelativeLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <EditText
            android:id="@+id/etx_addtext_drawtext"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:text="Enter text here"
        />

    </RelativeLayout>

    <com.bulk.sprise.editimage.SlidingDrawerLeftFriends
        xmlns:my="http://schemas.android.com/apk/res/com.bulk.sprise"
        android:id="@+id/sliding_drawer_left_friends"
        my:direction="leftToRight"
        android:layout_width="280dip"
        android:layout_height="wrap_content"
        my:handle="@+id/handleLeftFriends"
        my:content="@+id/content"

        >
        <include
            android:id="@id/content"
        layout="@layout/drawer_left_friends_content_editimage" />
        <ImageView
            android:id="@id/handleLeftFriends"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/drawer_left"
            android:topOffset="10dip"
        />
    </com.bulk.sprise.editimage.SlidingDrawerLeftFriends>

    <com.bulk.sprise.editimage.SlidingDrawerLeftOptions
        xmlns:my="http://schemas.android.com/apk/res/com.bulk.sprise"
        android:id="@+id/sliding_drawer_left_options"
        my:direction="leftToRight"
        android:layout_width="280dip"
        android:layout_height="wrap_content"
        my:handle="@+id/handleLeftOptions"
        my:content="@+id/content"
        >
        <include
            android:id="@id/content"
        layout="@layout/drawer_left_options_content_editimage" />
        <ImageView
            android:id="@id/handleLeftOptions"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon"
            android:topOffset="40dip"

        />
    </com.bulk.sprise.editimage.SlidingDrawerLeftOptions>



    <LinearLayout android:id="@+id/linearLayout_container_SlidingDrawerRight"
        android:layout_width="110dip"
        android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:visibility="visible"
        >

        <com.bulk.sprise.editimage.WrappingSlidingDrawer android:id="@+id/slidingDrawerRight"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:handle="@+id/slideHandleButtonRight"
            android:content="@+id/contentLayout2"
            android:orientation="horizontal"
            android:background="@null">

            <ImageButton android:id="@+id/slideHandleButtonRight"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/drawer_right"
                android:onClick="btnSlidingDrawerHandler">
            </ImageButton>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/contentLayout2"
                android:orientation="vertical"
                android:background="@null"

                >

                <ImageButton android:id="@+id/btn_A"
                    android:layout_height="60dip"
                    android:layout_width="60dip"
                    android:text="Button_A"
                    android:background="@android:color/transparent"
                    android:src="@drawable/plus_ball"
                    android:onClick="btnAListener"
                    android:gravity="right"
                    android:scaleType="fitXY">
                </ImageButton>

                <ImageButton android:id="@+id/btn_B"
                    android:layout_height="60dip"
                    android:layout_width="60dip"
                    android:layout_below="@+id/btn_A"
                    android:text="Button_B"
                    android:background="@android:color/transparent"
                    android:src="@drawable/text_ball"
                    android:gravity="right"
                    android:onClick="btnBListener"
                    android:scaleType="fitXY">
                </ImageButton>

                <ImageButton android:id="@+id/btn_C"
                    android:layout_height="60dip"
                    android:layout_width="60dip"
                    android:layout_below="@+id/btn_B"
                    android:text="Button_B"
                    android:background="@android:color/transparent"
                    android:src="@drawable/delete_ball"
                    android:gravity="right"
                    android:onClick="btnCListener"
                    android:scaleType="fitXY">
                </ImageButton>

            </RelativeLayout>
        </com.bulk.sprise.editimage.WrappingSlidingDrawer>
    </LinearLayout>
</RelativeLayout>

Answer 1

Managed to get it working myself.
This is tested and working for anyone who need it.
Have not tested it on different screen sizes.

Create two handler images.
For hdpi one is 58x400 and the other is 58x132.
On the big one place the graphic on the lower part so the top part is transparent.
The other image handler must look like a normal handler.

just arrange your two slidingDawer's in the xml so that
the larger image(slidingDrawer) comes first.

Also you need to do bringToFront() on the smaller handler,
if gui changes place it behind the larger handler

That's it

Answer 2

oh here we go again with another possible solution

What if i have two slidingDrawer inside a LinearLayout and position them
with layout_weight="1" and layout_hight="0dip".

This will force them to even the hight and i have two drawers evenly spaced vertically on the left side.
They will not have full hight of course but i dont want to use them so they both have empty dummy_layout.xml.

What i want to use is there nicely and evenly positioned handler images.

now, I take my question xml code above and put that in as well and make
the handler images view.gone.something....

Now there ar four slidingdrawers on the left sida. Two invisible and two visible.
Now i have the mechanism for the two drawer handlers and they will work on all devices right.

what i see is two drawers right.
If i pull them there must be some way to redirect the pull to my
desired full hight drawer hidden behind.

I think one could set the dummy-drawer invisible but pull the handel as usual.
By doing so trigger a drawer.open() on the real one underneath.

maybe im way-out there and please correct me if im wrong.

are you following..

Answer 3

Lets call both sliding drawers sd1 and sd2. One idea (untested) to address this, would be to have custom images for the handler, and have one sliding drawer (sd1) visible, and other (sd2) hidden (with visibility set to "gone").

And then, in your view, right at the edge where the sd1 handler is displayed have an image (button or plain image) of sd2 handler image right next to it. This will make the UI seem like there are 2 sliding drawers waiting to be pulled out.

So now, when the user pulls out sd1 it works according to design. When he clicks the other image, that makes sd2 visible and it gets pulled out. That way you can have both sliding drawers.

Potential complication of this approach are: 1. Untested 2. You may need a custom view to have the sd2 handler image exactly next to sd1 handler. 3. Handling this approach on different devices with different screen sizes may be tricky.