From ae6f4fc723c0c5bb3e9bf9567289e459345aed59 Mon Sep 17 00:00:00 2001
From: Phillip Hsu <philliphsu@outlook.com>
Date: Mon, 18 Jul 2016 04:11:43 -0700
Subject: [PATCH] Testing anchored fab in dialogs

---
 .../res/layout/content_grid_layout_numpad.xml |  18 ---
 .../res/layout/content_hybrid_time_picker.xml |  12 ++
 .../res/layout/content_numpad_time_picker.xml |   6 -
 .../dialog_time_picker_scrolling_grid.xml     | 133 ++++++++++--------
 app/src/main/res/values/dimens.xml            |   1 +
 app/src/main/res/values/styles.xml            |  13 ++
 6 files changed, 99 insertions(+), 84 deletions(-)
 create mode 100644 app/src/main/res/layout/content_hybrid_time_picker.xml

diff --git a/app/src/main/res/layout/content_grid_layout_numpad.xml b/app/src/main/res/layout/content_grid_layout_numpad.xml
index 307fd4b..e80f365 100644
--- a/app/src/main/res/layout/content_grid_layout_numpad.xml
+++ b/app/src/main/res/layout/content_grid_layout_numpad.xml
@@ -4,8 +4,6 @@
     <Button
         android:id="@+id/one"
         style="@style/grid_element_single"
-        grid:layout_rowSpan="1"
-        grid:layout_columnSpan="1"
         grid:layout_rowWeight="1"
         grid:layout_columnWeight="1"
         android:text="1"/>
@@ -13,8 +11,6 @@
     <Button
         android:id="@+id/two"
         style="@style/grid_element_single"
-        grid:layout_rowSpan="1"
-        grid:layout_columnSpan="1"
         grid:layout_rowWeight="1"
         grid:layout_columnWeight="1"
         android:text="2"/>
@@ -29,8 +25,6 @@
     <Button
         android:id="@+id/four"
         style="@style/grid_element_single"
-        grid:layout_rowSpan="1"
-        grid:layout_columnSpan="1"
         grid:layout_rowWeight="1"
         grid:layout_columnWeight="1"
         android:text="4"/>
@@ -38,8 +32,6 @@
     <Button
         android:id="@+id/five"
         style="@style/grid_element_single"
-        grid:layout_rowSpan="1"
-        grid:layout_columnSpan="1"
         grid:layout_rowWeight="1"
         grid:layout_columnWeight="1"
         android:text="5"/>
@@ -47,8 +39,6 @@
     <Button
         android:id="@+id/six"
         style="@style/grid_element_single"
-        grid:layout_rowSpan="1"
-        grid:layout_columnSpan="1"
         grid:layout_rowWeight="1"
         grid:layout_columnWeight="1"
         android:text="6"/>
@@ -56,8 +46,6 @@
     <Button
         android:id="@+id/seven"
         style="@style/grid_element_single"
-        grid:layout_rowSpan="1"
-        grid:layout_columnSpan="1"
         grid:layout_rowWeight="1"
         grid:layout_columnWeight="1"
         android:text="7"/>
@@ -65,8 +53,6 @@
     <Button
         android:id="@+id/eight"
         style="@style/grid_element_single"
-        grid:layout_rowSpan="1"
-        grid:layout_columnSpan="1"
         grid:layout_rowWeight="1"
         grid:layout_columnWeight="1"
         android:text="8"/>
@@ -74,8 +60,6 @@
     <Button
         android:id="@+id/nine"
         style="@style/grid_element_single"
-        grid:layout_rowSpan="1"
-        grid:layout_columnSpan="1"
         grid:layout_rowWeight="1"
         grid:layout_columnWeight="1"
         android:text="9"/>
@@ -83,8 +67,6 @@
     <Button
         android:id="@+id/zero"
         style="@style/grid_element_single"
-        grid:layout_rowSpan="1"
-        grid:layout_columnSpan="1"
         grid:layout_rowWeight="1"
         grid:layout_columnWeight="1"
         grid:layout_column="1"
diff --git a/app/src/main/res/layout/content_hybrid_time_picker.xml b/app/src/main/res/layout/content_hybrid_time_picker.xml
new file mode 100644
index 0000000..a02c69b
--- /dev/null
+++ b/app/src/main/res/layout/content_hybrid_time_picker.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge xmlns:grid="http://schemas.android.com/apk/res-auto"
+       xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- We have to wrap this in a merge tag or else the GridLayout
+    attributes won't be picked up by the GridLayout that will be
+    the parent of this element. -->
+    <TextView
+        style="@style/hybrid_time_picker_grid_element"
+        android:text="01"/>
+
+</merge>
\ No newline at end of file
diff --git a/app/src/main/res/layout/content_numpad_time_picker.xml b/app/src/main/res/layout/content_numpad_time_picker.xml
index 988f98c..37b8f5b 100644
--- a/app/src/main/res/layout/content_numpad_time_picker.xml
+++ b/app/src/main/res/layout/content_numpad_time_picker.xml
@@ -7,8 +7,6 @@
     <Button
         android:id="@+id/leftAlt"
         style="@style/grid_element_single"
-        app:layout_rowSpan="1"
-        app:layout_columnSpan="1"
         app:layout_rowWeight="1"
         app:layout_columnWeight="1"
         app:layout_column="0"/>
@@ -16,8 +14,6 @@
     <Button
         android:id="@+id/rightAlt"
         style="@style/grid_element_single"
-        app:layout_rowSpan="1"
-        app:layout_columnSpan="1"
         app:layout_rowWeight="1"
         app:layout_columnWeight="1"
         app:layout_column="2"/>
