Testing anchored fab in dialogs

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"

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>

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"/>

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.support.design.widget.CoordinatorLayout
-                android:layout_width="match_parent"
+    xmlns:android="http://schemas.android.com/apk/res/android"
-                android:layout_height="match_parent"
+    android:layout_width="match_parent"
-                xmlns:app="http://schemas.android.com/apk/res-auto">
+    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"/>
 
     <LinearLayout
         android:layout_width="match_parent"
-        android:layout_height="@dimen/fab_cell_height"
+        android:layout_height="match_parent"
-        android:orientation="horizontal"
+        android:orientation="vertical">
-        android:layout_below="@id/divider">
 
-        <TextView
+        <!-- The advantage in defining a single layout for an element
-            android:layout_width="0dp"
+         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:paddingBottom="20dp"
-            android:layout_weight="1"
+            app:columnCount="4">
-            android:layout_gravity="center"
-            android:gravity="center"
-            android:text="AM"
-            android:textSize="@dimen/ampm_text_size"/>
 
-        <FrameLayout
+            <include layout="@layout/content_hybrid_time_picker"/>
-            android:layout_width="0dp"
+            <include layout="@layout/content_hybrid_time_picker"/>
-            android:layout_height="match_parent"
+            <include layout="@layout/content_hybrid_time_picker"/>
-            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"/>
 
-            <android.support.design.widget.FloatingActionButton
+        </android.support.v7.widget.GridLayout>
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center"
-                android:src="@drawable/ic_done_24dp"/>
 
-        </FrameLayout>
+        <View
+            android:id="@+id/divider"
+            android:layout_width="match_parent"
+            android:layout_height="1dp"
+            android:background="?android:listDividerAlertDialog"/>
 
-        <TextView
+        <!-- We need to distribute excess space around the child views
-            android:layout_width="0dp"
+         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"
+            app:columnCount="2"
-            android:layout_weight="1"
+            app:rowCount="1">
-            android:layout_gravity="center"
+
-            android:gravity="center"
+            <include layout="@layout/content_hybrid_time_picker"/>
-            android:text="PM"
+            <include layout="@layout/content_hybrid_time_picker"/>
-            android:textSize="@dimen/ampm_text_size"/>
+
+        </android.support.v7.widget.GridLayout>
 
     </LinearLayout>
 
-</RelativeLayout>
+    <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>

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>

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>