With the Menu Image Rows plugin, each row in your scrollable menu list is an image.
The images are displayed in rows underneath a header image.

This plugin has all of the header features of the Menu with Image. However, instead of displaying
text in the menu rows each row is an image. The images use the "Fit" option, which means that the
row images will display it at its largest possible size without distorting the image.

Because of the variety of sizes of Android devices, the rows will not always fit perfectly and you will see space around the rows.

Like the Menu with Image, this plugin relies on code in the Menu Simple and the 1.5 version
of the Menu Header plugin by David Book. Thank you to @Bodacious Media for envisioning and
commissioning this plugin, and to @Kittsy for assistance with coding.


Version 1.0
Version 1.1 Added a screenshot from @CakeBit. Thanks, @CakeBit!
Version 1.2 Found an error in the Android import files
Version 1.4 Changed the selection color to transparent. If you would like to add a selection color, you can do that in line 168 of the .java file.
Version 1.5 Corrected the plugin so that a header image on a URL would override the default image.


INSTRUCTIONS
Preparing Images: Use all lower case image names (an Android requirement). Do not use
image file names that contain spaces or special characters. It is not necessary to
prepare the @2x images for the iPhone and iPad for this plugin. The images can have
a transparent background. In fact, if possible use an images with a transparent background,
because this will work best on Android devices where the aspect ratio can change across devices.

The images will automatically stretch across the width of all screens in portrait mode.
In landscape mode, the image will remain in the same size as the portrait mode.
If you use a picture with dimensions other than the recommended sizes, the image will be placed at its
maximum size without distortion. There is no need to create the @2x files for your
iOS project.

Row Images: Prepare row images that are 1536(w) x 240(h). You can use transparency in your row images,
or create the appearance of a margin around the image by using transparency.

Header Image: Prepare an image that is 1536(w) x 720(h) pixels in a png format
for the Large size image. For the medium size, use 1536 x 400, and for the small
size use 1536 by 245.


Note the instructions below for adding the image to your Xcode or Eclipse project.


Settings in the control panel:

1. Add rows to the menu list: Adding a row to the menu adds a new screen or action to
your project. Choose a unique nickname for the screen.

2. Screen nickname: This field will already be populated, but can be changed in the
event that you receive a warning that two screens have the same name.

3. Top Navigation Bar: Use this to change the default settings.

4. Require Login: Use this require a login for the screen.

5. Screen Background Color: Select a background color for your screen. You can
enter "clear" for transparent color, or a hexadecimal number. (Do not use the
quotes around your entry.)

6. Screen Background Image: Enter your image file name OR the image URL. In addition,
you can choose the scale and position of the image.

7. Header Image: Enter your image file name OR the image URL.

9. List Row Height and Font Size: Modify the default sizes for the row height.

10. Screen Data URL: With this plugin you can manually enter individual menu items
or you can pull menu items from a remote file using the Screen Data URL.



INSTRUCTIONS FOR iOS PROJECT
------------------------

*Drag your image into the BT_Images file in your Xcode project.

The files you need for this plugin are automatically included in the project
package you download from the Download Source Code screen in your control panel.
The files are in the folder named, "wb_rowMenuImage, and include the
WB_rowImageMenu.h and WB_rowImageMenu.m files.




INSTRUCTIONS FOR ANDROID PROJECT
------------------------

*Drag your image into the res -> drawable file in your Android project. Place the same images in
all the drawable files. If you have problems with memory crashes, you may need to resize your images
for the various Android drawable files.

The files you need for this plugin are automatically included in the project package
you download from the Download Source Code screen in your control panel. There
are three files for this plugin:

1) in scr -> com.YOUR_PROJECT_NAME, you will find the file: WB_rowImageMenu.java

2) in res -> layout, you will find the file: wb_rowImageMenu.xml, wb_rowImageMenu.xml and wb_screen_menuimage_row.xml

For tablets, there is an extra folder in the plugin packet that you can drag into your project for tablet layouts. The folder is named: layout-sw600dp. Simply drag this folder into the res folder in your project.

JSON Data
------------------------


"BT_screens":
{
     {
     "itemId": "0C3D928513CA907F2C70B57",
     "itemType": "WB_rowImageMenu",
     "itemNickname": "Test Menu Image Rows",
      "navBarBackgroundColor": "#FF9900",
     "imageFileName": "headerimagerows.png",
      "headerImageSize": "Large",
          "alphaImage": "0.9",
          "backgroundColor": "#3300CC",
          "listBackgroundColor": "clear",
          "listRowBackgroundColor": "clear",
          "listRowSeparatorColor": "clear",
          "preventAllScrolling": "0",
          "listRowSelectionStyle": "none",
          "listRowHeightSmallDevice": "50",
          "listRowHeightLargeDevice": "120",

     
     "childItems":[
{
          "itemId": "FF004AA117928EBEBCCFA1F",
          "itemType": "BT_menuItem",
           "titleText": "Row One",
          "loadScreenWithItemId": "55AE1AC01C01948F373C797",
          "rowImageFileName": "red.png",
          "rowImageURL": "http://red.png"
      }
]
}