LayoutSheet Extension

LayoutSheet [Formerly : TopSheet] is a micro extension by XyberNeo that can create a dialogues in App such as Top and Bottom Sheet as well as Center Dialogue


Firstly, a huge thanks for considering this extension, your support is truly appreciated!
This document covers the use of this extension and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to email at [email protected] Thank you so much!

Some Information

  • Decompiling of this extension is prohibited
  • Source Codes of this extension are available but on agreement of the decided policy
  • The sole ownership of this extension is reserved by XyberNeo
  • There are 5 blocks in the current version
  • All blocks are well commented
  • Current Version : 2.0 RangHi

Importing the Extension.

  1. 1.
    You can either download this extension to your device or use this link to import it to your builder :
  2. 2.
    We will be using MIT App Inventor for this tutorial.
  3. 3.
    So once we are done till here, in the left pallet of your builder, you get the last option of Extensions, Click it and it will show you all available extensions in the project, there will be an option on the top called "Import Extension"
  4. 4.
    Once you click on it, it will show you a popup with 2 options, import from url and chose from device, you can import the extension via your preferred method

Register LayoutSheet

This block will be used to register our LayoutSheet to the user. It requires 3 inputs, they are as follows :
  • Component : Component block of the specific component
  • Height : In px format
  • Width : In px format (Set to -1 for fill parent)
Any example is attached below :

Show LayoutSheet

This block will show the layout in the form of Bottom/Top Sheet or Centre Dialogue based on the gravity value.


An after event block which gets triggered after the dialogue,TopSheet or Bottom Sheet is shown

Dismiss LayoutSheet

There is nothing to explain about this block, as the name suggests, it will dismiss the LayoutSheet


An after event block which gets triggered after the dialogue,TopSheet or Bottom Sheet is dismissed


This block is used to check if the LayoutSheet is currently being shown or not, will return True if its being Shown as False


Set it to True if you want the dialogue/Sheet to get disable if click outside the dialogue else set to false
Returns True/False based on the cancelable condition
You can define cancelable from Properties section too


Set Dim Amount between 0 to 1 (Float values, eg : 0.1, 0.2, 0.3 )
Returns the dim amount currently set
You can define dim amount from Properties section too


Set this value to define display type,
Set this value to 0 for CenterDialogue
Set this value to 35 for TopSheet
Set this value to 85 for BottomSheet
You can define dim amount from Properties section too

Coming Up in Version 3.0 RangSk

  1. 1.
    Gradient Background
  2. 2.
    Show Animations
  3. 3.
    Hide Animations

Credits and Thanks