This tutorial will walk you through creating a bitmap mask for use with widget.newTableView() and widget.newScrollView(), for proper clipping.

In this tutorial, we'll be creating a mask for a tableView that will be 320 pixels (width) by 410 pixels (height).

The steps below are for Photoshop users, but can be applied to just about any graphics program.

 
1) Create a new image that is the same dimensions as your tableView (320x410). Make sure the background is filled with all WHITE:

 
2) In the menu, go to Image > Canvas Size. Adjust the width and height to be at least 4 pixels larger than your original width and height (324x414). Also make sure the extension color is set to BLACK.

 
3) Save the image (with a descriptive name, such as mask-320x410.png" and pass it as the 'maskFile' parameter in your tableView or scrollView. Example:

    local widget = require "widget"
 
    local list = widget.newTableView{
        width = 320,
        height = 410,
        maskFile = "mask320x410.png"
    }

Review

So you may not have Photoshop installed, but since we're only working with two colors (black and white), you can use just about any graphics program (such as the open-source, free Gimp).

The basic logic is, you need the white area to be the exact dimensions of your tableView or scrollView. Then, simply add a 2 pixel black border around the white area, save as a 24-bit PNG and you're good to go!