IdeaSave Software

Software for the mobile world

Products

MobileShopper for Android

I thought that existing grocery shopping apps requried too much tapping and text entering, and many contained features I didn't need, so I decided to write my own.

MobileShopper for Android works on all versions of Android OS from 2.x and up, supporting all known screen sizes. It is lightning fast, and the only text entry you need to do after you have the data the way you want it is to enter a quantity and price (optional) for items you need.

The application allows you to create as many independent lists as you like, creating a list for groceries on first launch.The grocery shopping list contains many common categories and items. When creating your own shopping list, you can choose to have it pre-populated or left empty for you add your own data. There is currently one choice for pre-population, which is the grocery list you get when the application is first launched.

The data can be modified at will - you can add, delete and rename as you like.

MobileShopper provides the look and feel of Android 4.0, even on pre-4.0 devices! The main feature for that is the "Action Bar" across the top of every view. The action bar contains the application icon, application title and a subtitle (typically naming the current subview). On the main views  it also contains an "Action Item" on the right and tabs used to navigate between those views. The action item is called Lists, and is an icon that when tapped brings up a spinner for selecting the shopping list to view (or to add, rename or delete one).

The Action Bar and Action items are the Android 3.x/4.x replacement for the options memu that appears on pre-3.0 devices when the menu softkey is tapped. Each action item performs an action, just as options menu items did. On pre-3.0 devices, the menu softkey and hence the options menu still exists. On some devices, there is no options menu, and the items that would've been in it are shown as action items, some of which appear directly in the action bar, some in the "Overflow" menu, the last action item. In MobileShopper, only Lists appears as an action item - the rest of the possible actions appear in the traditional options menu (pre-3.0) or in the overflow menu.

New With Version 2.0

There are two major new features in version 2.0 of MobileShopper:

Interaction Style

Until now, MobileShopper displayed data only as a traditional shopping list, in which items are "checked" when needed, then "checked off" when placed in your shopping cart. With this version, you can now choose to display data as an inventory of your current supply or stock of items, in which items are "used" when you use an item or otherwise take it out of stock, and then added to your needed list automatically when the quantity in stock reaches zero (or optionally, immediately upon use). In this mode, when you "check off" an item in your needed list, the quantity is added to the quantity in stock for that item. To use your data as an inventory, you begin by entering the quantity (and units) of each item that you have in supply/stock.

Each of these different ways of displaying and interacting with your data are called an Interaction Style. There are three such styles supported: the traditional shopping list style (the default), inventory style specifically for groceries, and a general inventory style that is not specialized for groceries.

Recipes

You can now maintain your favorite recipes in MobileShopper! A recipe consists of any collection of items (with quantities and units) and optionally formatted instructions. When a recipe is "checked" all of the items defined in it are added to your needed list, thus saving you the trouble of adding each individually. By placing a text file with the same name as the recipe in a pre-defined place on your SD card,  you can include instructions for the recipe. The file can be plain text, but to get nice formatting, it should be HTML. That not only allows you to get nice formatting when the instructions are displayed, but lets you add photos to the instructions! Nearly everything that can be put in a web page can be put in your recipe instructions!

When the interaction style is general inventory, a recipe is called a "bundle" instead, but otherwise has all of the same features.

Overall Design

MobileShopper's main concept is that of a list. The application comes pre-loaded with one list, a grocery list. You can create any number of other lists. You switch between different lists, create new lists, rename lists or delete lists using the Lists action item (an icon in the upper right corner). All of the data in a list can be modified as you like.

Each list has four main components, each displayed in its own view: a list of settings, a list of item categories, a list of recipes and a list of needed items. The settings are displayed in the settings view, while the other three components are displayed in their own tabs in the main view. Each item category contains an open-ended number of items, and each recipe contains an open-ended number of recipes. Each recipe consists of a list of ingredients and (optionally) textual instructions. The tabs can be accessed by tapping on the desired tab, or by using a swiping motion left or right to scroll the desired tab into view.

