Skip to content

Commit 3e7d5f0

Browse files
samtsternsamtstern
authored
Make layouts better on small screens (#706)
1 parent 3adb14a commit 3e7d5f0

File tree

6 files changed

+118
-86
lines changed

6 files changed

+118
-86
lines changed

‎auth/src/main/res/layout/forgot_password_layout.xml‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,47 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<RelativeLayout
2+
<ScrollView
33
xmlns:android="http://schemas.android.com/apk/res/android"
4-
style="@style/FirebaseUI.WrapperStyle"
5-
android:orientation="vertical">
4+
xmlns:app="http://schemas.android.com/apk/res-auto"
5+
xmlns:tools="http://schemas.android.com/tools"
6+
android:layout_width="match_parent"
7+
android:layout_height="match_parent">
68

7-
<TextView
8-
android:id="@+id/body_text"
9-
style="@style/FirebaseUI.Text.BodyText"
10-
android:text="@string/password_recovery_body"/>
9+
<LinearLayout
10+
style="@style/FirebaseUI.WrapperStyle"
11+
android:orientation="vertical">
1112

12-
<android.support.design.widget.TextInputLayout
13-
android:id="@+id/email_layout"
14-
style="@style/FirebaseUI.TextInputLayout.EmailField"
15-
android:layout_width="match_parent"
16-
android:layout_height="wrap_content"
17-
android:layout_below="@+id/body_text"
18-
android:paddingTop="16dp">
13+
<TextView
14+
style="@style/FirebaseUI.Text.BodyText"
15+
android:text="@string/password_recovery_body"/>
1916

20-
<android.support.design.widget.TextInputEditText
21-
android:id="@+id/email"
22-
style="@style/FirebaseUI.TextInputEditText.EmailField"/>
17+
<android.support.design.widget.TextInputLayout
18+
android:id="@+id/email_layout"
19+
style="@style/FirebaseUI.TextInputLayout.EmailField"
20+
android:layout_width="match_parent"
21+
android:layout_height="wrap_content"
22+
android:paddingTop="16dp"
23+
app:errorEnabled="true">
2324

24-
</android.support.design.widget.TextInputLayout>
25+
<android.support.design.widget.TextInputEditText
26+
android:id="@+id/email"
27+
style="@style/FirebaseUI.TextInputEditText.EmailField"/>
2528

26-
<LinearLayout
27-
android:layout_width="match_parent"
28-
android:layout_height="wrap_content"
29-
android:paddingTop="194dp"
30-
android:gravity="end">
29+
</android.support.design.widget.TextInputLayout>
30+
31+
<LinearLayout
32+
android:layout_width="match_parent"
33+
android:layout_height="wrap_content"
34+
android:gravity="right"
35+
android:layout_marginTop="@dimen/submit_button_margin_top"
36+
tools:ignore="RtlHardcoded">
37+
38+
<Button
39+
android:id="@+id/button_done"
40+
style="@style/FirebaseUI.Button"
41+
android:text="@string/button_text_send"/>
3142

32-
<Button
33-
android:id="@+id/button_done"
34-
style="@style/FirebaseUI.Button"
35-
android:text="@string/button_text_send"/>
43+
</LinearLayout>
3644

3745
</LinearLayout>
3846

39-
</RelativeLayout>
47+
</ScrollView>

‎auth/src/main/res/layout/register_email_layout.xml‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
android:layout_width="match_parent"
77
android:layout_height="match_parent">
88

9-
<RelativeLayout
9+
<LinearLayout
1010
style="@style/FirebaseUI.WrapperStyle"
1111
android:layout_width="match_parent"
12-
android:layout_height="wrap_content">
12+
android:layout_height="wrap_content"
13+
android:orientation="vertical">
1314

1415
<!--
1516
Since the TextInputLayouts change size based on whether or not an error
@@ -23,6 +24,7 @@
2324
android:paddingTop="16dp"
2425
android:transitionGroup="true"
2526
android:transitionName="email_field"
27+
app:errorEnabled="true"
2628
tools:ignore="UnusedAttribute">
2729

2830
<android.support.design.widget.TextInputEditText
@@ -36,8 +38,9 @@
3638
style="@style/Widget.Design.TextInputLayout"
3739
android:layout_width="match_parent"
3840
android:layout_height="wrap_content"
39-
android:paddingTop="112dp"
40-
android:hint="@string/name_hint">
41+
android:hint="@string/name_hint"
42+
android:paddingTop="@dimen/field_padding_vert"
43+
app:errorEnabled="true">
4144

4245
<android.support.design.widget.TextInputEditText
4346
android:id="@+id/name"
@@ -52,7 +55,8 @@
5255
style="@style/FirebaseUI.TextInputLayout.PasswordField"
5356
android:layout_width="match_parent"
5457
android:layout_height="wrap_content"
55-
android:paddingTop="224dp"
58+
android:paddingTop="@dimen/field_padding_vert"
59+
app:errorEnabled="true"
5660
app:passwordToggleEnabled="true">
5761

5862
<android.support.design.widget.TextInputEditText
@@ -66,18 +70,17 @@
6670
style="@style/FirebaseUI.Text.BodyText"
6771
android:layout_width="match_parent"
6872
android:layout_height="wrap_content"
69-
android:layout_marginTop="336dp"
70-
android:textIsSelectable="false"/>
71-
73+
android:layout_marginTop="@dimen/field_padding_vert"
74+
android:textIsSelectable="false"
75+
tools:text="@string/create_account_preamble"/>
7276

7377
<Button
7478
android:id="@+id/button_create"
7579
style="@style/FirebaseUI.Button"
76-
android:layout_alignParentEnd="true"
77-
android:layout_alignParentRight="true"
78-
android:layout_below="@id/create_account_text"
79-
android:text="@string/button_text_save"/>
80+
android:layout_gravity="right"
81+
android:text="@string/button_text_save"
82+
tools:ignore="RtlHardcoded"/>
8083

81-
</RelativeLayout>
84+
</LinearLayout>
8285

8386
</ScrollView>

‎auth/src/main/res/layout/welcome_back_password_prompt_layout.xml‎

Lines changed: 50 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,73 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<LinearLayout
2+
<ScrollView
33
xmlns:android="http://schemas.android.com/apk/res/android"
44
xmlns:app="http://schemas.android.com/apk/res-auto"
5-
style="@style/FirebaseUI.WrapperStyle"
5+
xmlns:tools="http://schemas.android.com/tools"
66
android:layout_width="match_parent"
77
android:layout_height="match_parent"
88
android:orientation="vertical">
99

10-
<TextView
11-
android:id="@+id/welcome_back_email_header"
12-
style="@style/FirebaseUI.Text.Heading"
13-
android:layout_width="match_parent"
14-
android:layout_height="wrap_content"
15-
android:text="@string/welcome_back_email_header"/>
16-
17-
<TextView
18-
android:id="@+id/welcome_back_password_body"
19-
style="@style/FirebaseUI.Text.BodyText"
10+
<LinearLayout
11+
style="@style/FirebaseUI.WrapperStyle"
2012
android:layout_width="match_parent"
2113
android:layout_height="wrap_content"
22-
android:textIsSelectable="false"/>
14+
android:orientation="vertical">
2315

24-
<RelativeLayout
25-
android:layout_width="match_parent"
26-
android:layout_height="wrap_content">
16+
<TextView
17+
android:id="@+id/welcome_back_email_header"
18+
style="@style/FirebaseUI.Text.Heading"
19+
android:layout_width="match_parent"
20+
android:layout_height="wrap_content"
21+
android:text="@string/welcome_back_email_header"/>
2722

28-
<android.support.design.widget.TextInputLayout
29-
android:id="@+id/password_layout"
30-
style="@style/FirebaseUI.TextInputLayout.PasswordField"
23+
<TextView
24+
android:id="@+id/welcome_back_password_body"
25+
style="@style/FirebaseUI.Text.BodyText"
3126
android:layout_width="match_parent"
3227
android:layout_height="wrap_content"
33-
android:paddingTop="16dp"
34-
app:passwordToggleEnabled="true">
28+
android:textIsSelectable="false"
29+
tools:text="@string/welcome_back_password_prompt_body"/>
3530

36-
<android.support.design.widget.TextInputEditText
37-
android:id="@+id/password"
38-
style="@style/FirebaseUI.TextInputEditText.PasswordField"/>
31+
<RelativeLayout
32+
android:layout_width="match_parent"
33+
android:layout_height="wrap_content">
3934

40-
</android.support.design.widget.TextInputLayout>
35+
<android.support.design.widget.TextInputLayout
36+
android:id="@+id/password_layout"
37+
style="@style/FirebaseUI.TextInputLayout.PasswordField"
38+
android:layout_width="match_parent"
39+
android:layout_height="wrap_content"
40+
android:paddingTop="16dp"
41+
app:passwordToggleEnabled="true">
4142

42-
</RelativeLayout>
43+
<android.support.design.widget.TextInputEditText
44+
android:id="@+id/password"
45+
style="@style/FirebaseUI.TextInputEditText.PasswordField"/>
4346

44-
<LinearLayout
45-
android:layout_width="match_parent"
46-
android:layout_height="wrap_content"
47-
android:paddingTop="16dp">
47+
</android.support.design.widget.TextInputLayout>
4848

49-
<TextView
50-
android:id="@+id/trouble_signing_in"
51-
style="@style/FirebaseUI.Text.Link"
52-
android:layout_width="0dp"
49+
</RelativeLayout>
50+
51+
<LinearLayout
52+
android:layout_width="match_parent"
5353
android:layout_height="wrap_content"
54-
android:layout_weight="1"
55-
android:text="@string/trouble_signing_in"/>
54+
android:paddingTop="16dp">
55+
56+
<TextView
57+
android:id="@+id/trouble_signing_in"
58+
style="@style/FirebaseUI.Text.Link"
59+
android:layout_width="0dp"
60+
android:layout_height="wrap_content"
61+
android:layout_weight="1"
62+
android:text="@string/trouble_signing_in"/>
63+
64+
<Button
65+
android:id="@+id/button_done"
66+
style="@style/FirebaseUI.Button"
67+
android:text="@string/sign_in_default"/>
5668

57-
<Button
58-
android:id="@+id/button_done"
59-
style="@style/FirebaseUI.Button"
60-
android:text="@string/sign_in_default"/>
69+
</LinearLayout>
6170

6271
</LinearLayout>
6372

64-
</LinearLayout>
73+
</ScrollView>

‎auth/src/main/res/values-sw360dp/dimens.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,10 @@
33
<dimen name="auth_method_button_width">228dp</dimen>
44
<dimen name="auth_method_button_marginBottom">24dp</dimen>
55
<dimen name="auth_method_button_drawablePadding">20dp</dimen>
6+
7+
<dimen name="body_padding_bottom">16dp</dimen>
8+
<dimen name="heading_padding_bottom">16dp</dimen>
9+
<dimen name="wrapper_padding_horiz">24dp</dimen>
10+
<dimen name="field_padding_vert">24dp</dimen>
11+
<dimen name="submit_button_margin_top">32dp</dimen>
612
</resources>

‎auth/src/main/res/values/dimens.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,10 @@
33
<dimen name="auth_method_button_width">208dp</dimen>
44
<dimen name="auth_method_button_marginBottom">8dp</dimen>
55
<dimen name="auth_method_button_drawablePadding">12dp</dimen>
6+
7+
<dimen name="body_padding_bottom">12dp</dimen>
8+
<dimen name="heading_padding_bottom">12dp</dimen>
9+
<dimen name="wrapper_padding_horiz">16dp</dimen>
10+
<dimen name="field_padding_vert">16dp</dimen>
11+
<dimen name="submit_button_margin_top">24dp</dimen>
612
</resources>

‎auth/src/main/res/values/styles.xml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
<item name="android:layout_height">match_parent</item>
2222
<item name="android:layout_width">match_parent</item>
2323
<item name="android:paddingTop">16dp</item>
24-
<item name="android:paddingLeft">24dp</item>
25-
<item name="android:paddingRight">24dp</item>
24+
<item name="android:paddingLeft">@dimen/wrapper_padding_horiz</item>
25+
<item name="android:paddingRight">@dimen/wrapper_padding_horiz</item>
2626
</style>
2727

2828
<style name="FirebaseUI.Text">
@@ -127,13 +127,13 @@
127127

128128
<style name="FirebaseUI.Text.Heading" parent="FirebaseUI.Text.T07">
129129
<item name="android:paddingTop">0dp</item>
130-
<item name="android:paddingBottom">16dp</item>
130+
<item name="android:paddingBottom">@dimen/heading_padding_bottom</item>
131131
</style>
132132

133133
<style name="FirebaseUI.Text.BodyText" parent="FirebaseUI.Text.T08">
134134
<item name="android:layout_width">match_parent</item>
135135
<item name="android:layout_height">wrap_content</item>
136-
<item name="android:paddingBottom">16dp</item>
136+
<item name="android:paddingBottom">@dimen/body_padding_bottom</item>
137137
</style>
138138

139139
<!-- Authentication method picker styles -->

0 commit comments

Comments
 (0)