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:
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.
- Button - responsible for showing\hiding the panel.
- 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: <RelativeLayout2: 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.WhiteboardView9: android:id="@+id/whiteboardView"10: android:layout_width="fill_parent"11: android:layout_height="fill_parent" />12:13: <SlidingDrawer14: 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: <Button24: 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: <LinearLayout30: 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: <Spinner39: android:id="@+id/spnShapes"40: android:layout_height="wrap_content"41: android:layout_width="wrap_content" />42:43: <CheckBox44: android:text="Fill"45: android:id="@+id/chkFill"46: android:layout_width="wrap_content"47: android:layout_height="wrap_content" />48:49: <Button50: 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