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.

 

Decompile

 

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

 

Sign

 

Verify

 

Zip Align

 

Download

SideMenu_new_zipAlign.apk
SideMenu.aia

  1. Reply

    very nice tanks alot

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

      Reply

      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

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

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

      Reply

      Hi Felik,
      Does it look like this as in the picture https://drive.google.com/file/d/0B0jMf5z0ndLcd3hPdDN3elBlbkE/view?usp=sharing

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

        thanks

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

          Reply

          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

            Reply

            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

              Reply

              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

        Reply

        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

      Reply

      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

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

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

      Reply

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

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

          Reply

          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…

          https://groups.google.com/d/msg/apptomarket/39ba6_p2ffA/2zmGF5RRBAAJ
          https://groups.google.com/d/msg/apptomarket/PjvddHl-ZaI/dZgy9oGLBwAJ

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

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

      Reply

      On Screen2 I use block “close screen with value” http://appinventor.mit.edu/explore/ai2/support/blocks/control#closescreenwithvalue

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

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

          Reply

          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?

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

      Reply

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

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

      Reply

      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

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

          Reply

          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.

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

                Reply

                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.