Bug 1041738 - Style search bar and suggestions

mozilla · Jul 22, 2014 · 431ef13 · 431ef13
1 parent f7333ec
commit 431ef13
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 67 deletions.
diff --git a/app/src/main/java/org/mozilla/search/autocomplete/AutoCompleteAdapter.java b/app/src/main/java/org/mozilla/search/autocomplete/AutoCompleteAdapter.java
@@ -6,6 +6,7 @@
 
 import android.content.Context;
 import android.text.SpannableString;
+import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;

diff --git a/app/src/main/java/org/mozilla/search/autocomplete/ClearableEditText.java b/app/src/main/java/org/mozilla/search/autocomplete/ClearableEditText.java
@@ -14,17 +14,17 @@
 import android.view.View;
 import android.view.inputmethod.EditorInfo;
 import android.view.inputmethod.InputMethodManager;
-import android.widget.Button;
 import android.widget.EditText;
 import android.widget.FrameLayout;
+import android.widget.ImageButton;
 import android.widget.TextView;
 
 import org.mozilla.search.R;
 
 public class ClearableEditText extends FrameLayout {
 
     private EditText editText;
-    private Button clearButton;
+    private ImageButton clearButton;
     private InputMethodManager inputMethodManager;
 
     private TextListener listener;
@@ -71,7 +71,7 @@ public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
             }
         });
 
