Sidebar Navigation

Description

Events

• AfterSelecting: Event handler after item selection from the sidebar, returns the position and value of the item.

---

Methods

• Hide: Method for hiding the sidebar with animation. Parameters: String interpolator: String with the selected animation to hide the sidebar. Currently available: Default or LinearInterpolator, AccelerateDecelerateInterpolator, AccelerateInterpolator and BounceInterpolator. Note: For default interpolator, pass an empty text.

• Show: Method for showing the sidebar with animation. Parameters: String interpolator: String with the selected animation to show the sidebar. Currently available: Default or LinearInterpolator, AccelerateDecelerateInterpolator, AccelerateInterpolator and BounceInterpolator. Note: For default interpolator, pass an empty text.

• Start: Method for starting the sidebar, it should be use when initializing the screen. Parameters: 1) List listItem: List with the values to be displayed in the sidebar as a menu. 2) List icons: List with the icons that will be displayed with the items (). 3) List colorIcons: List with the colors in hexcode format for the icons. 4) String imagen: Text with name or location of the image to be displayed in the sidebar. 5) String selectColor: Text with the color in hexcode format when an item is selected. String interpolator: String with the selected animation to show the sidebar (Currently available: Default or LinearInterpolator, AccelerateDecelerateInterpolator, AccelerateInterpolator and BounceInterpolator). Note: listItem, icons and colorIcons lists should be the same size. For default interpolator, pass an empty text.

---

Properties

• AlphaIcon: Specifies the Alpha or opacity for the Icon to be displayed in the sidebar. Also available in Designer Properties. Use number between 0 and 1. Default: 0.56.

• AlphaText: Specifies the Alpha or opacity for the Text to be displayed in the sidebar. Also available in Designer Properties. Use number between 0 and 1. Default: 0.87

• ColorBG: Specifies the color of the sidebar’s background in HexCode format. Also available in Designer Properties. Default: #FFFFFF.

• ColorIcons: Specifies and returns the color of the icons to be displayed in the sidebar in HexCode format. Also available in Designer Properties. Default: #000000

               

• Development: Flag for letting the extension know when your using it in development. Check it at Designer Properties when developing and uncheck it for deployment.

• Elevation: Specifies the shadow effect between the sidebar and the back screen. Also available in Designer Properties. Default: 16

• SetAvatar: Specifies the name or location of the image to be displayed in the sidebar as an avatar.

• SetTextName: Specifies the text to be displayed as a name in the sidebar.

• SetTexteMail: Specifies the email to be displayed as a name in the sidebar.

• TextColor: Specifies the color of the text to be displayed in the sidebar in HexCode format. Also available in Designer Properties. Default: #000000

• TypeFontIcon: Specifies the font of the icons to be displayed in the sidebar. Also available in Designer Properties.

• TypeFontText: Specifies the font of the text to be displayed in the sidebar. Also available in Designer Properties.

• WidthSidebar: Specifies the width size of the sidebar. Also available in Designer Properties. Use number between 0 and 1. Default: 0.8

Interpolators

• AccelerateDecelerateInterpolator: Returns a String with the AccelerateDecelerateInterpolator, useful in Hide, Show and Start blocks.

• AccelerateInterpolator: Returns a String with the AccelerateInterpolator, useful in Hide, Show and Start blocks.

• BounceInterpolator: Returns a String with the BounceInterpolator, useful in Hide, Show and Start blocks.

• LinearInterpolator: Pass an empty text in Hide, Show and Start blocks to select the default interpolator.

---

Best practices

It is a good practice to start the sidebar when initializing the screen and when the screen orientation changes, by setting its arguments: listItem, icons, colorIcons, imagen, selectColor and interpolator.

When you want to display the sidebar use the Show Method. In this example, when the user clicks on the btnMenu, the sidebar will appear with a BounceInterpolator animation.

When the user selects an item in the sidebar, you can use the AfterSelecting Event Handler to know the position and the value of the selected item. Also, if you want to hide the sidebar, you can use the Hide method. In this example, when the user selects the “Reminder” item, the extension hides the sidebar with an AccelerateDecelerateInterpolator animation and notifies the user: “Have a nice day”.

---

Captures by users

---

Changelog

• Jun 16th, 2017 – Sidebar Navigation Drawer AppInventor Thunkable preview
• Jun 18th, 2017 – Sidebar Extension (beta)
• Aug 04th, 2017 – Update: Major and minor bugs fixed.
• Sep 11th, 2017 – Last update: Avatar image, Name and Email text, custom font, custom icon and background color selection included.

---

Helpful Links

I recommend to watch this useful Extension Review made by Pixxi Bomb

Also, for further reading, here you can find more information:

1. Android Dynamic no xml – Custom Adapter Listview
2. How to add swipe gesture on linearlayout without ondown true – Stackoverflow