5

Android provides the SlidingDrawer by default looks like below image -

Image http://www.gru.at/android/wp-content/uploads/2010/09/s_open.png

Can we customize this SlidingDrawer looks like semi-circle type with buttons included. For, example take a look at below image -

New Sliding Drawer

Anyone done the SlidingDrawer like above one. I've googled it. Didn't get any nice solution for this. Anyone has idea/example blog for this?

Mohammed Azharuddin Shaikh
  • 41,633
  • 14
  • 96
  • 115
Praveenkumar
  • 24,084
  • 23
  • 95
  • 173
  • you want more than one button or somethingelse? – Mohammed Azharuddin Shaikh Jun 22 '12 at 07:36
  • @hotveryspicy Yes, the middle button will open the sliding drawer and close it. And, others having some other functionality. – Praveenkumar Jun 22 '12 at 07:38
  • Seems quite difficult to achieve the semicirclelike buttons at the edge of the slider. You'd be looking at an image being transparent, and if you want the buttons to be somewhat fitting, you'd probably have to program it with the the areas on which to click via some kind of hitttest on defined polygonal hotspots would be my first guess. – MrJre Jun 22 '12 at 08:58
  • You have to make image like semi-circle, which will give look like you want/ – RobinHood Jun 23 '12 at 02:42

2 Answers2

1

So make sure you have Gimp and 9-Patch at the ready for a lot of trial and error...

Then what you wanna do is...

  1. Add suitable layout to hold buttons where the current ImageView Handle is, like Horizontal LinearLayout or RelativeLayout

  2. Cut the id of the current ImageView Handle and add it to this new Layout you just added

  3. add your buttons to the LinearLayout/RelativeLayout (you can test it now, the buttons and the handle should all slide open at the same time)

  4. Now add Button listeners for each of the buttons

  5. Set the SlidingDrawer to android:allowSingleTap = "false" (tit for tat, you cant have the single tap option anymore, just the slide)

  6. Use a ButtonSelector.xml to have different layouts for buttons be pressed or not pressed.

  7. This is the hard part. Edit the drawables for the buttons, and handle so that they will fit together nicely if the screen is huge, small, landscape, portrait. I recommend using 9-Patch in conjunction with Gimp.

  8. Pat yourself on the back because you now have a totally sweet custom sliding drawer.

Make sure you post pictures and state any problems or issues you ran into as I have never fully implemented this, but I did get to step 6 to make sure it was possible.

Last but not least, Good Luck...

CommonKnowledge
  • 769
  • 1
  • 10
  • 35
0

Thanks for RelativeLayout and FrameLayout These layouts makes my requirement comportable with what i need. I've done like below steps -

  • First, i've splitted the full image into three pieces. And, merge these images with FrameLayout And, gave onclickListner to my center of image(Because, it was contain that arrow marks up/down)

  • And, i've used the Animation for just to open that View as SlidingDrawer

These steps helps me lot.

Praveenkumar
  • 24,084
  • 23
  • 95
  • 173