-        clearButton = (Button) findViewById(R.id.clear_button);
+        clearButton = (ImageButton) findViewById(R.id.clear_button);
         clearButton.setOnClickListener(new View.OnClickListener(){
             @Override
             public void onClick(View v) {

diff --git a/app/src/main/res/drawable/edit_text_background.xml b/app/src/main/res/drawable/edit_text_background.xml
@@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item
+        android:state_focused="true"
+        android:drawable="@drawable/edit_text_focused"/>
+
+    <item android:drawable="@android:color/transparent"/>
+
+</selector>
diff --git a/app/src/main/res/drawable/edit_text_focused.xml b/app/src/main/res/drawable/edit_text_focused.xml
@@ -0,0 +1,20 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item
+        android:top="-2dp"
+        android:right="-2dp"
+        android:left="-2dp">
+        <shape>
+            <padding
+                android:top="10dp"
+                android:bottom="10dp"/>
+            <solid android:color="@android:color/transparent"/>
+            <stroke android:width="2dp" android:color="@color/highlight_orange"/>
+        </shape>
+    </item>
+
+</layer-list>
diff --git a/app/src/main/res/drawable/search_card_background.xml b/app/src/main/res/drawable/search_card_background.xml
@@ -3,46 +3,23 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-
-
     <item>
         <shape>
             <padding
                 android:bottom="5dp"
+                android:top="5dp"
                 android:left="10dp"
-                android:right="10dp"
-                android:top="10dp"/>
-            <solid android:color="@color/transparent"/>
+                android:right="10dp"/>
+            <solid android:color="@android:color/transparent"/>
         </shape>
     </item>
 
-    <item>
-        <shape>
-            <padding
-                android:bottom="1dp"
-                android:left="0dp"
-                android:right="0dp"
-                android:top="0dp"/>
-            <solid android:color="@color/card_shadow_1"/>
-            <corners android:radius="2dp"/>
-        </shape>
-    </item>
-    <item>
-        <shape>
-            <padding
-                android:bottom="1dp"
-                android:left="0dp"
-                android:right="0dp"
-                android:top="0dp"/>
-            <solid android:color="@color/card_shadow_2"/>
-            <corners android:radius="2dp"/>
-        </shape>
-    </item>
     <!-- Background -->
     <item>
         <shape>
             <solid android:color="@color/card_background"/>
-            <corners android:radius="2dp"/>
+            <corners android:radius="5dp"/>
+            <stroke android:width="1dp" android:color="@color/card_border" />
         </shape>
     </item>
 </layer-list>
diff --git a/app/src/main/res/layout/clearable_edit_text.xml b/app/src/main/res/layout/clearable_edit_text.xml
@@ -8,21 +8,25 @@
         android:id="@+id/edit_text"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
         android:imeOptions="actionSearch"
         android:inputType="textNoSuggestions|textVisiblePassword"
         android:drawableLeft="@drawable/search_icon"
         android:drawablePadding="10dp"
+        android:background="@drawable/edit_text_background"
         android:focusable="false"
         android:focusableInTouchMode="false"
+        android:textColorHighlight="@color/highlight_orange"
         android:hint="@string/search_bar_hint"/>
 
-    <Button
+    <ImageButton
         android:id="@+id/clear_button"
-        android:layout_width="14dp"
-        android:layout_height="14dp"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
         android:layout_gravity="right|center_vertical"
-        android:layout_marginRight="10dp"
-        android:background="@drawable/search_clear"
+        android:background="@android:color/transparent"
+        android:src="@drawable/search_clear"
+        android:scaleType="centerInside"
         android:visibility="gone"/>
 
 </merge>
diff --git a/app/src/main/res/layout/search_auto_complete.xml b/app/src/main/res/layout/search_auto_complete.xml
@@ -13,14 +13,16 @@
     <org.mozilla.search.autocomplete.ClearableEditText
         android:id="@+id/auto_complete_edit_text"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
+        android:layout_height="@dimen/search_bar_height"
         android:padding="10dp"/>
 
     <ListView
         android:id="@+id/auto_complete_dropdown"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="#fff"
+        android:background="@color/global_background_color"
+        android:divider="@android:color/transparent"
+        android:dividerHeight="0dp"
         android:visibility="gone"/>
 
 </LinearLayout>
diff --git a/app/src/main/res/layout/search_auto_complete_row.xml b/app/src/main/res/layout/search_auto_complete_row.xml
@@ -2,26 +2,31 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
-<LinearLayout
+<FrameLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:background="@drawable/search_card_background"
+    android:padding="0dp"
+    android:layout_marginTop="5dp"
+    android:layout_marginBottom="5dp"
+    android:layout_marginLeft="10dp"
+    android:layout_marginRight="10dp"
     android:descendantFocusability="blocksDescendants"
     android:orientation="horizontal">
 
     <TextView
         android:id="@+id/auto_complete_row_text"
-        xmlns:android="http://schemas.android.com/apk/res/android"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginLeft="10dp"
-        android:layout_weight="1"/>
+        android:padding="30dp"/>
 
     <Button
         android:id="@+id/auto_complete_row_jump_button"
-        style="@style/BorderLessButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:text="@string/search_jump_arrow"/>
+        android:layout_gravity="right|center_vertical"
+        android:text="@string/search_jump_arrow"
+        android:background="@android:color/transparent"/>
 
-</LinearLayout>
+</FrameLayout>
diff --git a/app/src/main/res/layout/search_card_history.xml b/app/src/main/res/layout/search_card_history.xml
@@ -7,11 +7,9 @@
     android:id="@+id/site_name"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginBottom="20dp"
-    android:layout_marginLeft="10dp"
-    android:layout_marginRight="10dp"
-    android:layout_marginTop="20dp"
-    android:padding="25dp"
     android:background="@drawable/search_card_background"
-    android:fontFamily="sans-serif-thin"
-    android:textSize="16sp"/>
+    android:padding="30dp"
+    android:layout_marginTop="5dp"
+    android:layout_marginBottom="5dp"
+    android:layout_marginLeft="10dp"
+    android:layout_marginRight="10dp"/>
diff --git a/app/src/main/res/values-v13/search_styles.xml b/app/src/main/res/values-v13/search_styles.xml
@@ -4,10 +4,10 @@
 
 <resources>
 
-    <style name="AppTheme" parent="@android:style/Theme.Holo.Light.NoActionBar"/>
-
-
-    <style name="BorderLessButton">
-        <item name="android:background">?android:attr/selectableItemBackground</item>
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="@android:style/Theme.Holo.Light.NoActionBar">
+        <item name="android:windowBackground">@color/global_background_color</item>
+        <item name="android:colorBackground">@color/global_background_color</item>
     </style>
+
 </resources>
diff --git a/app/src/main/res/values/search_colors.xml b/app/src/main/res/values/search_colors.xml
@@ -4,14 +4,13 @@
 
 <resources>
 
-    <color name="transparent">#00FFFFFF</color>
+    <color name="global_background_color">#EBEBF0</color>
 
     <color name="highlight_orange">#FF9500</color>
 
     <!-- card colors -->
     <color name="card_background">#ffffff</color>
-    <color name="card_shadow_1">#d4d4d4</color>
-    <color name="card_shadow_2">#dddddd</color>
+    <color name="card_border">#dddddd</color>
 
     <!-- Search suggestion highlight color is defined in SearchFragment.java -->
 </resources>
diff --git a/app/src/main/res/values/search_dimens.xml b/app/src/main/res/values/search_dimens.xml
@@ -6,5 +6,5 @@
     <!--This is used to offset the webview so that it is not covered-->
     <!--by the search bar. If we change the height of the search bar-->
     <!--then this will need to be updated.-->
-    <dimen name="search_bar_height">55dp</dimen>
+    <dimen name="search_bar_height">65dp</dimen>
 </resources>
diff --git a/app/src/main/res/values/search_styles.xml b/app/src/main/res/values/search_styles.xml
@@ -5,12 +5,9 @@
 <resources>
 
     <!-- Base application theme. -->
-
     <style name="AppTheme" parent="@android:style/Theme.Light.NoTitleBar">
-    </style>
-
-
-    <style name="BorderLessButton">
+        <item name="android:windowBackground">@color/global_background_color</item>
+        <item name="android:colorBackground">@color/global_background_color</item>
     </style>
 
 </resources>