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_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.hour) EditText mHour;
@Bind(R.id.minute) EditText mMinute;
@ -100,7 +100,7 @@ public class EditTimerActivity extends BaseActivity {
@OnClick(R.id.backspace)
void backspace() {
if (mFocusGrabber.isFocused()) {
mAppBar.focusSearch(mFocusGrabber, View.FOCUS_LEFT).requestFocus();
mEditFieldsLayout.focusSearch(mFocusGrabber, View.FOCUS_LEFT).requestFocus();
}
EditText field = getFocusedField();
if (field == null)
@ -167,7 +167,7 @@ public class EditTimerActivity extends BaseActivity {
}
private EditText getFocusedField() {
return (EditText) mAppBar.findFocus();
return (EditText) mEditFieldsLayout.findFocus();
}
// 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
android:id="@+id/duration"
android:layout_below="@id/label"
style="@style/TimerCountdown"/>
style="@style/TimerText.Countdown"/>
<!--The default style has padding start and end, so we remove both-->
<com.philliphsu.clock2.UntouchableSeekBar

View File

@ -8,10 +8,10 @@
tools:context="com.philliphsu.clock2.edittimer.EditTimerActivity">
<RelativeLayout
android:id="@+id/appbar"
android:id="@+id/edit_fields_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:background="?attr/colorPrimary"
android:theme="@style/AppTheme.AppBarOverlay"
android:layout_alignParentTop="true"
android:paddingBottom="16dp">
@ -24,15 +24,17 @@
app:contentInsetStart="72dp"
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
android:id="@+id/label"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?selectableItemBackground"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
style="@style/TextAppearance.AppCompat.Title"
android:hint="Add label"
android:gravity="center_vertical"
android:hint="@string/label"
android:maxLines="1"
android:ellipsize="end"/>
@ -40,12 +42,8 @@
<EditText
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:textSize="45sp"
style="@style/TimerText.EditField"
android:layout_marginStart="72dp"/>
<TextView
@ -53,57 +51,38 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="h"
android:textSize="24sp"
android:layout_below="@id/toolbar"
android:layout_toEndOf="@id/hour"
android:layout_alignBaseline="@id/hour"
style="@style/TextAppearance.AppCompat"/>
style="@style/TimerText.FieldLabel"/>
<EditText
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_toEndOf="@id/hour_label"
android:textSize="45sp"
/>
style="@style/TimerText.EditField"/>
<TextView
android:id="@+id/minute_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="m"
android:textSize="24sp"
android:layout_below="@id/toolbar"
android:layout_toEndOf="@id/minute"
android:layout_alignBaseline="@id/minute"
style="@style/TextAppearance.AppCompat"
/>
style="@style/TimerText.FieldLabel"/>
<EditText
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_toEndOf="@id/minute_label"
android:textSize="45sp"
/>
style="@style/TimerText.EditField"/>
<TextView
android:id="@+id/second_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="s"
android:textSize="24sp"
android:layout_below="@id/toolbar"
android:layout_toEndOf="@id/second"
android:layout_alignBaseline="@id/minute"
style="@style/TextAppearance.AppCompat"
/>
style="@style/TimerText.FieldLabel"/>
<View
android:id="@+id/focus_grabber"
@ -129,31 +108,90 @@
android:layout_alignParentBottom="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: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_alignParentBottom="true"/>
android:layout_alignParentBottom="true"
style="@style/TimerFab"/>
<!-- 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="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_marginTop="16dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_marginTop="@dimen/bottom_sheet_vertical_space"
android:layout_marginStart="@dimen/bottom_sheet_edge_margin"
android:layout_marginEnd="@dimen/bottom_sheet_edge_margin"
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>

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
android:id="@+id/duration"
android:layout_below="@id/label"
style="@style/TimerCountdown"/>
style="@style/TimerText.Countdown"/>
<!--The default style has padding start and end, so we remove both-->
<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="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_2">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:padding">@dimen/cardview_margin</item>
</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_height">wrap_content</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>
</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">
<item name="android:splitTrack">false</item> <!--TODO: Move to v21?-->
</style>
@ -33,4 +44,15 @@
<item name="android:textColor">?attr/themedIconTint</item>
<item name="android:textStyle">bold</item>
</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>