Update screenshot UI to use new Material colors

Also updates some of the padding/margins and makes the dismiss
button 32dp wide (tappable size 48dp).

https://screenshot.googleplex.com/6QrPRKuJX7ruAZA (light mode)
https://screenshot.googleplex.com/6CwbfTCdUU8Jmrx (dark mode)

Bug: 187967953
Fix: 187967953

Test: manual
Change-Id: Ice0109633810b4de0aeaae9024fe4257bc2fd4c4
This commit is contained in:
Miranda Kephart
2021-05-19 20:29:32 +00:00
parent f0ec6471cc
commit 67fd70cdf3
14 changed files with 137 additions and 79 deletions

View File

@@ -16,12 +16,12 @@
-->
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
android:color="@color/global_screenshot_button_ripple">
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="@color/global_screenshot_button_border"/>
<solid android:color="@color/global_screenshot_button_background"/>
<solid android:color="?androidprv:attr/colorAccentSecondary"/>
<corners android:radius="@dimen/screenshot_button_corner_radius"/>
</shape>
</item>
</ripple>
</ripple>

View File

@@ -14,8 +14,10 @@
~ 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/global_screenshot_button_background"/>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
android:shape="rectangle">
<solid android:color="?androidprv:attr/colorSurface"/>
<corners android:radius="@dimen/screenshot_action_container_corner_radius"/>
</shape>
</shape>

View File

@@ -0,0 +1,23 @@
<?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"
xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
android:shape="rectangle">
<solid android:color="?androidprv:attr/colorSurface"/>
<corners android:radius="20dp"/>
</shape>

View File

@@ -15,14 +15,15 @@
~ limitations under the License.
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:androidprv="http://schemas.android.com/apk/prv/res/android"
android:width="48dp"
android:height="48dp"
android:viewportWidth="48.0"
android:viewportHeight="48.0">
android:viewportWidth="32.0"
android:viewportHeight="32.0">
<path
android:fillColor="@color/global_screenshot_dismiss_background"
android:pathData="M24,24m-16,0a16,16 0,1 1,32 0a16,16 0,1 1,-32 0"/>
android:fillColor="?androidprv:attr/colorAccentSecondary"
android:pathData="M16,16m-16,0a16,16 0,1 1,32 0a16,16 0,1 1,-32 0"/>
<path
android:fillColor="@color/global_screenshot_dismiss_foreground"
android:pathData="M31,18.41L29.59,17 24,22.59 18.41,17 17,18.41 22.59,24 17,29.59 18.41,31 24,25.41 29.59,31 31,29.59 25.41,24z"/>
</vector>
android:fillColor="?android:attr/textColorPrimary"
android:pathData="M23,10.41L21.59,9 16,14.59 10.41,9 9,10.41 14.59,16 9,21.59 10.41,23 16,17.41 21.59,23 23,21.59 17.41,16z"/>
</vector>

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">
<corners android:radius="20dp"/>
</shape>

View File

@@ -17,6 +17,7 @@
<com.android.systemui.screenshot.ScreenshotView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/global_screenshot_frame"
android:theme="@style/Screenshot"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView

View File

@@ -32,7 +32,7 @@
android:gravity="center">
<ImageView
android:id="@+id/screenshot_action_chip_icon"
android:tint="@*android:color/accent_device_default"
android:tint="?android:attr/textColorPrimary"
android:layout_width="@dimen/screenshot_action_chip_icon_size"
android:layout_height="@dimen/screenshot_action_chip_icon_size"
android:layout_marginStart="@dimen/screenshot_action_chip_padding_start"
@@ -44,6 +44,6 @@
android:layout_marginEnd="@dimen/screenshot_action_chip_padding_end"
android:fontFamily="@*android:string/config_headlineFontFamilyMedium"
android:textSize="@dimen/screenshot_action_chip_text_size"
android:textColor="@color/global_screenshot_button_text"/>
android:textColor="?android:attr/textColorPrimary"/>
</LinearLayout>
</com.android.systemui.screenshot.ScreenshotActionChip>

View File

