Drawer Slider from bottom of screen

Somebody was asking me if I had an idea about how a drawer slider could be setup.
I considered what it would take and Here is what I did. This was originally made to expand from the top down but then they said, wouldn’t it be kool if we could bring it from the bottom up? So this tutorial will focus on the second method which can be easily transformed to come from the top by changing the incrementors and moving the Spacer Arrangement.

Forward

I use an HTC Evo 4g to program on and the screen size is typically around 320 by 530. You may have to make some minor adjustments depending upon how high your screen is.

What you need

1 Background Image for the drawer. I made a simple wood background. 320x300px
1 Vertical Arrangement
1 Horizontal Arrangement – Inside the vertical arrangement – Optional
1 Button
2 Canvas
2 Timers

Step One

From the designer Drag over the following:

1 Vertical Arrangement Renamed SpacerArrangemeent
Set Width to Fill Parent
Set Height to 130px
1 Horizontal Arrangement – Inside the vertical arrangement – Optional
in case you want to put stuff in the SpacerArrangement
1 Canvas set background to None
Set width to Fill Parent
Set Height to 300px
1 Canvas set background to your image.
Set width to Fill Parent
Set Height to 300px
1 Timer Rename to OpenTimer
Set interval to 25ms
Set timer Enabled to False(uncheck the box)
1 Timer Rename to Close Timer
Set Interval to 25ms
Set timer Enabled to False(uncheck the box)
You components should be laid out like this:

DrawerComponents.png

Drawer Components

Step Two

In the blocks editor Do the following:

Create the OpenClockTimer

  • Drag out the OpenClock.Timer.
  • Click to the empty part of the open timer, then select control -> If.
  • Click next to the test connector then click math -> >(greater than).
  • To the left side of the equals block drag the canvas1.height.
  • To the right side of the equals block click near the empty connector and select math -> Number and set it to 0.
  • In the Then Do portion of the if statement,
  • Drag a setcanvas1.height = canvas1.height – 1.
  • Click to the empty part of the open timer, then select control -> If.
  • Click next to the test connector then click math -> =(equals).
  • To the left side of the equals block drag the canvas1.height.
  • To the right side of the equals block click near the empty connector and select math -> Number and set it to 0.
  • Drag an set OpenClock.TimerEnabled block out and set its value to False.
  • Your code for the OpenClockTimer should look like this.
DrawerOpenTimer.png

Drawer Open Timer

Create the CloseClock.Timer

  • Drag out the CloseClock.Timer.
  • Click to the empty part of the open timer, then select control -> If.
  • Click next to the test connector then click math -> >(greater than).
  • To the left side of the equals block drag the canvas2.height.
  • To the right side of the equals block click near the empty connector and select math -> Number and set it to 0.
  • In the Then Do portion of the if statement,
  • Drag a setcanvas1.height = canvas1.height + 1.
  • Click an empty part of the if statement below the canvas1.set height block, then select control -> If.
  • Click next to the test connector then click math -> =(equals)
  • To the left side of the equals block drag the canvas1.height.
  • To the right side of the equals block click near the empty connector and select math -> Number and set it to 300.
  • Drag an set CloseClock.TimerEnabled block out and set its value to False.

Your code for the CloseClockTimer should look like this.

DrawerCloseTimer.png

Drawer Close Timer

 

Create the Button Click Event

  • Drag the Button1.Click event out to the canvas.
  • Click in the empty area of the button click event and select control -> ifelse.
  • Click next to the text connactor and select text -> =
  • On the left side of the = operator block put a button1.text.
  • On the right side of the = operator block put text = to “Open”.
  • Under the thendo portion of the block,
  • Drag a set button1.text to text “Close”.
  • Drag a set OpenClock.TimerEnabled and set the value to true.
  • Drag a set CloseClock.TimerEnabled and set the value to false.
  • Under the elsedo portion of the block,
  • Drag a set button1.text to text “Open”.
  • Drag a set OpenClock.TimerEnabled and set the value to false.
  • Drag a set CloseClock.TimerEnabled and set the value to true.

Your code should look like this:

DrawerButtonCode.png

Full source code:
Here is a screenshot of the entire program.

DrawerFullCode.png

Drawer Full Code

How it works

Depending on the text in the button, the action will take place to open or close the button.

If the button says “Open”, the OpenClock.TimerEnabled gets set to trueand CloseClock.TimerEnabled gets set to false resulting in the canvas1 height being incrementally reduced and thus revealing canvas2.
If the button says “Close”, the OpenClock.TimerEnabled gets set to false and the CloseClock.TimerEnabled is set to true resulting in the canvas1.height incrementally expanding thus pushing canvas2 back below the screen.

ScreenShots

DrawerScrClosed.png

Drawer Screen Closed

DrawerScrOpened.png

Drawer Screen Opened

 

Source

The source code for this tutorial is located on the tAIR code site here.

 

 

3 Comments

  1. dmwalton5 says:

    I see there haven’t been any comments on this since it’s been posted so not sure if I’m posting comments in an inappropriate area here, but I just want to know if anyone else has tried this and found the opening and closing of the drawer to be agonizingly slow. I’ve tried adjusting the timer interval but to no avail. It probably takes a good 10 seconds for the drawer to fully open and close. I’m using a Galaxy S2 for testing purposes. If there’s been a fix or better option posted somewhere I’d appreciate the link. Thanks.

    • Tony Tony says:

      What do you have the timers set to? Also another thing you can change to close it quicker is the height. Currently it is set to add 1 pixel. you can change the 1 to a five on both timers and that will make it go faster. It works pretty fast on my HTC evo. Not sure why your galaxy is going slow unless it is an thing with your version of android.

  2. dmwalton5 says:

    Thanks Tony. I tried changing the 1 to a 3, then a 5, no change. Tried changing the timer interval from 25 ms to 5ms, still no change. Thought it might have been because I had an image on Canvas1 that had to be squished (redrawn) for every pixel change, so removed the background image. No change. I’m running CM9 on my SGS2, shouldn’t be a horsepower problem. Going to try something different now – will use an imagesprite as my drawer on 2nd z-layer, and will have the timer iterate the y position of the imagesprite for every event. My thought is that should have the sprite cover over the canvas, then expose it again on close. I’ll report back later.

Leave a Reply