Commit b199e9bc authored by Wenyu Fu's avatar Wenyu Fu Committed by Commit Bot

[CCTToSFRE] Rearrage views on FRE Welcome page

1. Move the baseline of the title at the center of the screen;
2. Increase the margin around bottom button group, and made adjust to
small screen devices;
3. Center the ToS and UMA components between the title and accept button

Bug: 1120842
Change-Id: Ie6ab2f4322d1ffd2e2614987424c636604797c61
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2391268Reviewed-by: default avatarSky Malice <skym@chromium.org>
Reviewed-by: default avatarTheresa  <twellington@chromium.org>
Commit-Queue: Wenyu Fu <wenyufu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805459}
parent 3adca7d6
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="@dimen/fre_image_height" android:layout_height="@dimen/fre_image_height"
android:layout_marginHorizontal="@dimen/fre_vertical_spacing" android:layout_marginHorizontal="@dimen/fre_vertical_spacing"
android:layout_marginBottom="@dimen/fre_vertical_spacing" android:layout_marginBottom="@dimen/fre_image_bottom_margin"
android:importantForAccessibility="no" android:importantForAccessibility="no"
android:src="@drawable/fre_product_logo" /> android:src="@drawable/fre_product_logo" />
...@@ -61,14 +61,14 @@ ...@@ -61,14 +61,14 @@
android:layout_weight="1" android:layout_weight="1"
android:layout_marginTop="@dimen/fre_vertical_spacing" android:layout_marginTop="@dimen/fre_vertical_spacing"
android:layout_marginEnd="@dimen/fre_content_margin" android:layout_marginEnd="@dimen/fre_content_margin"
android:gravity="bottom" android:gravity="center_vertical"
android:orientation="vertical" > android:orientation="vertical" >
<org.chromium.ui.widget.TextViewWithClickableSpans <org.chromium.ui.widget.TextViewWithClickableSpans
android:id="@+id/tos_and_privacy" android:id="@+id/tos_and_privacy"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/fre_vertical_spacing" android:layout_marginBottom="@dimen/fre_tos_bottom_margin"
android:lineSpacingMultiplier="1.4" android:lineSpacingMultiplier="1.4"
android:textAppearance="@style/TextAppearance.TextMedium.Primary" /> android:textAppearance="@style/TextAppearance.TextMedium.Primary" />
...@@ -84,7 +84,6 @@ ...@@ -84,7 +84,6 @@
</LinearLayout> </LinearLayout>
</ScrollView> </ScrollView>
<!-- fre_button_bar_height = 62dp = layout_height + layout_marginVertical * 2 -->
<ImageView <ImageView
android:id="@+id/shadow" android:id="@+id/shadow"
android:layout_width="match_parent" android:layout_width="match_parent"
...@@ -107,22 +106,21 @@ ...@@ -107,22 +106,21 @@
android:id="@+id/terms_accept" android:id="@+id/terms_accept"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="@dimen/fre_bottom_vertical_margin" android:layout_marginVertical="@dimen/fre_button_vertical_margin"
android:layout_marginBottom="@dimen/fre_bottom_vertical_margin"
android:layout_gravity="bottom|center_horizontal" android:layout_gravity="bottom|center_horizontal"
android:paddingStart="@dimen/fre_button_padding" android:paddingStart="@dimen/fre_button_padding"
android:paddingEnd="@dimen/fre_button_padding" android:paddingEnd="@dimen/fre_button_padding"
android:text="@string/fre_accept_continue" android:text="@string/fre_accept_continue"
style="@style/FilledButton.Flat" /> style="@style/FilledButton.Flat" />
<!-- Same location as the button; marginButtom is adjusted for the different size. --> <!-- Same location as the button; marginBottom is adjusted for the different size. -->
<ProgressBar <ProgressBar
android:id="@+id/progress_spinner" android:id="@+id/progress_spinner"
style="@style/Widget.AppCompat.ProgressBar" style="@style/Widget.AppCompat.ProgressBar"
android:layout_marginBottom="22dp" android:layout_marginBottom="@dimen/fre_bottom_loading_spinner_margin"
android:layout_gravity="bottom|center_horizontal" android:layout_gravity="bottom|center_horizontal"
android:layout_width="24dp" android:layout_width="@dimen/fre_bottom_loading_spinner_size"
android:layout_height="24dp" /> android:layout_height="@dimen/fre_bottom_loading_spinner_size"/>
</FrameLayout> </FrameLayout>
<!-- Place holder for privacy disclosure. --> <!-- Place holder for privacy disclosure. -->
......
...@@ -149,13 +149,21 @@ ...@@ -149,13 +149,21 @@
<dimen name="fre_content_margin">24dp</dimen> <dimen name="fre_content_margin">24dp</dimen>
<dimen name="fre_vertical_spacing">32dp</dimen> <dimen name="fre_vertical_spacing">32dp</dimen>
<dimen name="fre_landscape_top_padding">72dp</dimen> <dimen name="fre_landscape_top_padding">72dp</dimen>
<dimen name="fre_button_bar_height">62dp</dimen>
<dimen name="fre_bottom_vertical_margin">10dp</dimen>
<dimen name="fre_button_padding">12dp</dimen>
<dimen name="fre_margin">24dp</dimen> <dimen name="fre_margin">24dp</dimen>
<dimen name="fre_image_bottom_margin">36dp</dimen>
<dimen name="fre_image_height">110dp</dimen> <dimen name="fre_image_height">110dp</dimen>
<dimen name="fre_tos_checkbox_padding">12dp</dimen> <dimen name="fre_tos_checkbox_padding">12dp</dimen>
<dimen name="fre_tos_bottom_margin">16dp</dimen>
<dimen name="fre_loading_spinner_size">48dp</dimen> <dimen name="fre_loading_spinner_size">48dp</dimen>
<dimen name="fre_button_padding">12dp</dimen>
<dimen name="fre_bottom_loading_spinner_size">24dp</dimen>
<dimen name="fre_button_vertical_margin">24dp</dimen>
<!-- fre_button_bar_height = button_height(48dp) + fre_button_vertical_margin * 2-->
<dimen name="fre_button_bar_height">96dp</dimen>
<!-- fre_bottom_loading_spinner_margin = (fre_button_bar_height - fre_bottom_loading_spinner_size) / 2-->
<dimen name='fre_bottom_loading_spinner_margin'>36dp</dimen>
<!-- Account Signin dimensions --> <!-- Account Signin dimensions -->
<!-- The Account Signin page appears in the First Run Experience (amongst other places), so uses <!-- The Account Signin page appears in the First Run Experience (amongst other places), so uses
......
...@@ -43,6 +43,7 @@ public class TosAndUmaFragmentView extends FrameLayout { ...@@ -43,6 +43,7 @@ public class TosAndUmaFragmentView extends FrameLayout {
private int mLastWidth; private int mLastWidth;
// Spacing params // Spacing params
private int mImageBottomMargin;
private int mVerticalSpacing; private int mVerticalSpacing;
private int mImageSize; private int mImageSize;
private int mLoadingSpinnerSize; private int mLoadingSpinnerSize;
...@@ -77,7 +78,8 @@ public class TosAndUmaFragmentView extends FrameLayout { ...@@ -77,7 +78,8 @@ public class TosAndUmaFragmentView extends FrameLayout {
// Set up shadow. // Set up shadow.
mScrollView.getViewTreeObserver().addOnScrollChangedListener(this::updateShadowVisibility); mScrollView.getViewTreeObserver().addOnScrollChangedListener(this::updateShadowVisibility);
// Cache resource demensions that used in #onMeasure // Cache resource dimensions that used in #onMeasure.
mImageBottomMargin = getResources().getDimensionPixelSize(R.dimen.fre_image_bottom_margin);
mVerticalSpacing = getResources().getDimensionPixelSize(R.dimen.fre_vertical_spacing); mVerticalSpacing = getResources().getDimensionPixelSize(R.dimen.fre_vertical_spacing);
mImageSize = getResources().getDimensionPixelSize(R.dimen.fre_image_height); mImageSize = getResources().getDimensionPixelSize(R.dimen.fre_image_height);
mLoadingSpinnerSize = mLoadingSpinnerSize =
...@@ -119,8 +121,6 @@ public class TosAndUmaFragmentView extends FrameLayout { ...@@ -119,8 +121,6 @@ public class TosAndUmaFragmentView extends FrameLayout {
setTitleLayoutParams(useWideScreenLayout); setTitleLayoutParams(useWideScreenLayout);
setSpinnerLayoutParams(useWideScreenLayout, width, height); setSpinnerLayoutParams(useWideScreenLayout, width, height);
mContentWrapper.setVerticalGravity(
getContentLayoutVerticalGravity(useWideScreenLayout));
setContentLayoutParams(useWideScreenLayout); setContentLayoutParams(useWideScreenLayout);
setBottomGroupLayoutParams(useWideScreenLayout); setBottomGroupLayoutParams(useWideScreenLayout);
...@@ -165,13 +165,10 @@ public class TosAndUmaFragmentView extends FrameLayout { ...@@ -165,13 +165,10 @@ public class TosAndUmaFragmentView extends FrameLayout {
spinnerParams.setMarginStart(spinnerStartMargin); spinnerParams.setMarginStart(spinnerStartMargin);
spinnerParams.topMargin = spinnerTopMargin; spinnerParams.topMargin = spinnerTopMargin;
} else { } else {
// Calculate the estimated space below the title, which is centered in the overall // Center the spinner below the title, whose baseline is centered in the screen.
// content view. // For more information see #setLogoLayoutParams.
int spaceBelowTitle = height / 2 - mHeadlineSize;
// Place the spinner in the middle of the remaining space;
int spinnerTopMargin = int spinnerTopMargin =
Math.max(mVerticalSpacing, (spaceBelowTitle - mLoadingSpinnerSize) / 2); Math.max(mVerticalSpacing, (height / 2 - mLoadingSpinnerSize) / 2);
spinnerParams.gravity = Gravity.CENTER_HORIZONTAL; spinnerParams.gravity = Gravity.CENTER_HORIZONTAL;
spinnerParams.setMarginStart(0); spinnerParams.setMarginStart(0);
...@@ -198,15 +195,13 @@ public class TosAndUmaFragmentView extends FrameLayout { ...@@ -198,15 +195,13 @@ public class TosAndUmaFragmentView extends FrameLayout {
logoLayoutParams.topMargin = Math.max(0, topMargin); logoLayoutParams.topMargin = Math.max(0, topMargin);
logoLayoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP; logoLayoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.TOP;
} else { } else {
// Otherwise, in tall screen mode, we want the image to sit right above the title // Otherwise, in tall screen mode, we want the align the baseline of the title to the
// with a vertical spacing in between. In XML, the title is ordered below the logo in // center of the screen. While calculation is done in a similar way, we are putting
// the containing linear layout, so if we align the bottom of the logo mVerticalSpacing
// above the center of the screen, the top of the title will be at the center of the
// screen. While calculation is done in a similar way, we are putting
// mVerticalSpacing for marginTop as minimum to avoid 0dp spacing between top and logo // mVerticalSpacing for marginTop as minimum to avoid 0dp spacing between top and logo
// on small screen devices. // on small screen devices.
int freImageHeight = mImageSize + mVerticalSpacing; int freImageHeight = mImageSize + mImageBottomMargin;
logoLayoutParams.topMargin = Math.max(mVerticalSpacing, (height / 2 - freImageHeight)); logoLayoutParams.topMargin =
Math.max(mVerticalSpacing, (height / 2 - freImageHeight - mHeadlineSize));
logoLayoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM; logoLayoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM;
} }
} }
...@@ -231,10 +226,6 @@ public class TosAndUmaFragmentView extends FrameLayout { ...@@ -231,10 +226,6 @@ public class TosAndUmaFragmentView extends FrameLayout {
: Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM; : Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM;
} }
private int getContentLayoutVerticalGravity(boolean useWideScreen) {
return useWideScreen ? Gravity.CENTER_VERTICAL : Gravity.BOTTOM;
}
private int getTitleAndContentLayoutTopPadding(boolean useWideScreen) { private int getTitleAndContentLayoutTopPadding(boolean useWideScreen) {
return useWideScreen ? mLandscapeTopPadding : 0; return useWideScreen ? mLandscapeTopPadding : 0;
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment