Redesign the size compat restart button according to mocks.

The width of the hint is constant but the height changes with respect to the number of lines the text requires (see screenshots below). The X position of the hint is set programmatically so that the point's center will be aligned with the button's center.

Still need to add UI for different states of the button (pressed, focused, etc.) and maybe also the hint (since it's clickable). Mocks for this are still TBD.

Mocks: https://www.figma.com/file/fLAVOdDkg0lnFWiltSYbGA/Multitasking?node-id=2719%3A54196

Screenshots:
[default - 2 lines]    http://screen/4EtytFiKsY3Q5NE
[LTR language]         http://screen/9BSPipZYUd7UGPV
[short text - 1 line]  http://screen/AN5bds6rh5V55Bw
[large font - 3 lines] http://screen/6utG596y52LBDjX
[long text - 4 lines]  http://screen/7mBL2fXWy43UsTq

Bug: 198347324
Test: atest WMShellUnitTests:SizeCompatRestartButtonTest
Test: atest WMShellUnitTests:SizeCompatHintPopupTest
Test: atest atest WMShellUnitTests:SizeCompatUILayoutTest
Change-Id: Ida4c4171be94b60499cfe8acb6a2278f7e10a1f3
This commit is contained in:
tomnatan
2021-10-25 11:37:19 +00:00
parent b19768ef82
commit 825e55ed60
12 changed files with 126 additions and 72 deletions

View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2021 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/size_compat_hint_bubble"/>
<corners android:radius="@dimen/size_compat_hint_corner_radius"/>
</shape>

View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2021 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="@dimen/size_compat_hint_point_width"
android:height="8dp"
android:viewportWidth="10"
android:viewportHeight="8">
<path
android:fillColor="@color/size_compat_hint_bubble"
android:pathData="M10,0 l-4.1875,6.6875 a1,1 0 0,1 -1.625,0 l-4.1875,-6.6875z"/>
</vector>

View File

@@ -15,14 +15,21 @@
limitations under the License.
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
android:width="48dp"
android:height="48dp"
android:viewportWidth="48"
android:viewportHeight="48">
<path
android:fillColor="#aa000000"
android:pathData="M0,12 a12,12 0 1,0 24,0 a12,12 0 1,0 -24,0" />
<path
android:fillColor="@android:color/white"
android:pathData="M17.65,6.35c-1.63,-1.63 -3.94,-2.57 -6.48,-2.31c-3.67,0.37 -6.69,3.35 -7.1,7.02C3.52,15.91 7.27,20 12,20c3.19,0 5.93,-1.87 7.21,-4.57c0.31,-0.66 -0.16,-1.43 -0.89,-1.43h-0.01c-0.37,0 -0.72,0.2 -0.88,0.53c-1.13,2.43 -3.84,3.97 -6.81,3.32c-2.22,-0.49 -4.01,-2.3 -4.49,-4.52C5.31,9.44 8.26,6 12,6c1.66,0 3.14,0.69 4.22,1.78l-2.37,2.37C13.54,10.46 13.76,11 14.21,11H19c0.55,0 1,-0.45 1,-1V5.21c0,-0.45 -0.54,-0.67 -0.85,-0.35L17.65,6.35z"/>
android:fillColor="#53534D"
android:pathData="M0,24 a24,24 0 1,0 48,0 a24,24 0 1,0 -48,0" />
<group
android:translateX="12"
android:translateY="12">
<path
android:fillColor="#E4E3DA"
android:pathData="M6,13c0,-1.65 0.67,-3.15 1.76,-4.24L6.34,7.34C4.9,8.79 4,10.79 4,13c0,4.08 3.05,7.44 7,7.93v-2.02C8.17,18.43 6,15.97 6,13z"/>
<path
android:fillColor="#E4E3DA"
android:pathData="M20,13c0,-4.42 -3.58,-8 -8,-8c-0.06,0 -0.12,0.01 -0.18,0.01v0l1.09,-1.09L11.5,2.5L8,6l3.5,3.5l1.41,-1.41l-1.08,-1.08C11.89,7.01 11.95,7 12,7c3.31,0 6,2.69 6,6c0,2.97 -2.17,5.43 -5,5.91v2.02C16.95,20.44 20,17.08 20,13z"/>
</group>
</vector>

View File

@@ -22,41 +22,34 @@
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:clipToPadding="false"
android:padding="@dimen/bubble_elevation">
android:paddingBottom="5dp">
<LinearLayout
android:id="@+id/size_compat_hint_popup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/background_light"
android:elevation="@dimen/bubble_elevation"
android:orientation="vertical">
android:orientation="vertical"
android:clickable="true">
<TextView
android:layout_width="180dp"
android:layout_width="188dp"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:lineSpacingExtra="4sp"
android:background="@drawable/size_compat_hint_bubble"
android:padding="16dp"
android:text="@string/restart_button_description"
android:textAlignment="viewStart"
android:textColor="@android:color/primary_text_light"
android:textSize="16sp"/>
android:textColor="#E4E3DA"
android:textSize="14sp"/>
<Button
android:id="@+id/got_it"
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:layout_gravity="end"
android:minHeight="36dp"
android:background="?android:attr/selectableItemBackground"
android:text="@string/got_it"
android:textAllCaps="true"
android:textColor="#3c78d8"
android:textSize="16sp"
android:textStyle="bold"/>
android:src="@drawable/size_compat_hint_point"
android:paddingHorizontal="@dimen/size_compat_hint_corner_radius"
android:contentDescription="@null"/>
</LinearLayout>

View File

@@ -19,12 +19,21 @@
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageButton
android:id="@+id/size_compat_restart_button"
android:layout_width="@dimen/size_compat_button_size"
android:layout_height="@dimen/size_compat_button_size"
android:layout_gravity="center"
android:src="@drawable/size_compat_restart_button"
android:contentDescription="@string/restart_button_description"/>
<FrameLayout
android:layout_width="@dimen/size_compat_button_width"
android:layout_height="@dimen/size_compat_button_height"
android:clipToPadding="false"
android:paddingBottom="16dp">
<ImageButton
android:id="@+id/size_compat_restart_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/size_compat_restart_button"
android:background="@android:color/transparent"
android:contentDescription="@string/restart_button_description"/>
</FrameLayout>
</com.android.wm.shell.sizecompatui.SizeCompatRestartButton>

View File

@@ -29,6 +29,7 @@
<color name="bubbles_light">#FFFFFF</color>
<color name="bubbles_dark">@color/GM2_grey_800</color>
<color name="bubbles_icon_tint">@color/GM2_grey_700</color>
<color name="size_compat_hint_bubble">#30312B</color>
<!-- GM2 colors -->
<color name="GM2_grey_200">#E8EAED</color>

View File

@@ -194,8 +194,17 @@
<!-- Size of user education views on large screens (phone is just match parent). -->
<dimen name="bubbles_user_education_width_large_screen">400dp</dimen>
<!-- The width/height of the size compat restart button. -->
<dimen name="size_compat_button_size">48dp</dimen>
<!-- The width of the size compat restart button including padding. -->
<dimen name="size_compat_button_width">80dp</dimen>
<!-- The height of the size compat restart button including padding. -->
<dimen name="size_compat_button_height">64dp</dimen>
<!-- The radius of the corners of the size compat hint bubble. -->
<dimen name="size_compat_hint_corner_radius">28dp</dimen>
<!-- The width of the size compat hint point. -->
<dimen name="size_compat_hint_point_width">10dp</dimen>
<!-- The width of the brand image on staring surface. -->
<dimen name="starting_surface_brand_image_width">200dp</dimen>

View File

@@ -155,7 +155,4 @@
<!-- Description of the restart button in the hint of size compatibility mode. [CHAR LIMIT=NONE] -->
<string name="restart_button_description">Tap to restart this app and go full screen.</string>
<!-- Generic "got it" acceptance of dialog or cling [CHAR LIMIT=NONE] -->
<string name="got_it">Got it</string>
</resources>

View File

@@ -17,13 +17,10 @@
package com.android.wm.shell.sizecompatui;
import android.content.Context;
import android.content.res.ColorStateList;
import android.graphics.Color;
import android.graphics.drawable.RippleDrawable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import androidx.annotation.Nullable;
@@ -58,10 +55,8 @@ public class SizeCompatHintPopup extends FrameLayout implements View.OnClickList
@Override
protected void onFinishInflate() {
super.onFinishInflate();
final Button gotItButton = findViewById(R.id.got_it);
gotItButton.setBackground(new RippleDrawable(ColorStateList.valueOf(Color.LTGRAY),
null /* content */, null /* mask */));
gotItButton.setOnClickListener(this);
final LinearLayout hintPopup = findViewById(R.id.size_compat_hint_popup);
hintPopup.setOnClickListener(this);
}
@Override

View File

@@ -17,10 +17,6 @@
package com.android.wm.shell.sizecompatui;
import android.content.Context;
import android.content.res.ColorStateList;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.graphics.drawable.RippleDrawable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;
@@ -63,11 +59,6 @@ public class SizeCompatRestartButton extends FrameLayout implements View.OnClick
protected void onFinishInflate() {
super.onFinishInflate();
final ImageButton restartButton = findViewById(R.id.size_compat_restart_button);
final ColorStateList color = ColorStateList.valueOf(Color.LTGRAY);
final GradientDrawable mask = new GradientDrawable();
mask.setShape(GradientDrawable.OVAL);
mask.setColor(color);
restartButton.setBackground(new RippleDrawable(color, null /* content */, mask));
restartButton.setOnClickListener(this);
restartButton.setOnLongClickListener(this);
}

View File

@@ -25,6 +25,7 @@ import static android.view.WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;
import android.annotation.Nullable;
import android.content.Context;
import android.content.res.Configuration;
import android.content.res.Resources;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.os.Binder;
@@ -54,6 +55,10 @@ class SizeCompatUILayout {
private final int mTaskId;
private ShellTaskOrganizer.TaskListener mTaskListener;
private DisplayLayout mDisplayLayout;
private final int mButtonWidth;
private final int mButtonHeight;
private final int mPopupOffsetX;
private final int mPopupOffsetY;
@VisibleForTesting
final SizeCompatUIWindowManager mButtonWindowManager;
@@ -66,9 +71,7 @@ class SizeCompatUILayout {
@VisibleForTesting
@Nullable
SizeCompatHintPopup mHint;
final int mButtonSize;
final int mPopupOffsetX;
final int mPopupOffsetY;
@VisibleForTesting
boolean mShouldShowHint;
SizeCompatUILayout(SyncTransactionQueue syncQueue,
@@ -86,10 +89,13 @@ class SizeCompatUILayout {
mShouldShowHint = !hasShownHint;
mButtonWindowManager = new SizeCompatUIWindowManager(mContext, taskConfig, this);
mButtonSize =
mContext.getResources().getDimensionPixelSize(R.dimen.size_compat_button_size);
mPopupOffsetX = mButtonSize / 4;
mPopupOffsetY = mButtonSize;
final Resources resources = mContext.getResources();
mButtonWidth = resources.getDimensionPixelSize(R.dimen.size_compat_button_width);
mButtonHeight = resources.getDimensionPixelSize(R.dimen.size_compat_button_height);
mPopupOffsetX = (mButtonWidth / 2) - resources.getDimensionPixelSize(
R.dimen.size_compat_hint_corner_radius) - (resources.getDimensionPixelSize(
R.dimen.size_compat_hint_point_width) / 2);
mPopupOffsetY = mButtonHeight;
}
/** Creates the activity restart button window. */
@@ -222,7 +228,7 @@ class SizeCompatUILayout {
WindowManager.LayoutParams getButtonWindowLayoutParams() {
final WindowManager.LayoutParams winParams = new WindowManager.LayoutParams(
// Cannot be wrap_content as this determines the actual window size
mButtonSize, mButtonSize,
mButtonWidth, mButtonHeight,
TYPE_APPLICATION_OVERLAY,
FLAG_NOT_FOCUSABLE | FLAG_NOT_TOUCH_MODAL,
PixelFormat.TRANSLUCENT);
@@ -278,8 +284,8 @@ class SizeCompatUILayout {
// Position of the button in the container coordinate.
final int positionX = getLayoutDirection() == View.LAYOUT_DIRECTION_RTL
? stableBounds.left - taskBounds.left
: stableBounds.right - taskBounds.left - mButtonSize;
final int positionY = stableBounds.bottom - taskBounds.top - mButtonSize;
: stableBounds.right - taskBounds.left - mButtonWidth;
final int positionY = stableBounds.bottom - taskBounds.top - mButtonHeight;
updateSurfacePosition(leash, positionX, positionY);
}

View File

@@ -24,7 +24,7 @@ import static org.mockito.Mockito.verify;
import android.content.res.Configuration;
import android.testing.AndroidTestingRunner;
import android.view.LayoutInflater;
import android.widget.Button;
import android.widget.LinearLayout;
import androidx.test.filters.SmallTest;
@@ -77,8 +77,8 @@ public class SizeCompatHintPopupTest extends ShellTestCase {
public void testOnClick() {
doNothing().when(mLayout).dismissHint();
final Button button = mHint.findViewById(R.id.got_it);
button.performClick();
final LinearLayout hintPopup = mHint.findViewById(R.id.size_compat_hint_popup);
hintPopup.performClick();
verify(mLayout).dismissHint();
}