@@ -1,33 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2011 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.
-->
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/global_screenshot_preview"
android:layout_width="@dimen/global_screenshot_x_scale"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="@dimen/screenshot_offset_x"
android:layout_marginBottom="@dimen/screenshot_offset_y"
android:scaleType="fitEnd"
android:elevation="@dimen/screenshot_preview_elevation"
android:visibility="invisible"
android:background="@drawable/screenshot_rounded_corners"
android:adjustViewBounds="true"
android:contentDescription="@string/screenshot_edit_label"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"/>

View File

@@ -37,7 +37,7 @@
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/screenshot_action_container_margin_horizontal"
android:layout_marginBottom="@dimen/screenshot_action_container_offset_y"
android:paddingHorizontal="@dimen/screenshot_action_container_padding_right"
android:paddingEnd="@dimen/screenshot_action_container_padding_right"
android:paddingVertical="@dimen/screenshot_action_container_padding_vertical"
android:elevation="1dp"
android:scrollbars="none"
@@ -45,7 +45,7 @@
app:layout_constraintWidth_percent="1.0"
app:layout_constraintWidth_max="wrap"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/global_screenshot_preview"
app:layout_constraintStart_toEndOf="@+id/global_screenshot_preview_border"
app:layout_constraintEnd_toEndOf="parent">
<LinearLayout
android:id="@+id/global_screenshot_actions"
@@ -60,7 +60,49 @@
android:visibility="gone" />
</LinearLayout>
</HorizontalScrollView>
<include layout="@layout/global_screenshot_preview"/>
<View
android:id="@+id/global_screenshot_preview_border"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="@dimen/screenshot_offset_x"
android:layout_marginBottom="@dimen/screenshot_offset_y"
android:elevation="@dimen/screenshot_preview_elevation"
android:alpha="0"
android:background="@drawable/screenshot_border"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/screenshot_preview_end"
app:layout_constraintTop_toTopOf="@+id/screenshot_preview_top"/>
<androidx.constraintlayout.widget.Barrier
android:id="@+id/screenshot_preview_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierMargin="4dp"
app:barrierDirection="end"
app:constraint_referenced_ids="global_screenshot_preview"/>
<androidx.constraintlayout.widget.Barrier
android:id="@+id/screenshot_preview_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:barrierMargin="-4dp"
app:constraint_referenced_ids="global_screenshot_preview"/>
<ImageView
android:id="@+id/global_screenshot_preview"
android:visibility="invisible"
android:layout_width="@dimen/global_screenshot_x_scale"
android:layout_marginStart="4dp"
android:layout_marginBottom="4dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:elevation="@dimen/screenshot_preview_elevation"
android:contentDescription="@string/screenshot_edit_label"
android:scaleType="fitEnd"
android:background="@drawable/screenshot_preview_background"
android:adjustViewBounds="true"
app:layout_constraintBottom_toBottomOf="@+id/global_screenshot_preview_border"
app:layout_constraintStart_toStartOf="@+id/global_screenshot_preview_border">
</ImageView>
<FrameLayout
android:id="@+id/global_screenshot_dismiss_button"
android:layout_width="@dimen/screenshot_dismiss_button_tappable_size"

View File

@@ -37,4 +37,8 @@
<item name="android:navigationBarColor">?android:attr/colorBackgroundFloating</item>
</style>
<style name="Screenshot" parent="@android:style/Theme.DeviceDefault.DayNight">
<item name="android:textColorPrimary">?android:attr/textColorPrimaryInverse</item>
</style>
</resources>

View File

@@ -196,13 +196,7 @@
<color name="default_invocation_lights_color">#ffffffff</color> <!-- white -->
<!-- Global screenshot actions -->
<color name="global_screenshot_button_background">#F5F5F5</color>
<color name="global_screenshot_button_text">#000000</color>
<color name="global_screenshot_button_border">@color/GM2_grey_300</color>
<color name="global_screenshot_button_ripple">#1f000000</color>
<color name="global_screenshot_button_icon">@color/GM2_blue_500</color>
<color name="global_screenshot_dismiss_background">#FFFFFF</color>
<color name="global_screenshot_dismiss_foreground">@color/GM2_grey_500</color>
<color name="global_screenshot_background_protection_start">#40000000</color> <!-- 25% black -->
<!-- Long screenshot UI -->

