Bottom sheet time picker working

app/src/main/java/com/philliphsu/clock2/editalarm/BaseTimePickerDialog.java

@@ -1,20 +1,22 @@
 package com.philliphsu.clock2.editalarm;
 
+import android.app.Dialog;
+import android.content.DialogInterface;
 import android.os.Bundle;
 import android.support.annotation.LayoutRes;
-import android.support.annotation.Nullable;
+import android.support.design.widget.BottomSheetBehavior;
-import android.support.v4.app.DialogFragment;
+import android.support.design.widget.BottomSheetDialog;
+import android.support.design.widget.BottomSheetDialogFragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
-import android.view.Window;
 
 import butterknife.ButterKnife;
 
 /**
  * Created by Phillip Hsu on 7/16/2016.
  */
-public abstract class BaseTimePickerDialog extends DialogFragment {
+public abstract class BaseTimePickerDialog extends BottomSheetDialogFragment {
 
     // TODO: Consider private access, and then writing package/protected API that subclasses
     // can use to interface with this field.
@@ -33,6 +35,40 @@ public abstract class BaseTimePickerDialog extends DialogFragment {
         mCallback = callback;
     }
 
+    @Override
+    public Dialog onCreateDialog(Bundle savedInstanceState) {
+        Dialog dialog = super.onCreateDialog(savedInstanceState);
+        // We're past onCreate() in the lifecycle, so we can safely retrieve the host activity.
+        View view = LayoutInflater.from(getActivity()).inflate(contentLayout(), null);
+        /**
+         * Adds our view to a ViewGroup that has a BottomSheetBehavior attached. The ViewGroup
+         * itself is a child of a CoordinatorLayout.
+         * @see {@link BottomSheetDialog#wrapInBottomSheet(int, View, ViewGroup.LayoutParams)}
+         */
+        dialog.setContentView(view);
+        // Bind this fragment, not the internal dialog!
+        ButterKnife.bind(this, view);
+        final BottomSheetBehavior behavior = BottomSheetBehavior.from((View) view.getParent());
+        // When we collapse, collapse all the way. Do not be misled by the "docs" in
+        // https://android-developers.blogspot.com.au/2016/02/android-support-library-232.html
+        // when it says:
+        // "STATE_COLLAPSED: ... the app:behavior_peekHeight attribute (defaults to 0)"
+        // While it is true by default, BottomSheetDialogs override this default height.
+        // See http://stackoverflow.com/a/35634293/5055032 for an alternative solution involving
+        // defining a style that overrides the attribute.
+        behavior.setPeekHeight(0);
+        dialog.setOnShowListener(new DialogInterface.OnShowListener() {
+            @Override
+            public void onShow(DialogInterface dialog) {
+                // Every time we show, show at our full height.
+                behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
+            }
+        });
+
+        return dialog;
+    }
+
+    /*
     @Nullable
     @Override
     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
@@ -41,6 +77,7 @@ public abstract class BaseTimePickerDialog extends DialogFragment {
         ButterKnife.bind(this, view);
         return view;
     }
+    */
 
     @Override
     public void onDestroyView() {

app/src/main/java/com/philliphsu/clock2/editalarm/EditAlarmActivity.java

@@ -42,6 +42,7 @@ import butterknife.OnClick;
 import static android.text.format.DateFormat.getTimeFormat;
 import static com.philliphsu.clock2.DaysOfWeek.SATURDAY;
 import static com.philliphsu.clock2.DaysOfWeek.SUNDAY;
+import static com.philliphsu.clock2.util.KeyboardUtils.hideKeyboard;
 import static com.philliphsu.clock2.util.Preconditions.checkNotNull;
 
 /**
@@ -313,12 +314,15 @@ public class EditAlarmActivity extends BaseActivity implements
 
     @OnClick(R.id.input_time)
     void openTimePicker() {
+        // Close the keyboard first, or else our dialog will be screwed up.
+        // If not open, this does nothing.
+        hideKeyboard(this);
         // Create a new instance each time we want to show the dialog.
         // If we keep a reference to the dialog, we keep its previous state as well.
         // So the next time we call show() on it, the input field will show the
         // last inputted time.
-        //NumpadTimePickerDialog.newInstance(this).show(getSupportFragmentManager(), TAG_TIME_PICKER);
+        NumpadTimePickerDialog.newInstance(this).show(getSupportFragmentManager(), TAG_TIME_PICKER);
-        ScrollingGridTimePickerDialog.newInstance(this, true).show(getSupportFragmentManager(), "tag");
+        //ScrollingGridTimePickerDialog.newInstance(this, true).show(getSupportFragmentManager(), "tag");
     }
 
     private void setWeekDaysText() {

app/src/main/res/layout/content_grid_layout_numpad.xml

@@ -3,72 +3,52 @@
        xmlns:grid="http://schemas.android.com/apk/res-auto">
     <Button
         android:id="@+id/one"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         android:text="1"/>
 
     <Button
         android:id="@+id/two"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         android:text="2"/>
 
     <Button
         android:id="@+id/three"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         android:text="3"/>
 
     <Button
         android:id="@+id/four"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         android:text="4"/>
 
     <Button
         android:id="@+id/five"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         android:text="5"/>
 
     <Button
         android:id="@+id/six"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         android:text="6"/>
 
     <Button
         android:id="@+id/seven"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         android:text="7"/>
 
     <Button
         android:id="@+id/eight"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         android:text="8"/>
 
     <Button
         android:id="@+id/nine"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         android:text="9"/>
 
     <Button
         android:id="@+id/zero"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        grid:layout_rowWeight="1"
-        grid:layout_columnWeight="1"
         grid:layout_column="1"
         android:text="0"/>
 </merge>

app/src/main/res/layout/content_numpad_time_picker.xml

@@ -6,23 +6,17 @@
 
     <Button
         android:id="@+id/leftAlt"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        app:layout_rowWeight="1"
-        app:layout_columnWeight="1"
         app:layout_column="0"/>
 
     <Button
         android:id="@+id/rightAlt"
-        style="@style/grid_element_single"
+        style="@style/GridLayoutNumpadButton"
-        app:layout_rowWeight="1"
-        app:layout_columnWeight="1"
         app:layout_column="2"/>
 
     <!-- Used to properly position the FAB -->
     <FrameLayout
-        android:layout_width="0dp"
+        android:layout_height="56dp"
-        android:layout_height="wrap_content"
-        android:minHeight="@dimen/fab_cell_height"
         app:layout_columnWeight="1"
         app:layout_column="1">
 
@@ -38,8 +32,6 @@
     <ImageButton
         android:id="@+id/backspace"
         android:src="@drawable/ic_backspace_24dp"
-        android:background="?selectableItemBackground"
+        style="@style/GridLayoutNumpadElement"
-        app:layout_rowWeight="1"
-        app:layout_columnWeight="1"
         app:layout_column="2"/>
 </merge>

app/src/main/res/layout/dialog_time_picker_numpad.xml

@@ -61,6 +61,10 @@
         android:id="@+id/number_grid"
         android:layout_width="match_parent"
         android:layout_height="@dimen/numpad_height"
-        android:layout_below="@id/header"/>
+        android:layout_below="@id/header"
+        android:layout_marginTop="@dimen/bottom_sheet_vertical_space"
+        android:layout_marginStart="@dimen/bottom_sheet_edge_margin"
+        android:layout_marginEnd="@dimen/bottom_sheet_edge_margin"
+        android:layout_marginBottom="@dimen/bottom_sheet_vertical_space"/>
 
 </RelativeLayout>

app/src/main/res/values/dimens.xml

@@ -26,4 +26,8 @@
     <dimen name="scrolling_grid_height">270dp</dimen>
     <dimen name="scrollbar_width">10dp</dimen>
     <dimen name="ampm_text_size">24sp</dimen>
+
+    <!-- Bottom sheet specs -->
+    <dimen name="bottom_sheet_edge_margin">24dp</dimen>
+    <dimen name="bottom_sheet_vertical_space">16dp</dimen>
 </resources>

app/src/main/res/values/styles.xml

@@ -26,6 +26,19 @@
         <item name="android:textSize">@dimen/grid_element_text_size</item>
     </style>
 
+    <style name="GridLayoutNumpadElement">
+        <!-- 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="android:background">?android:attr/selectableItemBackground</item>
+    </style>
+
+    <style name="GridLayoutNumpadButton" parent="GridLayoutNumpadElement">
+        <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>