Added Scrollable Arrangements

Add Scrollable versions of Horizontal and Vertical Arrangements

Author: Kseniia Shumelchyk <shumelchyk@gmail.com>
Author: Jeffrey I. Schiller <jis@mit.edu>

Change-Id: Iddb20dca7835de8dad548dbb8043a600b60f9ded

appinventor/appengine/src/com/google/appinventor/client/Ode.java

@@ -884,7 +884,7 @@ public class Ode implements EntryPoint {
     //workColumns.add(switchToDesignerButton);
 
     Box palletebox = PaletteBox.getPaletteBox();
-    palletebox.setWidth("222px");
+    palletebox.setWidth("240px");
     workColumns.add(palletebox);
 
     Box viewerbox = ViewerBox.getViewerBox();

appinventor/appengine/src/com/google/appinventor/client/OdeMessages.java

@@ -2407,6 +2407,10 @@ public interface OdeMessages extends Messages {
   @Description("")
   String horizontalArrangementComponentPallette();
 
+  @DefaultMessage("HorizontalScrollArrangement")
+  @Description("")
+  String horizontalScrollArrangementComponentPallette();
+
   @DefaultMessage("TableArrangement")
   @Description("")
   String tableArrangementComponentPallette();
@@ -2415,6 +2419,10 @@ public interface OdeMessages extends Messages {
   @Description("")
   String verticalArrangementComponentPallette();
 
+  @DefaultMessage("VerticalScrollArrangement")
+  @Description("")
+  String verticalScrollArrangementComponentPallette();
+
   // Lego Mindstorms NXT
   @DefaultMessage("NxtColorSensor")
   @Description("")
@@ -5692,6 +5700,10 @@ public interface OdeMessages extends Messages {
   @Description("")
   String HorizontalArrangementHelpStringComponentPallette();
 
+  @DefaultMessage("<p>A formatting element in which to place components that should be displayed from left to right.  If you wish to have components displayed one over another, use <code>VerticalArrangement</code> instead.</p><p>This version is scrollable.,")
+  @Description("")
+  String HorizontalScrollArrangementHelpStringComponentPallette();
+
   @DefaultMessage("Component for displaying images.  The picture to display, and other aspects of the Image\"s appearance, can be specified in the Designer or in the Blocks Editor.")
   @Description("")
   String ImageHelpStringComponentPallette();
@@ -5852,6 +5864,10 @@ public interface OdeMessages extends Messages {
   @Description("")
   String VerticalArrangementHelpStringComponentPallette();
 
+  @DefaultMessage("<p>A formatting element in which to place components that should be displayed one below another.  (The first child component is stored on top, the second beneath it, etc.)  If you wish to have components displayed next to one another, use <code>HorizontalArrangement</code> instead.</p><p> This version is scrollable.</p>")
+  @Description("")
+  String VerticalScrollArrangementHelpStringComponentPallette();
+
   @DefaultMessage("A multimedia component capable of playing videos. When the application is run, the VideoPlayer will be displayed as a rectangle on-screen.  If the user touches the rectangle, controls will appear to play/pause, skip ahead, and skip backward within the video.  The application can also control behavior by calling the <code>Start</code>, <code>Pause</code>, and <code>SeekTo</code> methods.  <p>Video files should be in Windows Media Video (.wmv) format, 3GPP (.3gp), or MPEG-4 (.mp4).  For more details about legal formats, see <a href=\"http://developer.android.com/guide/appendix/media-formats.html\" target=\"_blank\">Android Supported Media Formats</a>.</p><p>App Inventor for Android only permits video files under 1 MB and limits the total size of an application to 5 MB, not all of which is available for media (video, audio, and sound) files.  If your media files are too large, you may get errors when packaging or installing your application, in which case you should reduce the number of media files or their sizes.  Most video editing software, such as Windows Movie Maker and Apple iMovie, can help you decrease the size of videos by shortening them or re-encoding the video into a more compact format.</p><p>You can also set the media source to a URL that points to a streaming video, but the URL must point to the video file itself, not to a program that plays the video.")
   @Description("")
   String VideoPlayerHelpStringComponentPallette();

appinventor/appengine/src/com/google/appinventor/client/TranslationDesignerPallete.java

@@ -130,10 +130,14 @@ public class TranslationDesignerPallete {
       // Screen Arrangement
     } else if (key.equals("HorizontalArrangement")) {
       value = MESSAGES.horizontalArrangementComponentPallette();
+    } else if (key.equals("HorizontalScrollArrangement")) {
+      value = MESSAGES.horizontalScrollArrangementComponentPallette();
     } else if (key.equals("TableArrangement")) {
       value = MESSAGES.tableArrangementComponentPallette();
     } else if (key.equals("VerticalArrangement")) {
       value = MESSAGES.verticalArrangementComponentPallette();
+    } else if (key.equals("VerticalScrollArrangement")) {
+      value = MESSAGES.verticalScrollArrangementComponentPallette();
       // Lego Mindstorms NXT
     } else if (key.equals("NxtColorSensor")) {
       value = MESSAGES.nxtColorSensorComponentPallette();
@@ -245,6 +249,8 @@ public class TranslationDesignerPallete {
       value = MESSAGES.GyroscopeSensorHelpStringComponentPallette();
     } else if (key.equals("HorizontalArrangement-helpString")) {
       value = MESSAGES.HorizontalArrangementHelpStringComponentPallette();
+    } else if (key.equals("HorizontalScrollArrangement-helpString")) {
+      value = MESSAGES.HorizontalScrollArrangementHelpStringComponentPallette();
     } else if (key.equals("Image-helpString")) {
       value = MESSAGES.ImageHelpStringComponentPallette();
     } else if (key.equals("ImagePicker-helpString")) {
@@ -339,6 +345,8 @@ public class TranslationDesignerPallete {
       value = MESSAGES.TwitterHelpStringComponentPallette();
     } else if (key.equals("VerticalArrangement-helpString")) {
       value = MESSAGES.VerticalArrangementHelpStringComponentPallette();
+    } else if (key.equals("VerticalScrollArrangement-helpString")) {
+      value = MESSAGES.VerticalScrollArrangementHelpStringComponentPallette();
     } else if (key.equals("VideoPlayer-helpString")) {
       value = MESSAGES.VideoPlayerHelpStringComponentPallette();
     } else if (key.equals("Voting-helpString")) {

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockHVArrangement.java

@@ -6,26 +6,29 @@
 
 package com.google.appinventor.client.editor.simple.components;
 
-import static com.google.appinventor.client.Ode.MESSAGES;
 import com.google.appinventor.client.editor.simple.SimpleEditor;
 import com.google.appinventor.client.editor.simple.components.utils.PropertiesUtil;
+
 import com.google.appinventor.client.editor.youngandroid.properties.YoungAndroidHorizontalAlignmentChoicePropertyEditor;
-import com.google.appinventor.client.editor.youngandroid.properties.YoungAndroidLengthPropertyEditor;
 import com.google.appinventor.client.editor.youngandroid.properties.YoungAndroidVerticalAlignmentChoicePropertyEditor;
+
 import com.google.appinventor.client.output.OdeLog;
+
 import com.google.appinventor.client.properties.BadPropertyEditorException;
-import com.google.appinventor.client.properties.Property;
-import com.google.appinventor.client.widgets.properties.EditableProperty;
-import com.google.appinventor.client.widgets.properties.PropertyEditor;
+
 import com.google.appinventor.components.common.ComponentConstants;
+
 import com.google.gwt.event.dom.client.ErrorEvent;
 import com.google.gwt.event.dom.client.ErrorHandler;
 import com.google.gwt.event.dom.client.LoadEvent;
 import com.google.gwt.event.dom.client.LoadHandler;
+
 import com.google.gwt.resources.client.ImageResource;
+
 import com.google.gwt.user.client.ui.AbsolutePanel;
 import com.google.gwt.user.client.ui.Image;
 
+import static com.google.appinventor.client.Ode.MESSAGES;
 
 /**
  * Superclass for HVArrangement based mock components
@@ -51,21 +54,24 @@ public class MockHVArrangement extends MockContainer {
   private String backgroundColor;
 
   private MockHVLayout myLayout;
-  
+
   private static final String PROPERTY_NAME_HORIZONTAL_ALIGNMENT = "AlignHorizontal";
   private static final String PROPERTY_NAME_VERTICAL_ALIGNMENT = "AlignVertical";
-  
+
   private YoungAndroidHorizontalAlignmentChoicePropertyEditor myHAlignmentPropertyEditor;
   private YoungAndroidVerticalAlignmentChoicePropertyEditor myVAlignmentPropertyEditor;
-  
+
   private final Image image;
   private String imagePropValue;
+  private boolean scrollAble;
+  private int orientation;
 
 
  /**
    * Creates a new MockHVArrangement component.
    */
-  MockHVArrangement(SimpleEditor editor, String type, ImageResource icon, int orientation) {
+  MockHVArrangement(SimpleEditor editor, String type, ImageResource icon, int orientation,
+    boolean scrollable) {
     // Note(Hal): This helper thing is a kludge because I really want to write:
     // myLayout = new MockHVLayout(orientation);
     // super(editor, type, icon, myLayout);
@@ -76,7 +82,9 @@ public class MockHVArrangement extends MockContainer {
     // next instruction.  Note that the Helper methods are synchronized to avoid possible
     // future problems if we ever have threads creating arrangements in parallel.
     myLayout = MockHVArrangementHelper.getLayout();
-        
+    scrollAble = scrollable;
+    this.orientation = orientation;
+
     if (orientation != ComponentConstants.LAYOUT_ORIENTATION_VERTICAL &&
         orientation != ComponentConstants.LAYOUT_ORIENTATION_HORIZONTAL) {
       throw new IllegalArgumentException("Illegal orientation: " + orientation);
@@ -113,10 +121,9 @@ public class MockHVArrangement extends MockContainer {
       OdeLog.log(MESSAGES.badAlignmentPropertyEditorForArrangement());
       return;
     }
-
+    adjustAlignmentDropdowns();
   }
 
-  
   @Override
   public void onPropertyChange(String propertyName, String newValue) {
     super.onPropertyChange(propertyName, newValue);
@@ -127,10 +134,10 @@ public class MockHVArrangement extends MockContainer {
       myLayout.setVAlignmentFlags(newValue);
       refreshForm();
     } else if (propertyName.equals(PROPERTY_NAME_IMAGE)) {
-        setImageProperty(newValue);
-        refreshForm();
+      setImageProperty(newValue);
+      refreshForm();
     } else if (propertyName.equals(PROPERTY_NAME_BACKGROUNDCOLOR)) {
-        setBackgroundColorProperty(newValue);
+      setBackgroundColorProperty(newValue);
     } else {
       if (propertyName.equals(PROPERTY_NAME_WIDTH) || propertyName.equals(PROPERTY_NAME_HEIGHT)) {
         refreshForm();
@@ -138,9 +145,27 @@ public class MockHVArrangement extends MockContainer {
     }
   }
 
+  private void adjustAlignmentDropdowns() {
+    if (scrollAble) {
+      if (orientation == ComponentConstants.LAYOUT_ORIENTATION_VERTICAL) {
+        myLayout.setVAlignmentFlags(ComponentConstants.GRAVITY_TOP + "");
+        changeProperty(PROPERTY_NAME_VERTICAL_ALIGNMENT, ComponentConstants.GRAVITY_TOP + "");
+        myVAlignmentPropertyEditor.disable();
+      } else {
+        myLayout.setHAlignmentFlags(ComponentConstants.GRAVITY_LEFT + "");
+        changeProperty(PROPERTY_NAME_HORIZONTAL_ALIGNMENT, ComponentConstants.GRAVITY_LEFT+ "");
+        myHAlignmentPropertyEditor.disable();
+      }
+      refreshForm();
+    } else {
+      myVAlignmentPropertyEditor.enable();
+      myHAlignmentPropertyEditor.enable();
+    }
+  }
+
   /*
-* Sets the button's Image property to a new value.
-*/
+   * Sets the button's Image property to a new value.
+   */
   private void setImageProperty(String text) {
     imagePropValue = text;
     String url = convertImagePropertyValueToUrl(text);

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockHorizontalArrangement.java

@@ -20,7 +20,7 @@ public final class MockHorizontalArrangement extends MockHVArrangement {
    * Component type name.
    */
   public static final String TYPE = "HorizontalArrangement";
-  
+
   /**
    * Creates a new MockHorizontalArrangement component.
    *
@@ -28,10 +28,8 @@ public final class MockHorizontalArrangement extends MockHVArrangement {
    */
   public MockHorizontalArrangement(SimpleEditor editor) {
     super(editor, TYPE, images.horizontal(),
-        ComponentConstants.LAYOUT_ORIENTATION_HORIZONTAL);
+      ComponentConstants.LAYOUT_ORIENTATION_HORIZONTAL,
+      ComponentConstants.NONSCROLLABLE_ARRANGEMENT);
   }
-  
-
-
 
-}
\ No newline at end of file
+}

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockScrollHorizontalArrangement.java

+// -*- mode: java; c-basic-offset: 2; -*-
+// Copyright 2009-2011 Google, All Rights reserved
+// Copyright 2016 MIT, All rights reserved
+// Released under the Apache License, Version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0
+
+package com.google.appinventor.client.editor.simple.components;
+
+import com.google.appinventor.client.editor.simple.SimpleEditor;
+import com.google.appinventor.components.common.ComponentConstants;
+
+/**
+ * Mock HorizontalArrangement component.
+ *
+ * @author sharon@google.com (Sharon Perl)
+ * @author jis@mit.edu (Jeffrey I. Schiller)
+ */
+public final class MockScrollHorizontalArrangement extends MockHVArrangement {
+
+  /**
+   * Component type name.
+   */
+  public static final String TYPE = "HorizontalScrollArrangement";
+
+  /**
+   * Creates a new MockHorizontalArrangement component.
+   *
+   * @param editor  editor of source file the component belongs to
+   */
+  public MockScrollHorizontalArrangement(SimpleEditor editor) {
+    super(editor, TYPE, images.horizontal(),
+      ComponentConstants.LAYOUT_ORIENTATION_HORIZONTAL,
+      ComponentConstants.SCROLLABLE_ARRANGEMENT);
+  }
+
+}

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockScrollVerticalArrangement.java

+// -*- mode: java; c-basic-offset: 2; -*-
+// Copyright 2009-2011 Google, All Rights reserved
+// Copyright 2016 MIT, All rights reserved
+// Released under the Apache License, Version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0
+
+package com.google.appinventor.client.editor.simple.components;
+
+import com.google.appinventor.client.editor.simple.SimpleEditor;
+import com.google.appinventor.components.common.ComponentConstants;
+
+/**
+ * Mock VerticalArrangement component.
+ *
+ * @author sharon@google.com (Sharon Perl)
+ * @author jis@mit.edu (Jeffrey I. Schiller)
+ */
+public final class MockScrollVerticalArrangement extends MockHVArrangement {
+
+  /**
+   * Component type name.
+   */
+  public static final String TYPE = "VerticalScrollArrangement";
+
+  /**
+   * Creates a new MockVerticalArrangement component.
+   *
+   * @param editor  editor of source file the component belongs to
+   */
+  public MockScrollVerticalArrangement(SimpleEditor editor) {
+    super(editor, TYPE, images.vertical(),
+      ComponentConstants.LAYOUT_ORIENTATION_VERTICAL,
+      ComponentConstants.SCROLLABLE_ARRANGEMENT);
+  }
+
+}

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockVerticalArrangement.java

@@ -28,7 +28,8 @@ public final class MockVerticalArrangement extends MockHVArrangement {
    */
   public MockVerticalArrangement(SimpleEditor editor) {
     super(editor, TYPE, images.vertical(),
-        ComponentConstants.LAYOUT_ORIENTATION_VERTICAL);
+      ComponentConstants.LAYOUT_ORIENTATION_VERTICAL,
+      ComponentConstants.NONSCROLLABLE_ARRANGEMENT);
   }
-  
+
 }

appinventor/appengine/src/com/google/appinventor/client/editor/simple/palette/SimpleComponentDescriptor.java

@@ -24,22 +24,27 @@ import com.google.appinventor.client.editor.simple.components.MockImage;
 import com.google.appinventor.client.editor.simple.components.MockImagePicker;
 import com.google.appinventor.client.editor.simple.components.MockImageSprite;
 import com.google.appinventor.client.editor.simple.components.MockLabel;
-import com.google.appinventor.client.editor.simple.components.MockListView;
 import com.google.appinventor.client.editor.simple.components.MockListPicker;
-import com.google.appinventor.client.editor.simple.components.MockTimePicker;
+import com.google.appinventor.client.editor.simple.components.MockListView;
 import com.google.appinventor.client.editor.simple.components.MockNonVisibleComponent;
 import com.google.appinventor.client.editor.simple.components.MockPasswordTextBox;
 import com.google.appinventor.client.editor.simple.components.MockPhoneNumberPicker;
 import com.google.appinventor.client.editor.simple.components.MockRadioButton;
+import com.google.appinventor.client.editor.simple.components.MockScrollHorizontalArrangement;
+import com.google.appinventor.client.editor.simple.components.MockScrollVerticalArrangement;
 import com.google.appinventor.client.editor.simple.components.MockSlider;
+import com.google.appinventor.client.editor.simple.components.MockSpinner;
 import com.google.appinventor.client.editor.simple.components.MockTableArrangement;
 import com.google.appinventor.client.editor.simple.components.MockTextBox;
+import com.google.appinventor.client.editor.simple.components.MockTimePicker;
 import com.google.appinventor.client.editor.simple.components.MockVerticalArrangement;
 import com.google.appinventor.client.editor.simple.components.MockVideoPlayer;
 import com.google.appinventor.client.editor.simple.components.MockWebViewer;
-import com.google.appinventor.client.editor.simple.components.MockSpinner;
+
 import com.google.common.collect.Maps;
+
 import com.google.gwt.resources.client.ImageResource;
+
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Widget;
 
@@ -317,8 +322,12 @@ public final class SimpleComponentDescriptor {
       return new MockTimePicker(editor);
     } else if (name.equals(MockHorizontalArrangement.TYPE)) {
       return new MockHorizontalArrangement(editor);
+    } else if (name.equals(MockScrollHorizontalArrangement.TYPE)) {
+      return new MockScrollHorizontalArrangement(editor);
     } else if (name.equals(MockVerticalArrangement.TYPE)) {
       return new MockVerticalArrangement(editor);
+    } else if (name.equals(MockScrollVerticalArrangement.TYPE)) {
+      return new MockScrollVerticalArrangement(editor);
     } else if (name.equals(MockTableArrangement.TYPE)) {
       return new MockTableArrangement(editor);
     } else if (name.equals(MockImageSprite.TYPE)) {

appinventor/blocklyeditor/src/versioning.js

@@ -1431,6 +1431,13 @@ Blockly.Versioning.AllUpgradeMaps =
 
   }, // End HorizontalArrangement upgraders
 
+  "HorizontalScrollArrangement": {
+
+    // This is initial version. Placeholder for future upgrades
+    1: "noUpgrade"
+
+  }, // End HorizontalScrollArrangement upgraders
+
   "Image": {
 
     //This is initial version. Placeholder for future upgrades
@@ -2267,6 +2274,13 @@ Blockly.Versioning.AllUpgradeMaps =
 
   }, // End VerticalArrangement upgraders
 
+  "VerticalScrollArrangement": {
+
+    //This is initial version. Placeholder for future upgrades
+    1: "noUpgrade"
+
+  }, // End VerticalScrollArrangement upgraders
+
   "VideoPlayer": {
 
     // AI1: The VideoPlayer.VideoPlayerError event was added.

appinventor/components/src/com/google/appinventor/components/common/ComponentConstants.java

@@ -68,4 +68,13 @@ public class ComponentConstants {
   public static final int LISTVIEW_PREFERRED_WIDTH = 315;
   public static final int LISTVIEW_PREFERRED_HEIGHT = 40;
   public static final int LISTVIEW_FILTER_PREFERRED_HEIGHT = 30;
+
+  /**
+   * Scrollable Arrangements
+   */
+
+  public static boolean SCROLLABLE_ARRANGEMENT = true;
+  public static boolean NONSCROLLABLE_ARRANGEMENT = false;
+
 }
+

appinventor/components/src/com/google/appinventor/components/common/YaVersion.java

@@ -393,8 +393,10 @@ public class YaVersion {
   // - FIREBASE_COMPONENT_VERSION was incremented to 3
   // For YOUNG_ANDROID_VERSION 157:
   // - LABEL_COMPONENT_VERSION was incremented to 4
+  // For YOUNG_ANDROID_VERSION 158:
+  // Added HorizontalScrollArrangement and VerticalScrollArrangement
 
-  public static final int YOUNG_ANDROID_VERSION = 157;
+  public static final int YOUNG_ANDROID_VERSION = 158;
 
   // ............................... Blocks Language Version Number ...............................
 
@@ -698,9 +700,12 @@ public class YaVersion {
   // For HORIZONTALARRANGEMENT_COMPONENT_VERSION 2:
   // - The AlignHorizontal property was added
   // - The AlignVertical property was added
+  // For HORIZONTALARRANGEMENT_COMPONENT_VERSION 3:
   // - Added background color & image
   public static final int HORIZONTALARRANGEMENT_COMPONENT_VERSION = 3;
 
+  public static final int HORIZONTALSCROLLARRANGEMENT_COMPONENT_VERSION = 1;
+
   // For IMAGE_COMPONENT_VERSION 2:
   // - The RotationAngle property was added.
   // For IMAGE_COMPONENT_VERSION 3:
@@ -985,9 +990,12 @@ public class YaVersion {
   // For VERTICALARRANGEMENT_COMPONENT_VERSION 2:
   // - The AlignHorizontal property was added
   // - The AlignVertical property was added
+  // For VERTICALARRANGEMENT_COMPONENT_VERSION 3:
   // - Added background color & image
   public static final int VERTICALARRANGEMENT_COMPONENT_VERSION = 3;
 
+  public static final int VERTICALSCROLLARRANGEMENT_COMPONENT_VERSION = 1;
+
   // For VIDEOPLAYER_COMPONENT_VERSION 2:
   // - The VideoPlayer.VideoPlayerError event was added.
   // For VIDEOPLAYER_COMPONENT_VERSION 3:

appinventor/components/src/com/google/appinventor/components/runtime/HVArrangement.java

@@ -7,17 +7,28 @@
 package com.google.appinventor.components.runtime;
 
 import android.app.Activity;
-import android.os.Handler;
+
 import android.graphics.drawable.Drawable;
+
+import android.os.Handler;
+
 import android.util.Log;
+
 import android.view.View;
+import android.view.ViewGroup;
+
+import android.widget.FrameLayout;
+import android.widget.HorizontalScrollView;
+import android.widget.ScrollView;
 
 import com.google.appinventor.components.annotations.DesignerProperty;
 import com.google.appinventor.components.annotations.PropertyCategory;
 import com.google.appinventor.components.annotations.SimpleObject;
 import com.google.appinventor.components.annotations.SimpleProperty;
+
 import com.google.appinventor.components.common.ComponentConstants;
 import com.google.appinventor.components.common.PropertyTypeConstants;
+
 import com.google.appinventor.components.runtime.util.AlignmentUtil;
 import com.google.appinventor.components.runtime.util.ErrorMessages;
 import com.google.appinventor.components.runtime.util.MediaUtil;
@@ -25,6 +36,10 @@ import com.google.appinventor.components.runtime.util.ViewUtil;
 
 import java.io.IOException;
 
+import java.util.ArrayList;
+import java.util.List;
+
+
 /**
  * A container for components that arranges them linearly, either
  * horizontally or vertically.
@@ -40,25 +55,28 @@ public class HVArrangement extends AndroidViewComponent implements Component, Co
   // Layout
   private final int orientation;
   private final LinearLayout viewLayout;
-
+  private ViewGroup frameContainer;
+  private boolean scrollable = false;
   // translates App Inventor alignment codes to Android gravity
-  private final AlignmentUtil alignmentSetter;
+  private AlignmentUtil alignmentSetter;
 
   // the alignment for this component's LinearLayout
   private int horizontalAlignment;
   private int verticalAlignment;
-    // Backing for background color
-    private int backgroundColor;
-    // This is the Drawable corresponding to the Image property.
-    // If an Image has never been set or if the most recent Image could not be loaded, this is null.
-    private Drawable backgroundImageDrawable;
-    // Image path
-    private String imagePath = "";
+  // Backing for background color
+  private int backgroundColor;
+  // This is the Drawable corresponding to the Image property.
+  // If an Image has never been set or if the most recent Image could not be loaded, this is null.
+  private Drawable backgroundImageDrawable;
+  // Image path
+  private String imagePath = "";
 
   private Drawable defaultButtonDrawable;
 
   private final Handler androidUIHandler = new Handler();
 
+  private static final String LOG_TAG = "HVArrangement";
+
   /**
    * Creates a new HVArrangement component.
    *
@@ -67,30 +85,54 @@ public class HVArrangement extends AndroidViewComponent implements Component, Co
    *     {@link ComponentConstants#LAYOUT_ORIENTATION_HORIZONTAL}.
    *     {@link ComponentConstants#LAYOUT_ORIENTATION_VERTICAL}
   */
-  public HVArrangement(ComponentContainer container, int orientation) {
+  public HVArrangement(ComponentContainer container, int orientation, boolean scrollable) {
     super(container);
     context = container.$context();
 
     this.orientation = orientation;
+    this.scrollable = scrollable;
     viewLayout = new LinearLayout(context, orientation,
         ComponentConstants.EMPTY_HV_ARRANGEMENT_WIDTH,
         ComponentConstants.EMPTY_HV_ARRANGEMENT_HEIGHT);
+
     viewLayout.setBaselineAligned(false);
     alignmentSetter = new AlignmentUtil(viewLayout);
-
     horizontalAlignment = ComponentConstants.HORIZONTAL_ALIGNMENT_DEFAULT;
     verticalAlignment = ComponentConstants.VERTICAL_ALIGNMENT_DEFAULT;
     alignmentSetter.setHorizontalAlignment(horizontalAlignment);
     alignmentSetter.setVerticalAlignment(verticalAlignment);
 
+    if (scrollable) {
+      switch (orientation) {
+      case LAYOUT_ORIENTATION_VERTICAL:
+        Log.d(LOG_TAG, "Setting up frameContainer = ScrollView()");
+        frameContainer = new ScrollView(context);
+        break;
+      case LAYOUT_ORIENTATION_HORIZONTAL:
+        Log.d(LOG_TAG, "Setting up frameContainer = HorizontalScrollView()");
+        frameContainer = new HorizontalScrollView(context);
+        break;
+      }
+    } else {
+      Log.d(LOG_TAG, "Setting up frameContainer = FrameLayout()");
+      frameContainer = new FrameLayout(context);
+    }
+
+    frameContainer.setLayoutParams(new ViewGroup.LayoutParams(ComponentConstants.EMPTY_HV_ARRANGEMENT_WIDTH, ComponentConstants.EMPTY_HV_ARRANGEMENT_HEIGHT));
+    frameContainer.addView(viewLayout.getLayoutManager(), new ViewGroup.LayoutParams(
+        ViewGroup.LayoutParams.MATCH_PARENT,
+        ViewGroup.LayoutParams.MATCH_PARENT));
+
       // Save the default values in case the user wants them back later.
-      defaultButtonDrawable = getView().getBackground();
+    defaultButtonDrawable = getView().getBackground();
 
     container.$add(this);
-
     BackgroundColor(Component.COLOR_DEFAULT);
+
   }
 
+
+
   // ComponentContainer implementation
 
   @Override
@@ -120,13 +162,13 @@ public class HVArrangement extends AndroidViewComponent implements Component, Co
       androidUIHandler.postDelayed(new Runnable() {
           @Override
           public void run() {
-            System.err.println("(HVArrangement)Width not stable yet... trying again");
+            Log.d(LOG_TAG, "(HVArrangement)Width not stable yet... trying again");
             setChildWidth(component, fWidth, trycount + 1);
           }
         }, 100);                // Try again in 1/10 of a second
     }
     if (width <= LENGTH_PERCENT_TAG) {
-      System.err.println("HVArrangement.setChildWidth(): width = " + width + " parent Width = " + cWidth + " child = " + component);
+      Log.d(LOG_TAG, "HVArrangement.setChildWidth(): width = " + width + " parent Width = " + cWidth + " child = " + component);
       width = cWidth * (- (width - LENGTH_PERCENT_TAG)) / 100;
     }
 
@@ -147,7 +189,7 @@ public class HVArrangement extends AndroidViewComponent implements Component, Co
       androidUIHandler.postDelayed(new Runnable() {
           @Override
           public void run() {
-            System.err.println("(HVArrangement)Height not stable yet... trying again");
+            Log.d(LOG_TAG, "(HVArrangement)Height not stable yet... trying again");
             setChildHeight(component, fHeight);
           }
         }, 100);                // Try again in 1/10 of a second
@@ -169,11 +211,9 @@ public class HVArrangement extends AndroidViewComponent implements Component, Co
 
   @Override
   public View getView() {
-    return viewLayout.getLayoutManager();
+    return frameContainer; //: viewLayout.getLayoutManager();
   }
 
- // These property definitions are duplicated in Form.java
-
   // The numeric encodings are defined Component Constants
 
   /**
@@ -323,24 +363,26 @@ public class HVArrangement extends AndroidViewComponent implements Component, Co
         updateAppearance();
     }
 
-    // Update appearance based on values of backgroundImageDrawable, backgroundColor and shape.
-    // Images take precedence over background colors.
-    private void updateAppearance() {
-        // If there is no background image,
-        // the appearance depends solely on the background color and shape.
-        if (backgroundImageDrawable == null) {
-                if (backgroundColor == Component.COLOR_DEFAULT) {
-                    // If there is no background image and color is default,
-                    // restore original 3D bevel appearance.
-                    ViewUtil.setBackgroundDrawable(getView(), defaultButtonDrawable);
-                } else {
-                    // Clear the background image.
-                    ViewUtil.setBackgroundDrawable(getView(), null);
-                    getView().setBackgroundColor(backgroundColor);
-                }
-        } else {
-            // If there is a background image
-            ViewUtil.setBackgroundImage(getView(), backgroundImageDrawable);
-        }
+
+  // Update appearance based on values of backgroundImageDrawable, backgroundColor and shape.
+  // Images take precedence over background colors.
+  private void updateAppearance() {
+    // If there is no background image,
+    // the appearance depends solely on the background color and shape.
+    if (backgroundImageDrawable == null) {
+      if (backgroundColor == Component.COLOR_DEFAULT) {
+        // If there is no background image and color is default,
+        // restore original 3D bevel appearance.
+        ViewUtil.setBackgroundDrawable(viewLayout.getLayoutManager(), defaultButtonDrawable);
+      } else {
+        // Clear the background image.
+        ViewUtil.setBackgroundDrawable(viewLayout.getLayoutManager(), null);
+        viewLayout.getLayoutManager().setBackgroundColor(backgroundColor);
+      }
+    } else {
+      // If there is a background image
+      ViewUtil.setBackgroundImage(viewLayout.getLayoutManager(), backgroundImageDrawable);
     }
+  }
+
 }

appinventor/components/src/com/google/appinventor/components/runtime/HorizontalArrangement.java

@@ -26,7 +26,8 @@ import com.google.appinventor.components.common.YaVersion;
 @SimpleObject
 public class HorizontalArrangement extends HVArrangement {
   public HorizontalArrangement(ComponentContainer container) {
-    super(container, ComponentConstants.LAYOUT_ORIENTATION_HORIZONTAL);
+    super(container, ComponentConstants.LAYOUT_ORIENTATION_HORIZONTAL,
+      ComponentConstants.NONSCROLLABLE_ARRANGEMENT);
   }
 
 }

appinventor/components/src/com/google/appinventor/components/runtime/HorizontalScrollArrangement.java

+// -*- mode: java; c-basic-offset: 2; -*-
+// Copyright 2016 MIT, All rights reserved
+// Released under the Apache License, Version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0
+
+package com.google.appinventor.components.runtime;
+
+import com.google.appinventor.components.annotations.DesignerComponent;
+import com.google.appinventor.components.annotations.SimpleObject;
+import com.google.appinventor.components.common.ComponentCategory;
+import com.google.appinventor.components.common.ComponentConstants;
+import com.google.appinventor.components.common.YaVersion;
+
+/**
+ * A horizontal arrangement of components
+ * @author sharon@google.com (Sharon Perl)
+ * @author jis@mit.edu (Jeffrey I. Schiller)
+ *
+ */
+@DesignerComponent(version = YaVersion.HORIZONTALSCROLLARRANGEMENT_COMPONENT_VERSION,
+    description = "<p>A formatting element in which to place components " +
+    "that should be displayed from left to right.  If you wish to have " +
+    "components displayed one over another, use " +
+    "<code>VerticalArrangement</code> instead.</p><p>This version is " +
+    "scrollable.",
+    category = ComponentCategory.LAYOUT)
+@SimpleObject
+public class HorizontalScrollArrangement extends HVArrangement {
+  public HorizontalScrollArrangement(ComponentContainer container) {
+    super(container, ComponentConstants.LAYOUT_ORIENTATION_HORIZONTAL,
+      ComponentConstants.SCROLLABLE_ARRANGEMENT);
+  }
+
+}

appinventor/components/src/com/google/appinventor/components/runtime/VerticalArrangement.java

@@ -29,7 +29,8 @@ import com.google.appinventor.components.common.YaVersion;
 public class VerticalArrangement extends HVArrangement {
 
   public VerticalArrangement(ComponentContainer container) {
-    super(container, ComponentConstants.LAYOUT_ORIENTATION_VERTICAL);
+    super(container, ComponentConstants.LAYOUT_ORIENTATION_VERTICAL,
+      ComponentConstants.NONSCROLLABLE_ARRANGEMENT);
   }
 
 }

appinventor/components/src/com/google/appinventor/components/runtime/VerticalScrollArrangement.java

+// -*- mode: java; c-basic-offset: 2; -*-
+// Copyright 2016 MIT, All rights reserved
+// Released under the Apache License, Version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0
+
+package com.google.appinventor.components.runtime;
+
+import com.google.appinventor.components.annotations.DesignerComponent;
+import com.google.appinventor.components.annotations.SimpleObject;
+import com.google.appinventor.components.common.ComponentCategory;
+import com.google.appinventor.components.common.ComponentConstants;
+import com.google.appinventor.components.common.YaVersion;
+
+/**
+ * A vertical arrangement of components
+ * @author sharon@google.com (Sharon Perl)
+ * @author jis@mit.edu (Jeffrey I. Schiller)
+ *
+ */
+
+@DesignerComponent(version = YaVersion.VERTICALSCROLLARRANGEMENT_COMPONENT_VERSION,
+    description = "<p>A formatting element in which to place components " +
+    "that should be displayed one below another.  (The first child component " +
+    "is stored on top, the second beneath it, etc.)  If you wish to have " +
+    "components displayed next to one another, use " +
+    "<code>HorizontalArrangement</code> instead.</p><p> " +
+    "This version is scrollable",
+    category = ComponentCategory.LAYOUT)
+@SimpleObject
+public class VerticalScrollArrangement extends HVArrangement {
+
+  public VerticalScrollArrangement(ComponentContainer container) {
+    super(container, ComponentConstants.LAYOUT_ORIENTATION_VERTICAL,
+      ComponentConstants.SCROLLABLE_ARRANGEMENT);
+  }
+
+}

appinventor/docs/reference/components/layout.html

@@ -457,10 +457,12 @@
                     <ul>
                       <li> <a href="#HorizontalArrangement">
                           HorizontalArrangement </a> </li>
+                      <li><a href="#HorizontalScrollArrangement">HorizontalScrollArrangement</a></li>
                       <li> <a href="#TableArrangement"> TableArrangement
                           </a> </li>
                       <li> <a href="#VerticalArrangement"> VerticalArrangement
                         </a> </li>
+                      <li><a href="#VerticalScrollArrangement">VerticalScrollArrangement</a></li>
                     </ul>
                     <h2 id="HorizontalArrangement"> HorizontalArrangement </h2>
                     <img alt="" src="images/horizontalarrangement.png">
@@ -512,6 +514,33 @@
                       <dt> <code> Width </code> </dt>
                       <dd> Horizontal arrangement width (x-size). </dd>
                     </dl>
+
+                    <h2 id="HorizontalScrollArrangement">HorizontalScrollArrangement</h2>
+
+                    <p><p>A formatting element in which to place components that should be displayed from left to right.  If you wish to have components displayed one over another, use <code>VerticalArrangement</code> instead.</p><p>This version is scrollable.</p>
+
+                    <h3>Properties</h3>
+                    <dl>
+                      <dt><code>AlignHorizontal</code></dt>
+                      <dd>A number that encodes how contents of the arrangement are aligned  horizontally. The choices are: 1 = left aligned, 2 = right aligned,  3 = horizontally centered.  Alignment has no effect if the arrangement's width is automatic.</dd>
+                      <dt><code>AlignVertical</code></dt>
+                      <dd>A number that encodes how the contents of the arrangement are aligned  vertically. The choices are: 1 = aligned at the top, 2 = aligned at the bottom, 3 = vertically centered.  Alignment has no effect if the arrangement's height is automatic.</dd>
+                      <dt><code>BackgroundColor</code></dt>
+                      <dd>Returns the component's background color</dd>
+                      <dt><code>Height</code></dt>
+                      <dd></dd>
+                      <dt><code>HeightPercent</code></dt>
+                      <dd></dd>
+                      <dt><code>Image</code></dt>
+                      <dd>Specifies the path of the component's image.  If there is both an Image and a BackgroundColor, only the Image will be visible.</dd>
+                      <dt><code>Visible</code></dt>
+                      <dd>Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden.</dd>
+                      <dt><code>Width</code></dt>
+                      <dd></dd>
+                      <dt><code>WidthPercent</code></dt>
+                      <dd></dd>
+                    </dl>
+
                     <h2 id="TableArrangement"> TableArrangement </h2>
                     <p> Use a table arrangement component to display a group of
                       components in a tabular fashion. </p>
@@ -600,6 +629,31 @@
                       <dt> <code> Width </code> </dt>
                       <dd> Vertical arrangement width (x-size). </dd>
                     </dl>
+                    <h2 id="VerticalScrollArrangement">VerticalScrollArrangement</h2>
+
+                    <p><p>A formatting element in which to place components that should be displayed one below another.  (The first child component is stored on top, the second beneath it, etc.)  If you wish to have components displayed next to one another, use <code>HorizontalArrangement</code> instead.</p><p> This version is scrollable</p>
+
+                    <h3>Properties</h3>
+                    <dl>
+                      <dt><code>AlignHorizontal</code></dt>
+                      <dd>A number that encodes how contents of the arrangement are aligned  horizontally. The choices are: 1 = left aligned, 2 = right aligned,  3 = horizontally centered.  Alignment has no effect if the arrangement's width is automatic.</dd>
+                      <dt><code>AlignVertical</code></dt>
+                      <dd>A number that encodes how the contents of the arrangement are aligned  vertically. The choices are: 1 = aligned at the top, 2 = aligned at the bottom, 3 = vertically centered.  Alignment has no effect if the arrangement's height is automatic.</dd>
+                      <dt><code>BackgroundColor</code></dt>
+                      <dd>Returns the component's background color</dd>
+                      <dt><code>Height</code></dt>
+                      <dd></dd>
+                      <dt><code>HeightPercent</code></dt>
+                      <dd></dd>
+                      <dt><code>Image</code></dt>
+                      <dd>Specifies the path of the component's image.  If there is both an Image and a BackgroundColor, only the Image will be visible.</dd>
+                      <dt><code>Visible</code></dt>
+                      <dd>Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden.</dd>
+                      <dt><code>Width</code></dt>
+                      <dd></dd>
+                      <dt><code>WidthPercent</code></dt>
+                      <dd></dd>
+                    </dl>
                   </div>
                 </div>
               </section>