Creating a drawer

I was wondering if it would be possible to create a drawer like you see in some apps. They usually show up with a tab at the top or bottom of the screen and you can click it to open or drag it. I wasn’t able to create a dragging effect, though I’m confident it can be done, and I might look at that next, but I did finally get it to open and close with the appearance of a drawer. Given the nature of this app example, I recorded a quick video to show it in action. One thing I need to note, I have a button that I placed at the bottom of the screen to simulate the tab of the drawer, but it does not show up on the emulator. It did however show up fine on my EVO. Not surprised given the significant difference in screen size. When the drawer is open you will notice in the video there is a close button, which is the current state of my “missing” open button.

Lets start by taking a look at the video and then I’ll walk through the designer, blocks and step through.

As you can see, it’s not the sharpest drawer in the world. My goal was to demonstrate that there are many possibilities with the App Inventor if you just think through it and are not afraid to be frustrated through the trial and error process.

Ok, lets start with the designer and see what I used to setup the scene. Keep in mind, that I tried many different approaches and this was the one that worked best for me. It does not mean this is the only or the best way to do this. As with any new endeavor, if I keep testing I may find better ways to do this. Maybe you already know a better way? Become a contributor and join our team to provide content to the community. You can use the contact form here or on http://www.tAIR.com to request membership.

drawer1

For the UI I setup the following components

  • VerticalArrangement1 with the width set to Fill parent
    • HorizontalArrangement1
      • Button named UpBtn with text property set to Slide UP
      • Button named DownBtn with text property set to Slide DOWN
  • VerticalArrangement2 with the width set to Fill parent
  • VerticalArrangement3 with the width set to Fill parent and height set to 75 pixels
  • VerticalArrangement4 with the width set to Fill parent and height set to 210
    • Label1 with text property set to “This is a page”
    • Button4 with text property set to “Button”
  • Button named OpenBtn with text property set to “Open”
  • Canvas named Drawer with the width set to Fill parent and a picture set in the properties. Make sure it’s wide enough to fill the width, and tall enough to fill at least 3/4 of the height.
    • ImageSprite1 with the width and height both set at 125 pixles. This can also differ depending on the the image you use, oro the number of images used that need to fit on the canvas.
  • Clock1 with TimerAlwaysFires and TimerEnabled both unchecked in properties and TimerInterval set to 250. I used this to create a short delay, which helps achieve a bit more realism to the drawer effect. If you pay close attention in the video, you will notice the instant close and open when I use the buttons at the top versus the close and open (if it fit on screen) buttons.
  • Notifier named DrawerNotifier

After you complete setting up the UI, go back to the Screen1 property and uncheck Scrollable. Also, as I noted earlier that the results of what I saw on the screen, differed significantly from my EVO to that of the emulator. Depending on your device you may need to play around with the height setting of VA3 and VA4 until everything fits just right on screen. Now that the UI is taken care of, lets put it all together in the Blocks Editor.

drawer2

When the app starts you’ll be presented with the two buttons at the top, you’ll see the label and button that represent some page content and if the resolution is set right, you’ll also see an open button at the bottom.

Clicking the Slide UP button

  • When you click Slide UP VA3 and VA4.visible will be set to false
  • Drawer height (our canvas) will take the current height and add 150 pixels
  • The button Open at the bottom, will be renamed to Close

In order to fill the screen with another component we hide a couple existing ones, which are currently being used as a buffer to keep the canvas off the screen. Once those to components are hidden, we make sure our canvas fills the screen by adding pixels to it’s height. Finally we rename the Open button to Close so that it reflects it’s current state. The drawer is currently open, correct?

Clicking the Slide DOWN button

  • When this button is clicked, we reverse what we did
  • VA3 and VA4.visible are set to true again
  • 150 pixels are subtracted from the Drawer (canvas) height
  • Close button is renamed to Open

Clicking the Open button

  • For the open button I used the clock to give it some delay
  • When you click Open TimerAlwaysFires and TimerEnabled are set to true for the clock
  • The clock fires and when the interval is reached
  • Clock1.Timer does the ifelse test
  • If the label of the open button was Open at the time it was clicked
    • The label is renamed to Close
    • VA4 and VA3 visible is set to false
    • We add 150 pixels to the Drawer hieght
    • We disable TimerAlwaysFires and the Timer

Clicking the Open button while it’s label is set to Close

  • If the label reads Close when we click that button the else-do portion of the ifelse test will run, and we reverse what we did
  • The label of that button is set to Open
  • We decrease the Drawer height by 150 pixels
  • VA3 and VA4 are both set to true
  • We disable TimerAlwaysFires and the Timer

There you have it, a simple drawer effect. Try it out and see if you can build on it and use it for some cool effects in your app.

You may also like...