1043034 - Make search bar look more tappable in inactive state

Status: RESOLVED FIXED

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

Description

[:Margaret Leibovic]

A few people have mentioned this in feedback, so I'm filing this bug for us to think about how to improve this.

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: 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.

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.

Comment 2

[:Margaret Leibovic]

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

Comment 3

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

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

Comment 4

[:Margaret Leibovic]

What is the color value for the underline?

Comment 5

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

1dp tall, 15dp from the edge, #AFB1B3 :)

Comment 6

[:Margaret Leibovic]

Attachment: Add underline to search bar when inactive

wesj, I'm going to start making you review more of my search activity patches :)

Comment 7

[Wesley Johnston (:wesj)]

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.

Comment 8

[:Margaret Leibovic]

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

Comment 9

[:Margaret Leibovic]

https://hg.mozilla.org/integration/fx-team/rev/5911966cfcf0

Comment 10

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/5911966cfcf0