OI Shopping List: Improve Pick-items dialog theme

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Press Menu > Pick items.

What is the expected output? What do you see instead?
The following aspects of the "pick items" theme could be improved:
* New icon for "add item", for example a plus sign in a green circle.
* Highlight only pickable items and gray out items that are already in the list 
(currently checked items are grayed out, but unchecked items are highlighted 
like the pickable items)

Original issue reported on code.google.com by peli0...@googlemail.com on 27 Jul 2011 at 6:32

[GoogleCodeExporter]

The checked items are shown grayed out but they can still be checked, in which 
case they are removed from the list. I am happy with that functionality the way 
it is-- I wouldn't mind if the items already on the list are grayed out as long 
as you can still toggle them, for example in case you picked something by 
mistake.

I fully agree that we could use a better icon for the not-yet-picked items.

Original comment by AaronPer...@gmail.com on 28 Jul 2011 at 3:42

[GoogleCodeExporter]

This issue was updated by revision r3508.

In "pick items" mode make the "add item" image appear next to the check box, 
not instead of it.
Advantages:
* This also works in themes without a check box (e.g. classic or Android)
* It further highlights the selectable items.

Original comment by peli0...@googlemail.com on 28 Jul 2011 at 3:02

[GoogleCodeExporter]

Hi Peli,

Well, that's a novel approach that would not have occurred to me. I could tell 
that I would not be able to understand the impact of this commit just by 
reading the code, so I waited to comment until I could get home and try it out. 

A screenshot from my emulator is attached. Issues: (a) List alignment gets 
messy when items of different statuses are shown together. (b) Kind of strange 
to have two buttons that do the same thing right next to each other. (c) When I 
click the checkbox on an item not on the list, the plus sign disappears and the 
checkbox moves to the right. Then if I want to undo the change I have to move 
my finger.

I agree that the fact that some themes do not include the checkbox was a 
problem with the previous implementation. A more natural solution to that 
problem might be to go (back to the one-physical-space solution but) disregard 
the theme's desire to not show the checkbox when in Pick Items mode. 

There are other ways that (a) and (c) could be solved -- put the checkbox on 
the left, and/or make the + take up space even when it is invisible -- but I 
feel that two buttons just uses too much space, leaving less space for the item 
name etc.

Regards,
-- Aaron

Original comment by AaronPer...@gmail.com on 29 Jul 2011 at 3:46

Attachments:

• Screenshot-5554:Froyo.png

[GoogleCodeExporter]

Hi Aaron,

Maybe I was too focused on the tablet version. I think it looks great and feels 
great there :) but there is *lots* of space available (see screenshot attached).

Let me try to convince you that this makes sense:
(1) The basic idea that this "novel approach" tries to visualize is that items 
with a "plus" sign are *not* part of your current shopping list. They 
physically stand out - are aligned differently. You have to "pull them" into 
your shopping list. There is a pseudo-animation when an item is added to your 
list (it "jumps" to the left).
(2) Most item names are short enough so that this will not make the list much 
longer. In your screenshot, it is only one entry ("baby gate evenflo") that may 
wrap when removed from the list.

ad (a) messy alignment: Items that are on the list are aligned differently from 
items not in the list. It is very easy visually to spot those items that one 
may want to add to the list.

ad (b) two buttons next to each other that do the same: Think of it as one 
extended or one bigger button.

ad (c) checkbox moves: just always click on the "plus" (or the checkbox if the 
plus is not there) and you never have to move a finger to toggle the state. 
Visually, in the OS3 Holo theme, the "plus" is more prominent than the 
checkbox, so one more naturally pushes the "plus" (in OS1/2 it is admittedly 
the opposite).

Give it a try for a day or two, and if you still don't like it, we can revert 
it :-)

Peli

Original comment by peli0...@googlemail.com on 29 Jul 2011 at 5:16

Attachments:

• shoppinglist-tablet-01a.png

[GoogleCodeExporter]

Original comment by AaronPer...@gmail.com on 29 Jul 2011 at 12:21

Attachments:

• snap20110729_081712.png

[GoogleCodeExporter]

This issue was updated by revision r3517.

Ok, I guess I can not convince you. Here is an updated version:
* Basically reverts the effect of r3508.
* Keeps functionality in themes without a checkbox: The "plus" image is hidden, 
but keeps the same space
* LinearLayout has been converted to RelativeLayout, so that checkbox and image 
can be stacked on top of each other. This implementation keeps the item names 
perfectly aligned across various versions and devices. The size of the checkbox 
is pertained by setting its status to "invisible" instead of "gone". The 
maximum image size is limited to 28dip (small) / 32dip (large) which should fit 
into the smallest check box size found across the systems.

Original comment by peli0...@googlemail.com on 31 Jul 2011 at 5:15

[GoogleCodeExporter]

ToDo: The "plus" image is not visibly focusable by the D-Pad.

Original comment by peli0...@googlemail.com on 31 Jul 2011 at 12:49

• Added labels: Priority-Low
• Removed labels: Priority-Medium