Every view has menu items (shown in the options menu on devices that have one, or the "overflow" menu on those that don't). Practically everything can be tapped to perform an operation, such as viewing its contents. List entries with an icon on the left also have a "quick action bar", obtained by tapping the icon.

Main Display, Categories Tab

Main view Options menuMain view with Quick Action Bar

This is the main display's categories tab, with the options menu open on the left, and a quick action bar open on the right. This shows all the item categories in the current list.

Main Display, Recipes Tab

Recipes QARecipes Quick Action

This is the main display's recipes tab, with the options menu open on the left, and a quick action bar open on the right.  This shows all the recipes you have defined. At the top is a spinner control for choosing a recipe category. You can add a recipe using the Add menu item, and use the quick action menu (obtained by tapping on the down arrow icon) to perform an operation on a specific recipe. 

Below is the same view in Shopping inventory interaction style. Instead of a checkbox on the right, there is a minus sign icon, standing for "use".

Recipes Inventory QA

Tapping on the icon on the right of a recipe brings up a dialog (shown below) in which you can specify how many servings you need for that recipe and a button for selecting the recipe ingredients marked as staples that you need. Based on that information, MobileShopper adds all the recipe ingredients to your needed list automatically (properly scaling the recipe per your specified number of servings).

Recipe Needed

By tapping on a recipe name, you get a list of the ingredients in the recipe as shown below, along with a field for specifying the yield of the recipe (in servings). If you have included a matching file (please see the FAQ for details) on your SD card, a Show instructions button is displayed.

Ingredients

Tapping that button yields the display on the left below. If your instructions include a photo, it could look like the display on the right. The same button (now labeled Show ingredients) can be tapped again to return to the ingredient list.

Recipe InstructionsRecipe Instructions Photo

Main Display, Needed Tab

 Main view Needed Items

This is the main view's needed items tab. It shows the items you have marked as needed, divided by category. The checkbox indicates whether an item has been placed in your cart or not. When checked, the item is placed in a special divider labeled "Items in cart", which appears as black text in a yellow box at the bottom of the list. Unchecking an item there puts the item back in the category it was originally in. Each divider shows the category name and the count and sum of the prices of the items in that category. At the bottom of the list is a footer, always visible, which shows the total item count and total price of all items.

Category Items View

Category Items Category Items Quick Action bar

This is the category items view (for the "Meats" category), with the options menu open on the left, and a quick action bar open on the right. On the top is a text field you can use to filter the list by what you type in it.

Below is the same view in Shopping inventory interaction style. Instead of a checkbox on the right, there is a minus sign icon, standing for "use". Tap that icon to bring up a dialog in which you can specify the quantity and units of that item you are using or taking out of stock. To enter the quantity you have in supply/stock, tap on the item name or use the Edit quick action to bring up the dialog shown on the right. You can also add any textual information you like in the Info field.

items Inventory QAItem Edit

Item Details, Use Dialog

 Item Details viewItem Use

On the left is the item details dialog, obtained by tapping the checkbox for ribeye steak from the "Meats" category items view. This lets you specify the quantity, units and price for an item. After tapping the OK button, the values you have chosen appear to the left of the checkbox. This dialog appears in shopping list interaction style.

On the right is the "use item" dialog, obtained by tapping the "use" icon for ribeye steak from the "Meats" category items view. This lets you specify the quantity and units for an item you are using. This dialog appears in the inventory interaction styles.

Settings View and Subviews

 Settings View

This is the settings view. MobileShopper has several settings that let you customize various aspects of the application. One very useful aspect of the settings is that they are unique to the list that is currently selected in the main view's Lists action item. That means that you can have different settings for each list.

The primary setting is the first one, for choosing an interaction style. You can choose Shopping list (the default), Shopping inventory or General inventory. The inventory styles let you use your data as an inventory of your existing supply or stock of items. Instead of checking an item off to indicate it is needed, you "use" it by tapping on a minus sign icon (see previous sections). The only difference between Shopping inventory and General inventory is that recipes are called "bundles" instead. Related to this setting is the one below it labeled Inventory item needed event. Enabled only when one of the inventory interaction styles is chosen, you can choose On out of stock or On use. The latter choice causes used items to appear in your needed list immediately on use, while the former choice causes them to appear only when the quantity in stock of an item drops to zero.

Other customizations you can make include showing or not showing item details and prices, using category icons you provide, configure the item units (add, delete, reorder), reorder the shopping aisles (the categories as they appear in the needed items tab), configure recipe/bundle categories and send support data to me if you have found a bug in the program.

 Change icon set

This is the dialog for telling the application to use your icons. Place your icons on your SD card root in folder MobileShopper/icons/. Each icon must be in .png format and be named the same as the category it represents (with all non-alphabetic characters removed).  For example, the icon for the Breads/Grains/Cereals/Nuts category should have an icon name of breadsgrainscerealsnuts.png.

If an icon can't be found, or the SD card is unmounted or removed, the built-in icon is used. This allows you to replace only those icons you want to replace. Because you can add your own categories, this also allows you to provide your own icon for it as well.

Android standard sizes for list icons are 24x24 (ldpi), 32x32 (mdpi) and 48x48 (hdpi). You are free to use any size you like however - the list item heights will adjust automatically.

Units configUnit Edit

On the left is the dialog for configuring the units available for specifying item quantities, with the options menu open. To add a unit, use the Add menu item. To rename a unit or delete a unit, tap on the unit and choose Rename or Delete from the resulting quick action bar. The Rename choice becomes Edit in the inventory interaction styles. Use of the Edit action allows you to specify the mapping between the units you have defined and standard units, which is required for MobileShopper to perform conversion between different units.The Edit dialog is shown on the right.

You can also change the order of the units by tapping and holding on the drag icon on the right hand side, dragging to the desired position, then dropping it.

Aisle Reordering

This is the dialog for reordering the shopping aisles (the categories as they appear on the needed tab. You can change the order of the aisles by tapping and holding on the drag icon on the right hand side, dragging to the desired position, then dropping it.

About Dialog and Version History

 About dialog

This is the "About" dialog.

Using the "Email support" link you can email information to technical support to help in diagnosing any problems you find. The information sent is your list of categories and items.

Using the "MobileShopper web page" link you can launch your web browser to view the MobileShopper web site (this site) on your device.

Using the "Version history" link you can view the version history for MobileShopper (see below).

Version history

This is the version history dialog. The dialog contains a list of each version since release, with detailed about the changes made in that version available by tapping on the + icon to expand it (tapping on the - icon to collapses it). Scroll the display via tap and drag as needed. You can expand or collapse all versions by using the Expand All or Collapse All buttons.

Help Dialog

 Help dialog

This is the help dialog. This dialog shows a list of help topics, each of which can be expanded to view details on that topic by tapping the + icon (tapping on the - icon to collapses it). Scroll the display via tap and drag as needed. You can expand or collapse all topics by using the Expand All or Collapse All buttons.