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.3.1 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 3.0

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

Sharing

You can now share your shopping lists with family members! After an easy setup using the app's settings view (for each family member), every change made by any family member is shared with every other, so that everybody has the same shopping list. So if one family member realizes that some basil is needed for tonight's dinner, adding it to his/her shopping list causes it to appear in everybody else's shopping list. The person who actually picks up the basil simply checks it off the "Needed List", and the change appears in everybody else's list. Please see the FAQ for details on how to configure sharing.

"Header" Style Settings

The settings view now supports the "header" style, allowing users with tablets to see headers on the left side and the contained settings on the right side.

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

Below 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 view Options menuMain view with Quick Action Bar

Main Display, Recipes Tab

Below 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. 

Recipes QARecipes Quick Action

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

Below 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.

 Main view Needed Items

Category Items View

Below 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.

Category Items Category Items Quick Action bar

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

Below 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.

 Item Details viewItem Use

Settings View and Subviews

Below on the left is the settings view. A 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. MobileShopper has several categories of settings that let you customize various aspects of the application.

In the Basic category you can choose an interaction style. The available styles are 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.

In the Display category you can choose to show or not show item details and prices and elect to use category icons you provide. In the Configuration category (shown below on the right) you can configure the item units (add, delete, reorder), reorder the shopping aisles (the categories as they appear in the needed items tab) and configure recipe/bundle categories.  In the Sharing category you can setup the app to share your shopping list with family members. In the Support category you can send support data to me if you have found a bug in the program.

 Settings View Configuration settings

Below 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.

Units configUnit Edit

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.

Below 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.

Aisle Reordering

About Dialog and Version History

Below is the "About" dialog on the left.

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 (on the right). 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 strong>Expand All or Collapse All buttons.

 About dialogVersion history

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.

 Help dialog