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"?>
<resources>
  <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>
  
  <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>
  </style>
</resources>

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="http://schemas.android.com/apk/res/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="http://schemas.android.com/apk/res/android" />

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.

<?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="http://schemas.android.com/apk/res/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">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
        <activity android:screenOrientation="portrait" android:configChanges="keyboardHidden|orientation" android:name="appinventor.ai_bobans_s73.SideMenu.Screen2" android:theme="@style/Theme.myCustomTheme" android:windowSoftInputMode="stateHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

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