View File

@@ -330,21 +330,21 @@
<dimen name="global_screenshot_bg_protection_height">400dp</dimen>
<dimen name="global_screenshot_x_scale">80dp</dimen>
<dimen name="screenshot_bg_protection_height">242dp</dimen>
<dimen name="screenshot_preview_elevation">6dp</dimen>
<dimen name="screenshot_offset_y">32dp</dimen>
<dimen name="screenshot_preview_elevation">4dp</dimen>
<dimen name="screenshot_offset_y">24dp</dimen>
<dimen name="screenshot_offset_x">16dp</dimen>
<dimen name="screenshot_dismiss_button_tappable_size">48dp</dimen>
<dimen name="screenshot_dismiss_button_margin">8dp</dimen>
<dimen name="screenshot_action_container_offset_y">16dp</dimen>
<dimen name="screenshot_action_container_corner_radius">10dp</dimen>
<dimen name="screenshot_action_container_padding_vertical">6dp</dimen>
<dimen name="screenshot_action_container_corner_radius">18dp</dimen>
<dimen name="screenshot_action_container_padding_vertical">4dp</dimen>
<dimen name="screenshot_action_container_margin_horizontal">8dp</dimen>
<dimen name="screenshot_action_container_padding_right">8dp</dimen>
<!-- Radius of the chip background on global screenshot actions -->
<dimen name="screenshot_button_corner_radius">20dp</dimen>
<dimen name="screenshot_button_corner_radius">8dp</dimen>
<dimen name="screenshot_action_chip_margin_start">8dp</dimen>
<dimen name="screenshot_action_chip_margin_vertical">10dp</dimen>
<dimen name="screenshot_action_chip_padding_vertical">7dp</dimen>
<dimen name="screenshot_action_chip_margin_vertical">4dp</dimen>
<dimen name="screenshot_action_chip_padding_vertical">11dp</dimen>
<dimen name="screenshot_action_chip_icon_size">18dp</dimen>
<dimen name="screenshot_action_chip_padding_start">8dp</dimen>
<!-- Padding between icon and text -->

View File

@@ -700,6 +700,8 @@
<item name="android:windowActivityTransitions">true</item>
</style>
<style name="Screenshot" parent="@android:style/Theme.DeviceDefault.DayNight"/>
<!-- Privacy dialog -->
<style name="PrivacyDialog" parent="Theme.SystemUI.QuickSettings.Dialog">
<item name="android:windowIsTranslucent">true</item>

View File

