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”

    • 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

Leave a Reply

Your email address will not be published.