Appearance changes to NumberGridTimePickerDialog

This commit is contained in:
Phillip Hsu
2016-08-20 04:05:09 -07:00
parent abd1551bc3
commit a473f3fd2c
24 changed files with 964 additions and 446 deletions
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<!-- TODO: Define styles -->
<TextView
android:id="@+id/primary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-condensed-light"
android:textSize="@dimen/number_grid_24_hour_item_primary_text_size"
android:includeFontPadding="false"
style="@style/TextAppearance.AppCompat"/>
<TextView
android:id="@+id/secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="false"/>
</merge>
@@ -7,12 +7,15 @@
android:id="@+id/primary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/colorPrimary"
android:textSize="@dimen/grid_element_text_size"/>
android:fontFamily="sans-serif-light"
android:textSize="@dimen/number_grid_24_hour_item_primary_text_size"
android:includeFontPadding="false"
style="@style/TextAppearance.AppCompat"/>
<TextView
android:id="@+id/secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
android:layout_height="wrap_content"
android:includeFontPadding="false"/>
</merge>
@@ -1,15 +1,53 @@
<?xml version="1.0" encoding="utf-8"?>
<merge>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<include layout="@layout/item_24h_number_grid"/>
<merge xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- Although the style defines a textSize attribute, it will not be
applied because this is just a LinearLayout. -->
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="00"
app:secondaryText="12"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="01"
app:secondaryText="13"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="02"
app:secondaryText="14"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="03"
app:secondaryText="15"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="04"
app:secondaryText="16"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="05"
app:secondaryText="17"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="06"
app:secondaryText="18"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="07"
app:secondaryText="19"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="08"
app:secondaryText="20"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="09"
app:secondaryText="21"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="10"
app:secondaryText="22"/>
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/NumberGridButton.Hour"
app:primaryText="11"
app:secondaryText="23"/>
</merge>
@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<TextView style="@style/NumberGridButton.Hour"
android:text="1"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="2"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="3"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="4"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="5"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="6"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="7"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="8"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="9"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="10"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="11"/>
<TextView style="@style/NumberGridButton.Hour"
android:text="12"/>
</merge>
@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView style="@style/NumberGridButton.Minute"
android:text="00"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="05"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="10"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="15"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="20"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="25"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="30"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="35"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="40"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="45"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="50"/>
<TextView style="@style/NumberGridButton.Minute"
android:text="55"/>
<ImageButton
style="@style/NumberGridButton.Minute"
android:src="@drawable/ic_minus_circle_24dp"
app:layout_column="0"/>
<ImageButton
style="@style/NumberGridButton.Minute"
android:src="@drawable/ic_add_circle_24dp"
app:layout_column="2"/>
</merge>
@@ -1,15 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<merge>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
<include layout="@layout/item_number_grid"/>
</merge>
@@ -1,13 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- TODO: Use fixed width and height -->
<ImageButton
style="@style/GridLayoutNumpadElement"
android:src="@drawable/ic_minus_circle_24dp"
app:layout_column="0"/>
<ImageButton
style="@style/GridLayoutNumpadElement"
android:src="@drawable/ic_add_circle_24dp"
app:layout_column="2"/>
</merge>
@@ -23,24 +23,24 @@
android:layout_gravity="center" />
</FrameLayout>
<android.support.v7.widget.GridLayout
android:id="@+id/grid_layout"
<com.philliphsu.clock2.editalarm.GridSelectorLayout
android:id="@+id/time_picker"
android:layout_width="match_parent"
android:layout_height="@dimen/numpad_height"
android:layout_height="@dimen/number_grid_height"
android:layout_below="@id/time_display_background"
app:columnCount="3"
android:layout_marginStart="@dimen/bottom_sheet_edge_margin"
android:layout_marginEnd="@dimen/bottom_sheet_edge_margin"
android:paddingStart="@dimen/bottom_sheet_edge_margin"
android:paddingEnd="@dimen/bottom_sheet_edge_margin"
android:paddingBottom="@dimen/anchored_fab_vertical_space"/>
<View
android:id="@+id/divider"
style="@style/Divider.Horizontal"
android:layout_below="@id/grid_layout"/>
android:layout_below="@id/time_picker"/>
<LinearLayout
android:id="@+id/half_day_toggles"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_height="@dimen/half_day_button_bar_height"
android:layout_below="@id/divider"
android:orientation="horizontal">
@@ -56,8 +56,7 @@
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
style="@style/TextAppearance.AppCompat.Button"
android:textSize="@dimen/half_day_text_size"/>
style="@style/TextAppearance.AppCompat.Button"/>
</FrameLayout>
@@ -73,8 +72,7 @@
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
style="@style/TextAppearance.AppCompat.Button"
android:textSize="@dimen/half_day_text_size"/>
style="@style/TextAppearance.AppCompat.Button"/>
</FrameLayout>
@@ -82,6 +80,8 @@
</RelativeLayout>
<!-- app:borderWidth="0dp"
Remove the stroke that is otherwise visible when long pressed -->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
@@ -1,9 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- TODO: Define a grid item style with the first 3 attrs-->
<com.philliphsu.clock2.editalarm.TwentyFourHourGridItem
style="@style/GridLayoutNumpadElement"/>
</merge>
@@ -1,10 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- TODO: Use a fixed height so the circular indicator doesn't stretch into an oval. -->
<!-- Or measure the text dimensions and use the larger of its width and height, plus some
small integer extra, and use that as the diameter of the circle indicator. -->
<TextView style="@style/GridLayoutNumpadButton"/>
</merge>
+2 -1
View File
@@ -1,7 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 4 x (numeric_keypad_cell_height) + 56dp FAB height + 16dp FAB bottom margin -->
<!-- 4 * (numeric_keypad_cell_height) + 56dp FAB height + 16dp FAB bottom margin -->
<dimen name="numeric_keypad_height">328dp</dimen>
<dimen name="numeric_keypad_backspace_height">56dp</dimen> <!-- Same as FAB height -->
<dimen name="numeric_keypad_fab_bottom_margin">16dp</dimen>
</resources>
@@ -38,15 +38,13 @@
<!-- Colors for red theme -->
<color name="red">#ff3333</color>
<color name="red_focused">#853333</color>
<color name="light_gray">#404040</color>
<color name="dark_gray">#363636</color>
<color name="light_gray">#424242</color> <!--Grey 800. Originally #404040-->
<color name="dark_gray">#212121</color> <!--Grey 900. Originally #363636-->
<color name="line_dark">#808080</color>
<color name="done_text_color_dark_normal">#ffffff</color>
<color name="done_text_color_dark_disabled">#888888</color>
<color name="done_disabled_dark">#bfbfbf</color>
<!-- My stuff -->
<color name="accent_color">#009688</color>
<color name="accent_color_focused">#76ffffff</color>
<color name="accent_color_dark">#00796b</color>
<!--My stuff-->
<color name="unselected_color">#a2ffffff</color><!--63%-64% white-->
</resources>
+1 -1
View File
@@ -2,7 +2,7 @@
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="colorAccent">#FF4081</color> <!--Alternatives: Red 700 #D32F2F-->
<color name="black_overlay">#66000000</color>
</resources>
+9 -1
View File
@@ -20,10 +20,18 @@
<dimen name="numpad_height">300dp</dimen> <!-- TODO: Deprecated -->
<dimen name="numeric_keypad_cell_height">64dp</dimen>
<dimen name="numeric_keypad_output_box_height">80dp</dimen>
<dimen name="numeric_keypad_height">344dp</dimen> <!-- 4 x (numeric_keypad_cell_height) + 88dp pre-21 FAB height -->
<dimen name="numeric_keypad_height">344dp</dimen> <!-- 4 * (numeric_keypad_cell_height) + 88dp pre-21 FAB height -->
<dimen name="numeric_keypad_backspace_height">88dp</dimen> <!-- Same as pre-21 FAB height -->
<dimen name="numeric_keypad_fab_bottom_margin">0dp</dimen> <!-- 88dp height already big enough -->
<!-- NumberGridTimePickerDialog -->
<dimen name="number_grid_height">308dp</dimen> <!-- 5 * (number_grid_minute_cell_height) + half-FAB height bottom padding -->
<dimen name="number_grid_hour_cell_height">70dp</dimen> <!-- 4 * 70 + 28 = 308 -->
<dimen name="number_grid_minute_cell_height">56dp</dimen>
<dimen name="half_day_button_bar_height">48dp</dimen>
<dimen name="number_grid_24_hour_item_primary_text_size">30sp</dimen>
<dimen name="number_grid_minute_text_size">28sp</dimen>
<!-- Bottom sheet specs -->
<dimen name="bottom_sheet_edge_margin">24dp</dimen>
<dimen name="bottom_sheet_vertical_space">16dp</dimen>
+18
View File
@@ -47,6 +47,24 @@
<item name="android:fontFamily">sans-serif-light</item>
</style>
<style name="NumberGridButton" parent="GridLayoutNumpadButton">
<!-- This should give us 87% black. By default, TextView has a grayish text color.
The reason GridLayoutNumpadButton style used in the NumpadTimerPickerDialog is 87% black
already is because the numpad's buttons are actually of type Button. For whatever reason,
I decided to make the buttons for the NumbersGrid of type TextView... -->
<item name="android:textColor">?android:attr/textColorPrimary</item>
</style>
<style name="NumberGridButton.Hour">
<item name="android:layout_height">@dimen/number_grid_hour_cell_height</item>
</style>
<style name="NumberGridButton.Minute">
<!-- Lowered text size, otherwise it looks weird that the minute grid, with 5 rows
of buttons, has the same text size as the hours grid, with 4 rows of buttons; they look
too big, and the space between them is smaller. -->
<item name="android:textSize">@dimen/number_grid_minute_text_size</item>
<item name="android:layout_height">@dimen/number_grid_minute_cell_height</item>
</style>
<!-- TODO: Replace and Delete -->
<style name="hybrid_time_picker_grid_element">
<item name="android:layout_width">@dimen/grid_element_touch_target</item>