@@ -40,7 +40,6 @@ import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.Insets;
import android.graphics.Outline;
import android.graphics.PointF;
import android.graphics.Rect;
import android.graphics.Region;
@@ -61,7 +60,6 @@ import android.view.MotionEvent;
import android.view.TouchDelegate;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewOutlineProvider;
import android.view.ViewTreeObserver;
import android.view.WindowInsets;
import android.view.accessibility.AccessibilityManager;
@@ -108,7 +106,7 @@ public class ScreenshotView extends FrameLayout implements
private static final long SCREENSHOT_DISMISS_ALPHA_DURATION_MS = 183;
private static final long SCREENSHOT_DISMISS_ALPHA_OFFSET_MS = 50; // delay before starting fade
private static final float SCREENSHOT_ACTIONS_START_SCALE_X = .7f;
private static final float ROUNDED_CORNER_RADIUS = .05f;
private static final float ROUNDED_CORNER_RADIUS = .25f;
private static final int SWIPE_PADDING_DP = 12; // extra padding around views to allow swipe
private final Interpolator mAccelerateInterpolator = new AccelerateInterpolator();
@@ -129,6 +127,7 @@ public class ScreenshotView extends FrameLayout implements
private ScreenshotSelectorView mScreenshotSelectorView;
private View mScreenshotStatic;
private ImageView mScreenshotPreview;
private View mScreenshotPreviewBorder;
private ImageView mScreenshotFlash;
private ImageView mActionsContainerBackground;
private HorizontalScrollView mActionsContainer;
@@ -265,6 +264,9 @@ public class ScreenshotView extends FrameLayout implements
protected void onFinishInflate() {
mScreenshotStatic = requireNonNull(findViewById(R.id.global_screenshot_static));
mScreenshotPreview = requireNonNull(findViewById(R.id.global_screenshot_preview));
mScreenshotPreviewBorder = requireNonNull(
findViewById(R.id.global_screenshot_preview_border));
mScreenshotPreview.setClipToOutline(true);
mActionsContainerBackground = requireNonNull(findViewById(
R.id.global_screenshot_actions_container_background));
@@ -279,15 +281,6 @@ public class ScreenshotView extends FrameLayout implements
mEditChip = requireNonNull(mActionsContainer.findViewById(R.id.screenshot_edit_chip));
mScrollChip = requireNonNull(mActionsContainer.findViewById(R.id.screenshot_scroll_chip));
mScreenshotPreview.setClipToOutline(true);
mScreenshotPreview.setOutlineProvider(new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
outline.setRoundRect(new Rect(0, 0, view.getWidth(), view.getHeight()),
ROUNDED_CORNER_RADIUS * view.getWidth());
}
});
int swipePaddingPx = (int) dpToPx(SWIPE_PADDING_DP);
TouchDelegate previewDelegate = new TouchDelegate(
new Rect(swipePaddingPx, swipePaddingPx, swipePaddingPx, swipePaddingPx),
@@ -467,12 +460,18 @@ public class ScreenshotView extends FrameLayout implements
mScreenshotFlash.setAlpha(0f);
mScreenshotFlash.setVisibility(View.VISIBLE);
ValueAnimator borderFadeIn = ValueAnimator.ofFloat(0, 1);
borderFadeIn.setDuration(100);
borderFadeIn.addUpdateListener((animation) ->
mScreenshotPreviewBorder.setAlpha(animation.getAnimatedFraction()));
if (showFlash) {
dropInAnimation.play(flashOutAnimator).after(flashInAnimator);
dropInAnimation.play(flashOutAnimator).with(toCorner);
} else {
dropInAnimation.play(toCorner);
}
dropInAnimation.play(borderFadeIn).after(toCorner);
dropInAnimation.addListener(new AnimatorListenerAdapter() {
@Override
@@ -497,8 +496,8 @@ public class ScreenshotView extends FrameLayout implements
finalPos.y - dismissOffset - bounds.height() * cornerScale / 2f);
mScreenshotPreview.setScaleX(1);
mScreenshotPreview.setScaleY(1);
mScreenshotPreview.setX(finalPos.x - bounds.width() * cornerScale / 2f);
mScreenshotPreview.setY(finalPos.y - bounds.height() * cornerScale / 2f);
mScreenshotPreview.setX(finalPos.x - mScreenshotPreview.getWidth() / 2f);
mScreenshotPreview.setY(finalPos.y - mScreenshotPreview.getHeight() / 2f);
requestLayout();
createScreenshotActionsShadeAnimation().start();
@@ -739,6 +738,7 @@ public class ScreenshotView extends FrameLayout implements
// Clear any references to the bitmap
mScreenshotPreview.setImageDrawable(null);
mScreenshotPreview.setVisibility(View.INVISIBLE);
mScreenshotPreviewBorder.setAlpha(0);
mPendingSharedTransition = false;
mActionsContainerBackground.setVisibility(View.GONE);
mActionsContainer.setVisibility(View.GONE);
@@ -798,6 +798,7 @@ public class ScreenshotView extends FrameLayout implements
yAnim.addUpdateListener(animation -> {
float yDelta = MathUtils.lerp(0, mDismissDeltaY, animation.getAnimatedFraction());
mScreenshotPreview.setTranslationY(screenshotStartY + yDelta);
mScreenshotPreviewBorder.setTranslationY(screenshotStartY + yDelta);
mDismissButton.setTranslationY(dismissStartY + yDelta);
mActionsContainer.setTranslationY(yDelta);
mActionsContainerBackground.setTranslationY(yDelta);