Fix layout of EditTimerActivity. Create landscape layout.

This commit is contained in:
Phillip Hsu 2016-09-06 18:08:02 -07:00
parent 5d5002a6d7
commit f3e01995a1
9 changed files with 300 additions and 67 deletions

View File

@ -28,7 +28,7 @@ public class EditTimerActivity extends BaseActivity {
public static final String EXTRA_LABEL = "com.philliphsu.clock2.edittimer.extra.LABEL"; public static final String EXTRA_LABEL = "com.philliphsu.clock2.edittimer.extra.LABEL";
public static final String EXTRA_START_TIMER = "com.philliphsu.clock2.edittimer.extra.START_TIMER"; public static final String EXTRA_START_TIMER = "com.philliphsu.clock2.edittimer.extra.START_TIMER";
@Bind(R.id.appbar) ViewGroup mAppBar; @Bind(R.id.edit_fields_layout) ViewGroup mEditFieldsLayout;
@Bind(R.id.label) TextView mLabel; @Bind(R.id.label) TextView mLabel;
@Bind(R.id.hour) EditText mHour; @Bind(R.id.hour) EditText mHour;
@Bind(R.id.minute) EditText mMinute; @Bind(R.id.minute) EditText mMinute;
@ -100,7 +100,7 @@ public class EditTimerActivity extends BaseActivity {
@OnClick(R.id.backspace) @OnClick(R.id.backspace)
void backspace() { void backspace() {
if (mFocusGrabber.isFocused()) { if (mFocusGrabber.isFocused()) {
mAppBar.focusSearch(mFocusGrabber, View.FOCUS_LEFT).requestFocus(); mEditFieldsLayout.focusSearch(mFocusGrabber, View.FOCUS_LEFT).requestFocus();
} }
EditText field = getFocusedField(); EditText field = getFocusedField();
if (field == null) if (field == null)
@ -167,7 +167,7 @@ public class EditTimerActivity extends BaseActivity {
} }
private EditText getFocusedField() { private EditText getFocusedField() {
return (EditText) mAppBar.findFocus(); return (EditText) mEditFieldsLayout.findFocus();
} }
// private void updateStartButtonVisibility() { // private void updateStartButtonVisibility() {

View File

@ -0,0 +1,176 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.philliphsu.clock2.edittimer.EditTimerActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:contentInsetStart="72dp">
<!--Unfortunately, we can't use a style that extends from BaseLabel
because we want the parent to be `TextAppearance.AppCompat.Title`, whereas
BaseLabel's parent is `TextAppearance.AppCompat`. We have duplicate attributes,
but this is fine since this is the only view that is styled like this.-->
<TextView
android:id="@+id/label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
style="@style/TextAppearance.AppCompat.Title"
android:hint="@string/label"
android:maxLines="1"
android:ellipsize="end"/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="?attr/colorPrimary">
<LinearLayout
android:id="@+id/edit_fields_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:theme="@style/AppTheme.AppBarOverlay"
android:layout_gravity="center"
android:layout_marginBottom="28dp">
<EditText
android:id="@+id/hour"
style="@style/TimerText.EditField"/>
<TextView
android:id="@+id/hour_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="h"
style="@style/TimerText.FieldLabel"/>
<EditText
android:id="@+id/minute"
style="@style/TimerText.EditField"/>
<TextView
android:id="@+id/minute_label"
android:text="m"
style="@style/TimerText.FieldLabel"/>
<EditText
android:id="@+id/second"
style="@style/TimerText.EditField"/>
<TextView
android:id="@+id/second_label"
android:text="s"
style="@style/TimerText.FieldLabel"/>
<View
android:id="@+id/focus_grabber"
style="@style/FocusGrabber"/> <!-- Required for right focus search -->
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_gravity="bottom|center"
style="@style/TimerFab"/>
</FrameLayout>
<!-- We don't really need the overhead of the GridLayoutNumpad,
because it would be a major hassle to adapt it for timers. -->
<!-- We're borrowing the margins for bottom sheets, since this numpad
was "borrowed" from the bottom sheet numpad anyway. -->
<android.support.v7.widget.GridLayout
android:id="@+id/numpad"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:columnCount="3">
<!--We require the buttons' heights to be weighted, so we can't
reuse the GridLayoutNumpadButton style used by the bottom
sheet numpad.-->
<Button
android:id="@+id/one"
style="@style/GridLayoutTimerNumpadButton"
android:text="1"/>
<Button
android:id="@+id/two"
style="@style/GridLayoutTimerNumpadButton"
android:text="2"/>
<Button
android:id="@+id/three"
style="@style/GridLayoutTimerNumpadButton"
android:text="3"/>
<Button
android:id="@+id/four"
style="@style/GridLayoutTimerNumpadButton"
android:text="4"/>
<Button
android:id="@+id/five"
style="@style/GridLayoutTimerNumpadButton"
android:text="5"/>
<Button
android:id="@+id/six"
style="@style/GridLayoutTimerNumpadButton"
android:text="6"/>
<Button
android:id="@+id/seven"
style="@style/GridLayoutTimerNumpadButton"
android:text="7"/>
<Button
android:id="@+id/eight"
style="@style/GridLayoutTimerNumpadButton"
android:text="8"/>
<Button
android:id="@+id/nine"
style="@style/GridLayoutTimerNumpadButton"
android:text="9"/>
<Button
android:id="@+id/zero"
style="@style/GridLayoutTimerNumpadButton"
app:layout_column="1"
android:text="0"/>
<!--GridLayoutTimerNumpadButton has text attributes.. but using it
is a simple way to get the weighted height. I'd rather not define a
new style based on GridLayoutNumpadElement just for this... -->
<ImageButton
android:id="@+id/backspace"
android:src="@drawable/ic_backspace_24dp"
style="@style/GridLayoutTimerNumpadButton"
app:layout_column="2"
android:tint="?attr/themedIconTint"/>
</android.support.v7.widget.GridLayout>
</LinearLayout>
</LinearLayout>

View File

@ -17,7 +17,7 @@
<com.philliphsu.clock2.timers.CountdownChronometer <com.philliphsu.clock2.timers.CountdownChronometer
android:id="@+id/duration" android:id="@+id/duration"
android:layout_below="@id/label" android:layout_below="@id/label"
style="@style/TimerCountdown"/> style="@style/TimerText.Countdown"/>
<!--The default style has padding start and end, so we remove both--> <!--The default style has padding start and end, so we remove both-->
<com.philliphsu.clock2.UntouchableSeekBar <com.philliphsu.clock2.UntouchableSeekBar

View File

@ -8,10 +8,10 @@
tools:context="com.philliphsu.clock2.edittimer.EditTimerActivity"> tools:context="com.philliphsu.clock2.edittimer.EditTimerActivity">
<RelativeLayout <RelativeLayout
android:id="@+id/appbar" android:id="@+id/edit_fields_layout"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:background="@color/colorPrimary" android:background="?attr/colorPrimary"
android:theme="@style/AppTheme.AppBarOverlay" android:theme="@style/AppTheme.AppBarOverlay"
android:layout_alignParentTop="true" android:layout_alignParentTop="true"
android:paddingBottom="16dp"> android:paddingBottom="16dp">
@ -24,15 +24,17 @@
app:contentInsetStart="72dp" app:contentInsetStart="72dp"
android:layout_alignParentTop="true"> android:layout_alignParentTop="true">
<!-- Set inputType to text to get single-line input --> <!--Unfortunately, we can't use a style that extends from BaseLabel
because we want the parent to be `TextAppearance.AppCompat.Title`, whereas
BaseLabel's parent is `TextAppearance.AppCompat`. We have duplicate attributes,
but this is fine since this is the only view that is styled like this.-->
<TextView <TextView
android:id="@+id/label" android:id="@+id/label"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="wrap_content"
android:background="?selectableItemBackground" android:background="?android:attr/selectableItemBackground"
style="@style/TextAppearance.AppCompat.Title" style="@style/TextAppearance.AppCompat.Title"
android:hint="Add label" android:hint="@string/label"
android:gravity="center_vertical"
android:maxLines="1" android:maxLines="1"
android:ellipsize="end"/> android:ellipsize="end"/>
@ -40,12 +42,8 @@
<EditText <EditText
android:id="@+id/hour" android:id="@+id/hour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00"
android:background="@android:color/transparent"
android:layout_below="@id/toolbar" android:layout_below="@id/toolbar"
android:textSize="45sp" style="@style/TimerText.EditField"
android:layout_marginStart="72dp"/> android:layout_marginStart="72dp"/>
<TextView <TextView
@ -53,57 +51,38 @@
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="h" android:text="h"
android:textSize="24sp"
android:layout_below="@id/toolbar" android:layout_below="@id/toolbar"
android:layout_toEndOf="@id/hour" android:layout_toEndOf="@id/hour"
android:layout_alignBaseline="@id/hour" android:layout_alignBaseline="@id/hour"
style="@style/TextAppearance.AppCompat"/> style="@style/TimerText.FieldLabel"/>
<EditText <EditText
android:id="@+id/minute" android:id="@+id/minute"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00"
android:background="@android:color/transparent"
android:layout_below="@id/toolbar" android:layout_below="@id/toolbar"
android:layout_toEndOf="@id/hour_label" android:layout_toEndOf="@id/hour_label"
android:textSize="45sp" style="@style/TimerText.EditField"/>
/>
<TextView <TextView
android:id="@+id/minute_label" android:id="@+id/minute_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="m" android:text="m"
android:textSize="24sp"
android:layout_below="@id/toolbar" android:layout_below="@id/toolbar"
android:layout_toEndOf="@id/minute" android:layout_toEndOf="@id/minute"
android:layout_alignBaseline="@id/minute" android:layout_alignBaseline="@id/minute"
style="@style/TextAppearance.AppCompat" style="@style/TimerText.FieldLabel"/>
/>
<EditText <EditText
android:id="@+id/second" android:id="@+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00"
android:background="@android:color/transparent"
android:layout_below="@id/toolbar" android:layout_below="@id/toolbar"
android:layout_toEndOf="@id/minute_label" android:layout_toEndOf="@id/minute_label"
android:textSize="45sp" style="@style/TimerText.EditField"/>
/>
<TextView <TextView
android:id="@+id/second_label" android:id="@+id/second_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="s" android:text="s"
android:textSize="24sp"
android:layout_below="@id/toolbar" android:layout_below="@id/toolbar"
android:layout_toEndOf="@id/second" android:layout_toEndOf="@id/second"
android:layout_alignBaseline="@id/minute" android:layout_alignBaseline="@id/minute"
style="@style/TextAppearance.AppCompat" style="@style/TimerText.FieldLabel"/>
/>
<View <View
android:id="@+id/focus_grabber" android:id="@+id/focus_grabber"
@ -129,31 +108,90 @@
android:layout_alignParentBottom="true" android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>--> android:layout_centerHorizontal="true"/>-->
<!-- TODO: Consider defining a style instead. Use the same attrs
as below for base API versions, and make a v21 version
that includes margin bottom of 16dp. -->
<android.support.design.widget.FloatingActionButton <android.support.design.widget.FloatingActionButton
android:id="@+id/fab" android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_half_day_1_24dp"
android:layout_centerHorizontal="true" android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"/> android:layout_alignParentBottom="true"
style="@style/TimerFab"/>
<!-- We don't really need the overhead of the GridLayoutNumpad, <!-- We don't really need the overhead of the GridLayoutNumpad,
because it would be a major hassle to adapt it for timers. --> because it would be a major hassle to adapt it for timers. -->
<!-- We're borrowing the margins for bottom sheets, since this numpad
was "borrowed" from the bottom sheet numpad anyway. -->
<android.support.v7.widget.GridLayout <android.support.v7.widget.GridLayout
android:id="@+id/numpad" android:id="@+id/numpad"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:layout_below="@id/appbar" android:layout_below="@id/edit_fields_layout"
android:layout_above="@id/fab" android:layout_above="@id/fab"
android:layout_marginTop="16dp" android:layout_marginTop="@dimen/bottom_sheet_vertical_space"
android:layout_marginStart="24dp" android:layout_marginStart="@dimen/bottom_sheet_edge_margin"
android:layout_marginEnd="24dp" android:layout_marginEnd="@dimen/bottom_sheet_edge_margin"
app:columnCount="3"> app:columnCount="3">
<include layout="@layout/content_numpad_timer"/> <!--We require the buttons' heights to be weighted, so we can't
reuse the GridLayoutNumpadButton style used by the bottom
sheet numpad.-->
<Button
android:id="@+id/one"
style="@style/GridLayoutTimerNumpadButton"
android:text="1"/>
<Button
android:id="@+id/two"
style="@style/GridLayoutTimerNumpadButton"
android:text="2"/>
<Button
android:id="@+id/three"
style="@style/GridLayoutTimerNumpadButton"
android:text="3"/>
<Button
android:id="@+id/four"
style="@style/GridLayoutTimerNumpadButton"
android:text="4"/>
<Button
android:id="@+id/five"
style="@style/GridLayoutTimerNumpadButton"
android:text="5"/>
<Button
android:id="@+id/six"
style="@style/GridLayoutTimerNumpadButton"
android:text="6"/>
<Button
android:id="@+id/seven"
style="@style/GridLayoutTimerNumpadButton"
android:text="7"/>
<Button
android:id="@+id/eight"
style="@style/GridLayoutTimerNumpadButton"
android:text="8"/>
<Button
android:id="@+id/nine"
style="@style/GridLayoutTimerNumpadButton"
android:text="9"/>
<Button
android:id="@+id/zero"
style="@style/GridLayoutTimerNumpadButton"
app:layout_column="1"
android:text="0"/>
<!--GridLayoutTimerNumpadButton has text attributes.. but using it
is a simple way to get the weighted height. I'd rather not define a
new style based on GridLayoutNumpadElement just for this... -->
<ImageButton
android:id="@+id/backspace"
android:src="@drawable/ic_backspace_24dp"
style="@style/GridLayoutTimerNumpadButton"
app:layout_column="2"
android:tint="?attr/themedIconTint"/>
</android.support.v7.widget.GridLayout> </android.support.v7.widget.GridLayout>

View File

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:grid="http://schemas.android.com/apk/res-auto">
<include layout="@layout/content_grid_layout_numpad"/>
<ImageButton
android:id="@+id/backspace"
android:src="@drawable/ic_backspace_24dp"
style="@style/GridLayoutNumpadElement"
grid:layout_column="2"/>
</merge>

View File

@ -18,7 +18,7 @@
<com.philliphsu.clock2.timers.CountdownChronometer <com.philliphsu.clock2.timers.CountdownChronometer
android:id="@+id/duration" android:id="@+id/duration"
android:layout_below="@id/label" android:layout_below="@id/label"
style="@style/TimerCountdown"/> style="@style/TimerText.Countdown"/>
<!--The default style has padding start and end, so we remove both--> <!--The default style has padding start and end, so we remove both-->
<com.philliphsu.clock2.UntouchableSeekBar <com.philliphsu.clock2.UntouchableSeekBar

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="TimerFab" parent="BaseTimerFab">
<item name="android:layout_marginBottom">@dimen/fab_margin</item>
</style>
</resources>

View File

@ -64,6 +64,9 @@
<dimen name="expanded_alarm_elevation">2dp</dimen> <!--TODO: Increase for v21--> <dimen name="expanded_alarm_elevation">2dp</dimen> <!--TODO: Increase for v21-->
<dimen name="label_height">48dp</dimen> <dimen name="label_height">48dp</dimen>
<!--EditTimerActivity-->
<dimen name="field_end_margin">8dp</dimen>
<dimen name="text_size_body_1">14sp</dimen> <dimen name="text_size_body_1">14sp</dimen>
<dimen name="text_size_body_2">14sp</dimen> <dimen name="text_size_body_2">14sp</dimen>
<dimen name="text_size_button">14sp</dimen> <dimen name="text_size_button">14sp</dimen>

View File

@ -4,13 +4,24 @@
<item name="android:layout_centerHorizontal">true</item> <item name="android:layout_centerHorizontal">true</item>
<item name="android:padding">@dimen/cardview_margin</item> <item name="android:padding">@dimen/cardview_margin</item>
</style> </style>
<style name="TimerCountdown" parent="TextAppearance.AppCompat"> <style name="TimerText" parent="TextAppearance.AppCompat">
<item name="android:layout_width">wrap_content</item> <item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item> <item name="android:layout_height">wrap_content</item>
<item name="android:fontFamily">sans-serif-light</item> <item name="android:fontFamily">sans-serif-light</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:textSize">@dimen/text_size_display_2</item> <item name="android:textSize">@dimen/text_size_display_2</item>
</style> </style>
<style name="TimerText.Countdown">
<item name="android:layout_centerHorizontal">true</item>
</style>
<style name="TimerText.EditField">
<item name="android:text">00</item>
<item name="android:textSize">@dimen/text_size_display_3</item>
<item name="android:background">@android:color/transparent</item>
</style>
<style name="TimerText.FieldLabel">
<item name="android:textSize">@dimen/text_size_medium</item>
<item name="android:layout_marginEnd">@dimen/field_end_margin</item>
</style>
<style name="TimerSeekBar" parent="BaseSeekBar"> <style name="TimerSeekBar" parent="BaseSeekBar">
<item name="android:splitTrack">false</item> <!--TODO: Move to v21?--> <item name="android:splitTrack">false</item> <!--TODO: Move to v21?-->
</style> </style>
@ -33,4 +44,15 @@
<item name="android:textColor">?attr/themedIconTint</item> <item name="android:textColor">?attr/themedIconTint</item>
<item name="android:textStyle">bold</item> <item name="android:textStyle">bold</item>
</style> </style>
<!--Style for the FAB in EditTimerActivity-->
<style name="BaseTimerFab">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:src">@drawable/ic_start_24dp</item>
</style>
<style name="TimerFab" parent="BaseTimerFab"/>
<style name="GridLayoutTimerNumpadButton" parent="GridLayoutNumpadButton">
<item name="android:layout_height">0dp</item>
<item name="layout_rowWeight">1</item>
</style>
</resources> </resources>