@@ -43,8 +39,6 @@
         android:id="@+id/backspace"
         android:src="@drawable/ic_backspace_24dp"
         android:background="?selectableItemBackground"
-        app:layout_rowSpan="1"
-        app:layout_columnSpan="1"
         app:layout_rowWeight="1"
         app:layout_columnWeight="1"
         app:layout_column="2"/>
diff --git a/app/src/main/res/layout/dialog_time_picker_scrolling_grid.xml b/app/src/main/res/layout/dialog_time_picker_scrolling_grid.xml
index 8e69ed2..00b9766 100644
--- a/app/src/main/res/layout/dialog_time_picker_scrolling_grid.xml
+++ b/app/src/main/res/layout/dialog_time_picker_scrolling_grid.xml
@@ -1,75 +1,88 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- TOneverDO: Use LinearLayout because it doesn't obey LWM -->
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                xmlns:app="http://schemas.android.com/apk/res-auto">
-
-    <ScrollView
-        android:id="@+id/grid"
-        android:layout_width="match_parent"
-        android:layout_height="@dimen/scrolling_grid_height"
-        android:layout_alignParentTop="true">
-
-        <android.support.v7.widget.GridLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            app:alignmentMode="alignBounds"
-            app:columnCount="3">
-
-            <include layout="@layout/content_grid_layout_numpad"/>
-            <include layout="@layout/content_grid_layout_numpad"/>
-
-        </android.support.v7.widget.GridLayout>
-
-    </ScrollView>
-
-    <View
-        android:id="@+id/divider"
-        android:layout_width="match_parent"
-        android:layout_height="1dp"
-        android:background="?android:listDividerAlertDialog"
-        android:layout_below="@id/grid"/>
+<android.support.design.widget.CoordinatorLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
 
     <LinearLayout
         android:layout_width="match_parent"
-        android:layout_height="@dimen/fab_cell_height"
-        android:orientation="horizontal"
-        android:layout_below="@id/divider">
+        android:layout_height="match_parent"
+        android:orientation="vertical">
 
-        <TextView
-            android:layout_width="0dp"
+        <!-- The advantage in defining a single layout for an element
+         of this grid and including it N times, instead of defining each
+         element N times, is code deduplication and reduction. Now, whenever
+         we want to make changes to how grid elements appear, all we have
+         to do is go to the single element's layout and make the changes,
+         and all the following grid elements will be changed. -->
+        <android.support.v7.widget.GridLayout
+            android:id="@+id/grid"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:minHeight="40dp"
-            android:layout_weight="1"
-            android:layout_gravity="center"
-            android:gravity="center"
-            android:text="AM"
-            android:textSize="@dimen/ampm_text_size"/>
+            android:paddingBottom="20dp"
+            app:columnCount="4">
 
-        <FrameLayout
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_weight="1">
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
 
-            <android.support.design.widget.FloatingActionButton
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center"
-                android:src="@drawable/ic_done_24dp"/>
+        </android.support.v7.widget.GridLayout>
 
-        </FrameLayout>
+        <View
+            android:id="@+id/divider"
+            android:layout_width="match_parent"
+            android:layout_height="1dp"
+            android:background="?android:listDividerAlertDialog"/>
 
-        <TextView
-            android:layout_width="0dp"
+        <!-- We need to distribute excess space around the child views
+         without scaling them because they should have a fixed width.
+         LinearLayout and layout_weight cannot achieve this. A passable
+         workaround is to use LinearLayout with Spaces of layout_weight=1
+         to the left and right of each view, but the view will not be
+         exactly centered; besides, that leads to ugly duplicate code. -->
+        <android.support.v7.widget.GridLayout
+            android:id="@+id/ampm"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:minHeight="40dp"
-            android:layout_weight="1"
-            android:layout_gravity="center"
-            android:gravity="center"
-            android:text="PM"
-            android:textSize="@dimen/ampm_text_size"/>
+            app:columnCount="2"
+            app:rowCount="1">
+
+            <include layout="@layout/content_hybrid_time_picker"/>
+            <include layout="@layout/content_hybrid_time_picker"/>
+
+        </android.support.v7.widget.GridLayout>
 
     </LinearLayout>
 
-</RelativeLayout>
\ No newline at end of file
+    <android.support.design.widget.FloatingActionButton
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_anchor="@id/divider"
+        app:layout_anchorGravity="center"
+        app:fabSize="mini"
+        android:src="@drawable/ic_done_24dp"/>
+
+</android.support.design.widget.CoordinatorLayout>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 1716fcd..7cb8c25 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -13,6 +13,7 @@
     <dimen name="text_margin">16dp</dimen>
 
     <dimen name="grid_element_text_size">28sp</dimen>
+    <dimen name="grid_element_touch_target">40dp</dimen>
 
     <!-- NumpadTimePickerDialog -->
     <dimen name="header_height">72dp</dimen>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 39f341d..cd46fb9 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -26,4 +26,17 @@
         <item name="android:textSize">@dimen/grid_element_text_size</item>
     </style>
 
+    <style name="hybrid_time_picker_grid_element">
+        <item name="android:layout_width">@dimen/grid_element_touch_target</item>
+        <item name="android:layout_height">@dimen/grid_element_touch_target</item>
+        <item name="android:gravity">center</item>
+        <item name="android:textSize">20sp</item>
+        <!-- http://stackoverflow.com/a/6868308/5055032
+         Leave off the namespace to reference a custom attribute.
+         Here, we are referencing the "grid:" namespace -->
+        <item name="layout_columnWeight">1</item>
+        <item name="layout_rowWeight">1</item>
+        <item name="layout_gravity">center</item>
+    </style>
+
 </resources>