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

<?xml version="1.0" encoding="utf-8"?>
  <style name="Theme.myCustomTheme" parent="@android:style/Theme.Panel">
    <item name="android:windowAnimationStyle">@style/myCustomAnimation.Activity</item>
	<item name="android:windowIsFloating">false</item>
	<item name="android:backgroundDimEnabled">true</item>
  <style name="myCustomAnimation.Activity" parent="@android:style/Animation.Activity">
	<item name="android:windowEnterAnimation">@anim/slide_from_left_to_right_enter</item>
	<item name="android:windowExitAnimation">@anim/slide_from_left_to_right_exit</item>

Animation 1: slide_from_left_to_right_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<translate android:interpolator="@android:anim/bounce_interpolator" android:duration="600" android:fromXDelta="-100.0%" android:toXDelta="0.0%"
  xmlns:android="" />

Animation 2: slide_from_left_to_right_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<translate android:interpolator="@android:anim/linear_interpolator" android:duration="400" android:fromXDelta="0.0%" android:toXDelta="-100.0%"
  xmlns:android="" />

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.

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!-- **** **** Generated by AppToMaret on Sat Apr 18 21:59:20 CEST 2015 **** If you wish, you can update this file to your needs. **** If updating, it has to be done prior to clicking 'Create New .apk' button AppToMarket **** However, please make sure that your updates WILL NOT break the functionality. **** For example, removing permissions, could cause runtime exceptions **** -->
<manifest xmlns:android="" android:versionCode="1" android:installLocation="auto" android:versionName="1.0" package="appinventor.ai_bobans_s73.SideMenu">
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <supports-screens android:resizeable="false" android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:xlargeScreens="true" android:anyDensity="false" />
<application android:debuggable="false" android:icon="@drawable/ya" android:theme="@android:style/Theme.NoTitleBar" android:label="SideMenu">
        <activity android:screenOrientation="portrait" android:configChanges="keyboardHidden|orientation" android:name=".Screen1" android:windowSoftInputMode="stateHidden">
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
        <activity android:screenOrientation="portrait" android:configChanges="keyboardHidden|orientation" android:name="appinventor.ai_bobans_s73.SideMenu.Screen2" android:theme="@style/Theme.myCustomTheme" android:windowSoftInputMode="stateHidden">
                <action android:name="android.intent.action.MAIN"/>

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




Skip to comment form

  1. very nice tanks alot

    1. you’re welcome

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

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

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

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

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

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

        Hi Bobans
        no it doens’t

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


        1. 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…

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

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

        2. buddy try to remove that error with apk editor pro application u have to re-build the complete app package with apk editor pro then it will not show this type of error.

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

    1. I have the same problem

      1. See my recent post here if it helps.

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

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

  4. I have now an keystore problem

    1. It works now

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

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

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

  6. your apk also dont work

  7. it works now

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

    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 ???

    1. 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
        • Reply

        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..

        1. 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

    reply soon

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

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

    1. 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
        • Reply

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

        1. 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
    • Reply

    to do to create a certificate on the App Market?

    1. Howto Download Keystore from MIT AI2

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

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

    1. 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
        • Reply

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

        1. 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
            • Reply

            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
              • Reply

              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.

              1. 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.

This site uses Akismet to reduce spam. Learn how your comment data is processed.