Sidebar – Side Menu [MIT AI2]

Using AppToMarket 4.1 and Screen2 in your project you can achieve this.

Let us begin by making Screen1 and Screen2 that we will use as sidebar or side menu.

Screen1 Designer:
ShowStatusBar: Checked
TitleVisible: Checked
Sizing: I prefer responsive before fixed


Screen2 Designer:
BackgroundColor: None
BackgroundImage: None
CloseScreenAnimation: None
OpenScreenAnimation: None
ShowStatusBar: Checked
TitleVisible: Checked


Main arrangement
BackgroundColor: None
Height: Fill parent
Width: Fill parent
BackgroundImage: None

Left arrangement

For images, buttons, text etc.
Height: Fill parent
Width: 60% or doing this in blocks


Right arrangement
For the simulation of Close Outside.
BackgroundColor: None
BackgroundImage: None
Height: Fill parent
Width: Fill parent

and that’s all in MIT AI2, download and save your project.apk in ..AppToMarket_v41\myApks\ folder.

AppToMarket is where the magic is created, but before we start with AppToMarket we need to create a theme and two animations, left to right and right to left, which in turn will take control over our Screen2.

Theme: mycustomtheme.xml

Animation 1: slide_from_left_to_right_enter.xml

Animation 2: slide_from_left_to_right_exit.xml

this page was very helpful in understanding the animations.

Launch your AppToMarket and browse for your project.




Features & Update Manifest
Select necessary features and update Manifest
Screen: NoTitleBar = TitleVisible: Unchecked
Slider: Set it to Any


Edit Manifest

You’ll have to add android:theme="@style/Theme.myCustomTheme" manually to our Screen2 in the manifest file.

Save Manifest.

and the last thing before you click the Create New.apk button

move your file mycustomtheme.xml to …AppToMarket_v41\temp_myDecompiles\res\values\ folder

move your files slide_from_left_to_right_enter.xml and slide_from_left_to_right_exit.xml to …AppToMarket_v41\temp_myDecompiles\res\anim\ folder


Create New.apk






Zip Align




  1. Reply

    very nice tanks alot

      • bobans on April 29, 2015 at 12:10 pm


      you’re welcome

    • Richard on August 1, 2015 at 10:34 am


    This is superb..very well explained Thanks a lot.

    • felik on November 8, 2015 at 5:33 am


    there is an error when try to install the apk file.
    “There is a problem parsing the package”
    kindly adv

      • bobans on November 8, 2015 at 3:06 pm


      Hi Felik,
      Does it look like this as in the picture

        • felik on November 9, 2015 at 5:02 am


        Hi Bobans
        no it doens’t

        the message is only like this:
        “There is a problem parsing the package”


          • bobans on November 9, 2015 at 3:07 pm


          Sorry but I have no clue why this happens.

          If you wish you may send or post a download link for your app so I can test it for myself…

            • Qrafty on December 10, 2015 at 3:05 am


            It may happens if you download an app that is meant for higher android versions than yours.

              • bobans on December 17, 2015 at 12:51 pm


              That may be, but in this case he did not follow the tutorial to the end..

  2. Reply

    Hi Bobans, when I click Create New.Apk
    This Messege
    “ERROR: The new .apk was not generated due to errors”

    1. Reply

      I have the same problem

        • bobans on December 31, 2015 at 5:07 am


        See my recent post here if it helps.

        I’ll see if I can do a video tutorial….

  3. Reply

    Can you please make a video how to do it because i get an error

  4. Reply

    I have now an keystore problem

    1. Reply

      It works now

  5. Reply

    I have created the app succcesfully but if i swipe the menu dont come

      • bobans on January 3, 2016 at 1:48 pm


      Can you show me your relevant blocks for the swipe gesture…

      1. Reply

        i think i forgot the block im going to try this.

  6. Reply

    your apk also dont work

  7. Reply

    it works now

    • mansi on March 28, 2016 at 8:55 pm


    Sir I am not able to do 60% of sliding of screen2 , despite of following code properly, always 100% sliding occurs and i m not able to see that 40% portion of screen1..its important for me to do this, i have taken mit app inventor as my project, please guide me..what should i do? how i can make that 60% sliding ???

      • bobans on March 29, 2016 at 6:20 pm


      Unsure what could be causing this.
      Without seeing your design, I have not much to go on.

      If you can share screenshots of Screen2 for your design then maybe I can help you….

        • Mansi on March 30, 2016 at 8:05 pm


        Sir, I have solved that problem, but now I am getting ERROR: “The new .apk was not generated due to errors” problem in apptomarket ! what should I
        do? I have ensured that I performed all steps as per this tutorial..

          • bobans on March 31, 2016 at 5:18 pm


          This guide is somewhat old and not updated in relation to the MIT AppInventor new look, so some pictures can be misleading ….

          In your case you may have missed something, see in these two threads if it might be of any help…

    • mansi on March 28, 2016 at 9:07 pm


    reply soon

    • seghier khaled on September 3, 2016 at 12:45 am


    very nice
    how you can control elements in screen 1 by buttons in screen2 ?

      • bobans on September 4, 2016 at 11:48 am


      On Screen2 I use block “close screen with value”

      And on Screen1 block “when Screen1.OtherScreenClosed”

        • Dorian Cervar on April 21, 2017 at 6:11 pm


        hello you help me a lot, can you screenshot blocks for screen one and screen two?

          • bobans on April 21, 2017 at 6:42 pm
          • Author


          If you look at the bottom of the tutorial there is a link for aia download which you can import in MIT..

    • Adolfo on September 12, 2016 at 6:02 pm


    to do to create a certificate on the App Market?

      • bobans on September 12, 2016 at 8:54 pm


    • TCubed on May 31, 2017 at 1:41 am


    menu screen not transparent to Screen 1? something I’ve done wrong? Everything compiled recompiled and completed successfully.

      • bobans on May 31, 2017 at 10:50 pm
      • Author


      You mean menu screen is not transparent over screen1,
      if so did you copy the necessary files to the respective folder before you built the app..

        • TCubed on May 31, 2017 at 11:25 pm


        Correct, trying to rebuild from scratch again tonight and will report step by step

          • bobans on May 31, 2017 at 11:57 pm
          • Author


          Make sure you have background color set to none for Menu Screen, Main arrangement, Right arrangement and only have background color set for the Left arrangement.

            • TCubed on June 1, 2017 at 12:55 am


            Update: Ok, Everything recompiled no errors. I think I found the initial problem. There are 3 screens to my app I placed android:theme=”…” after the Menu screen (screen 2) was placed after the Web screen (screen 3) before. Once built though and recompiled signed etc. I am getting an “app not installed” error “The package appears to be corrupt?

              • TCubed on June 1, 2017 at 2:12 am


              Update #2: Everything loaded properly once I emailed finalized zip file to myself. Last question though, is this menu only made for 2 screens? I see where you mention to use close screen in blocks. Can open screen with value also be used get an error (app stopped) when trying to open any other screen from the Menu (screen 2) screen. Would rather not rebuild if I don’t have to.

                • bobans on June 1, 2017 at 2:53 pm
                • Author


                Without knowing what your code looks like and what you have on screen3, hard to know why your app is crashing.

                Prefer to have as few screens opened as possible at the same time (max 2 screens), I have tested to include screen3 and it works for my test app as it is lightweight app Sidemenu.aia

                You have two options for opening screen3 See the link for more information App Inventor and Multiple Screens or if you download my Sidemenu.aia you can see the same thing..

Leave a Reply

Your email address will not be published.