Thursday, March 17, 2011

Android: Sliding panel

I'm a programmer.
I'm a Java programmer.
I'm a programmer experiencing Android for the first time. I became addicted.


When I first went to design UI for an Android application, I realized very quickly a basic thing: The screen is small.
I put aside old habits, and focused on the following three points:

  • Simplicity
  • Movement space
  • Full functionality (as possible)
I started to create an application that allows user to draw basic shapes on a whiteboard. I was looking for a place to the toolbox (shape's type, color, etc.).  Obviously you can not leave it permanently on the screen, it will reduce significantly the user's movement space. I found that I could simply combine my tool's buttons in the built in menu of my application. I did not connect to this solution. It was not flexible enough in terms of types of objects that I can plant on the menu. Also it required the user clicking on a button on the device - not intuitive enough for my taste. I kept searching and found a cool widget called Sliding Drawer. Hereby ended my seeking. I'll explain in a few simple steps how I used it:
  • In the xml layout file, I defined a SlidingDrawer tag, contains two basic elements:
    • Button - responsible for showing\hiding the panel.
    • Layout - the panel itself.
  • I changed the root layout of my xml to - RelativeLayout. It allowed me to put my SlidingDrawer over the whiteboard panel.
  • I placed my whiteboard panel (which extends view) as the first element in the layout, and SlidingDrawer as the second.
  • In my activity, i have added an open and close listeners to the SlidingDrawer, where I changed the direction of the slider button.
// todo: add code examples and source files
1: <RelativeLayout
2:     xmlns:android="http://schemas.android.com/apk/res/android"
3:     android:orientation="horizontal"
4:     android:layout_width="fill_parent"
5:     android:layout_height="fill_parent"
6:     android:id="@+id/mainLayout" >
7: 
8:     <iAndroid.iMeeting.WhiteboardView
9:         android:id="@+id/whiteboardView"
10:         android:layout_width="fill_parent"
11:         android:layout_height="fill_parent" />
12: 
13:     <SlidingDrawer
14:         android:layout_height="wrap_content"
15:         android:id="@+id/SlidingDrawer"
16:         android:handle="@+id/slideHandleButton"
17:         android:content="@+id/contentLayout"
18:         android:padding="0dip"
19:         android:layout_width="100dip"
20:         android:orientation="horizontal"
21:         android:layout_alignParentRight="true" >
22: 
23:         <Button
24:             android:id="@+id/slideHandleButton"
25:             android:background="@drawable/right_switcher_collapsed_background"
26:             android:layout_width="32dip"
27:             android:layout_height="fill_parent" />
28: 
29:         <LinearLayout
30:             android:layout_width="wrap_content"
31:             android:id="@+id/contentLayout"
32:             android:orientation="vertical"
33:             android:gravity="top|center"
34:             android:background="#115544"
35:             android:layout_height="wrap_content"
36:             android:padding="4dip" >
37: 
38:             <Spinner
39:                 android:id="@+id/spnShapes"
40:                 android:layout_height="wrap_content"
41:                 android:layout_width="wrap_content" />
42: 
43:             <CheckBox
44:                 android:text="Fill"
45:                 android:id="@+id/chkFill"
46:                 android:layout_width="wrap_content"
47:                 android:layout_height="wrap_content" />
48: 
49:             <Button
50:                 android:id="@+id/btnPickColor"
51:                 android:layout_width="wrap_content"
52:                 android:layout_height="wrap_content"
53:                 android:text="Color" />
54: 
55:         </LinearLayout>
56: 
57:     </SlidingDrawer>
58: 
59: </RelativeLayout>

No comments:

Post a Comment