Closed Bug 1043034 Opened 6 years ago Closed 6 years ago

Make search bar look more tappable in inactive state

Categories

(Firefox for Android Graveyard :: Search Activity, defect, P1)

All
Android
defect

Tracking

(firefox34 affected)

RESOLVED FIXED
Firefox 34
Tracking Status
firefox34 --- affected

People

(Reporter: Margaret, Assigned: Margaret)

References

Details

Attachments

(2 files)

A few people have mentioned this in feedback, so I'm filing this bug for us to think about how to improve this.
I have a couple more ideas here but I'd like to float this one and give it a try... Also, keep in mind that stock Android UI is due for a major overhaul in the coming months.

That being said, the main parts of the UI this uses to help show the user that it's tap-able are in the placeholder copy, and the underline (which now get's thicker when activated 1dp to 2dp - top aligned).

This means we can keep the transition animation from normal to active (the expand and bounce) and still keep it consistent with the rest of the UI while not demanding too much attention.
(In reply to Anthony Lam (:antlam) from comment #1)
> Created attachment 8461819 [details]
> prev_samvp_inputsearch.png
> 
> I have a couple more ideas here but I'd like to float this one and give it a
> try... Also, keep in mind that stock Android UI is due for a major overhaul
> in the coming months.

I don't think we should feel too tied to following the new material design guidelines, since even if Android L is released this fall, it will still take a while for it to spread in the market. At least for the time being, I think we should just find a design that we're happy with ourselves and think users will understand.
(In reply to :Margaret Leibovic from comment #2)
> (In reply to Anthony Lam (:antlam) from comment #1)
> > Created attachment 8461819 [details]
> > prev_samvp_inputsearch.png
> > 
> > I have a couple more ideas here but I'd like to float this one and give it a
> > try... Also, keep in mind that stock Android UI is due for a major overhaul
> > in the coming months.
> 
> I don't think we should feel too tied to following the new material design
> guidelines, since even if Android L is released this fall, it will still
> take a while for it to spread in the market. At least for the time being, I
> think we should just find a design that we're happy with ourselves and think
> users will understand.

I completely agree and that's what I'm trying to do as well. 

To be clear, I am not trying to align us to Materials Design. All these animations and what not was stuff we already were working on/talking about beforehand. :) 

To say nothing about our stuff, I just meant that there will be a shift in user's perception and expectation soon.
Assignee: nobody → margaret.leibovic
Priority: -- → P1
What is the color value for the underline?
Flags: needinfo?(alam)
1dp tall, 15dp from the edge, #AFB1B3 :)
Flags: needinfo?(alam)
wesj, I'm going to start making you review more of my search activity patches :)
Attachment #8469497 - Flags: review?(wjohnston)
Comment on attachment 8469497 [details] [diff] [review]
Add underline to search bar when inactive

Review of attachment 8469497 [details] [diff] [review]:
-----------------------------------------------------------------

::: mobile/android/search/res/drawable/edit_text_default.xml
@@ +10,5 @@
> +        android:left="-2dp">
> +        <shape>
> +            <padding
> +                android:top="10dp"
> +                android:bottom="10dp"/>

I had to play with this a minute to figure out what's going on. This draws a rectangle, but it moves the top, left, and right sides off screen so that you only see the bottom border of it. I'm not sure what the padding does in here though. Do you need it for something? I've tried to add comments to these files explaining why things are at times, but they're hard to write succinctly.
Attachment #8469497 - Flags: review?(wjohnston) → review+
(In reply to Wesley Johnston (:wesj) from comment #7)
> Comment on attachment 8469497 [details] [diff] [review]
> Add underline to search bar when inactive
> 
> Review of attachment 8469497 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> ::: mobile/android/search/res/drawable/edit_text_default.xml
> @@ +10,5 @@
> > +        android:left="-2dp">
> > +        <shape>
> > +            <padding
> > +                android:top="10dp"
> > +                android:bottom="10dp"/>
> 
> I had to play with this a minute to figure out what's going on. This draws a
> rectangle, but it moves the top, left, and right sides off screen so that
> you only see the bottom border of it. I'm not sure what the padding does in
> here though. Do you need it for something? I've tried to add comments to
> these files explaining why things are at times, but they're hard to write
> succinctly.

This padding is used to create space between the line and the text. It matches the padding on the view itself, so I can update it to use the dimen value. However, it looks like I only need the padding on the default background.

I'll try adding some comments, since I appreciated the comments you added to the background drawables for the search widget.
https://hg.mozilla.org/mozilla-central/rev/5911966cfcf0
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 34
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.