From 45eb1cc4f87559d54057b1f9f64a1f8995118a25 Mon Sep 17 00:00:00 2001 From: Josh Tsuji Date: Mon, 19 Apr 2021 00:22:03 -0400 Subject: [PATCH] Re-re-designs the volume panel. This adds background protection (and animates that background protection along with the ringer drawer), as well as updating sizes and colors to match the latest spec. A subsequent CL will apply these changes to landscape. Bug: 171441100 Test: manual Change-Id: Ie14aa4477dcaf29435e3e13b07a695261a4af690 --- .../res/drawable/volume_background.xml | 26 ++++ .../res/drawable/volume_row_seekbar.xml | 43 ++---- .../drawable/volume_row_seekbar_progress.xml | 7 +- .../SystemUI/res/layout/volume_dialog.xml | 140 +++++++++--------- .../SystemUI/res/layout/volume_dialog_row.xml | 8 +- .../res/layout/volume_ringer_drawer.xml | 8 +- packages/SystemUI/res/values/dimens.xml | 24 +-- .../systemui/volume/VolumeDialogImpl.java | 97 +++++++++--- 8 files changed, 217 insertions(+), 136 deletions(-) create mode 100644 packages/SystemUI/res/drawable/volume_background.xml diff --git a/packages/SystemUI/res/drawable/volume_background.xml b/packages/SystemUI/res/drawable/volume_background.xml new file mode 100644 index 0000000000000..66f1d0da49905 --- /dev/null +++ b/packages/SystemUI/res/drawable/volume_background.xml @@ -0,0 +1,26 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/packages/SystemUI/res/drawable/volume_row_seekbar.xml b/packages/SystemUI/res/drawable/volume_row_seekbar.xml index a845e73eb3a45..7ce1ba3be7f63 100644 --- a/packages/SystemUI/res/drawable/volume_row_seekbar.xml +++ b/packages/SystemUI/res/drawable/volume_row_seekbar.xml @@ -9,7 +9,6 @@ ~ 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. @@ -19,38 +18,24 @@ and a bottom-aligned icon) and a progress layer (with an accent-colored round rect and icon) that moves up and down with the progress value. --> + xmlns:androidprv="http://schemas.android.com/apk/prv/res/android" + android:paddingMode="stack" > - - - - - - - - - - - - - - - + + + + + + + - + diff --git a/packages/SystemUI/res/drawable/volume_row_seekbar_progress.xml b/packages/SystemUI/res/drawable/volume_row_seekbar_progress.xml index ef202360b1ce4..4f97ca47513c6 100644 --- a/packages/SystemUI/res/drawable/volume_row_seekbar_progress.xml +++ b/packages/SystemUI/res/drawable/volume_row_seekbar_progress.xml @@ -18,12 +18,13 @@ - + - + + android:tint="?androidprv:attr/colorAccentPrimaryVariant" /> \ No newline at end of file diff --git a/packages/SystemUI/res/layout/volume_dialog.xml b/packages/SystemUI/res/layout/volume_dialog.xml index 6aac5a34821b4..a39006c70fa70 100644 --- a/packages/SystemUI/res/layout/volume_dialog.xml +++ b/packages/SystemUI/res/layout/volume_dialog.xml @@ -16,114 +16,119 @@ - - - - - - - + android:background="@drawable/volume_background"> + + + + + + + + + - + android:gravity="right" + android:layout_gravity="right" + android:orientation="vertical" + android:clipChildren="false" + android:clipToPadding="false" > + + + + + + - - - + + android:background="@drawable/volume_background"> - @@ -54,7 +54,9 @@ android:layout_width="@dimen/volume_row_slider_height" android:layout_height="match_parent" android:layout_gravity="center" - android:thumb="@android:color/transparent" + android:thumb="@null" + android:splitTrack="false" + android:progressDrawable="@drawable/volume_row_seekbar" android:rotation="270" /> diff --git a/packages/SystemUI/res/layout/volume_ringer_drawer.xml b/packages/SystemUI/res/layout/volume_ringer_drawer.xml index d6e1782382fac..9d14ac46e4062 100644 --- a/packages/SystemUI/res/layout/volume_ringer_drawer.xml +++ b/packages/SystemUI/res/layout/volume_ringer_drawer.xml @@ -60,7 +60,7 @@ android:layout_width="@dimen/volume_ringer_drawer_icon_size" android:layout_height="@dimen/volume_ringer_drawer_icon_size" android:layout_gravity="center" - android:tint="?android:attr/colorAccent" + android:tint="?android:attr/textColorPrimary" android:src="@drawable/ic_volume_ringer_vibrate" /> @@ -77,7 +77,7 @@ android:layout_width="@dimen/volume_ringer_drawer_icon_size" android:layout_height="@dimen/volume_ringer_drawer_icon_size" android:layout_gravity="center" - android:tint="?android:attr/colorAccent" + android:tint="?android:attr/textColorPrimary" android:src="@drawable/ic_volume_ringer_mute" /> @@ -94,7 +94,7 @@ android:layout_width="@dimen/volume_ringer_drawer_icon_size" android:layout_height="@dimen/volume_ringer_drawer_icon_size" android:layout_gravity="center" - android:tint="?android:attr/colorAccent" + android:tint="?android:attr/textColorPrimary" android:src="@drawable/ic_volume_ringer" /> @@ -118,7 +118,7 @@ android:layout_width="@dimen/volume_ringer_drawer_icon_size" android:layout_height="@dimen/volume_ringer_drawer_icon_size" android:layout_gravity="center" - android:tint="?android:attr/colorBackgroundFloating" + android:tint="?android:attr/textColorPrimaryInverse" android:src="@drawable/ic_volume_media" /> diff --git a/packages/SystemUI/res/values/dimens.xml b/packages/SystemUI/res/values/dimens.xml index 210efd86d453e..213e73beda138 100644 --- a/packages/SystemUI/res/values/dimens.xml +++ b/packages/SystemUI/res/values/dimens.xml @@ -461,29 +461,33 @@ @dimen/notification_panel_width - 4dp + 8dp 20dp 12dp - 64dp + 56dp - 32dp + 28dp + + 42dp + + 21dp 116dp - @dimen/volume_dialog_panel_width + 4dp - @dimen/volume_dialog_panel_width_half + 2dp - 64dp + 42dp 20dp - 64dp + 56dp - 48dp + 42dp 4dp @@ -504,8 +508,8 @@ 2dp - 64dp - 32dp + 42dp + 21dp 24dp diff --git a/packages/SystemUI/src/com/android/systemui/volume/VolumeDialogImpl.java b/packages/SystemUI/src/com/android/systemui/volume/VolumeDialogImpl.java index 8459b7b6ed053..6953039e9ff5c 100644 --- a/packages/SystemUI/src/com/android/systemui/volume/VolumeDialogImpl.java +++ b/packages/SystemUI/src/com/android/systemui/volume/VolumeDialogImpl.java @@ -53,6 +53,7 @@ import android.content.res.Resources; import android.content.res.TypedArray; import android.graphics.Color; import android.graphics.PixelFormat; +import android.graphics.Rect; import android.graphics.Region; import android.graphics.drawable.ColorDrawable; import android.graphics.drawable.Drawable; @@ -96,6 +97,8 @@ import android.widget.SeekBar.OnSeekBarChangeListener; import android.widget.TextView; import android.widget.Toast; +import androidx.annotation.Nullable; + import com.android.internal.graphics.drawable.BackgroundBlurDrawable; import com.android.settingslib.Utils; import com.android.systemui.Dependency; @@ -162,6 +165,9 @@ public class VolumeDialogImpl implements VolumeDialog, private ViewGroup mDialogRowsView; private ViewGroup mRinger; + @Nullable private View mRingerAndRowsContainer; + @Nullable private Drawable mRingerAndRowsContainerBackground; + private ViewGroup mSelectedRingerContainer; private ImageView mSelectedRingerIcon; @@ -183,6 +189,12 @@ public class VolumeDialogImpl implements VolumeDialog, private ImageView mRingerDrawerIconAnimatingSelected; private ImageView mRingerDrawerIconAnimatingDeselected; + /** + * Animates the volume dialog's background drawable bounds upwards, to match the height of the + * expanded ringer drawer. + */ + private final ValueAnimator mAnimateUpBackgroundToMatchDrawer = ValueAnimator.ofFloat(1f, 0f); + private boolean mIsRingerDrawerOpen = false; private ImageButton mRingerIcon; @@ -586,20 +598,26 @@ public class VolumeDialogImpl implements VolumeDialog, row.anim = null; + mRingerAndRowsContainer = mDialogView.findViewById( + R.id.volume_dialog_ringer_and_rows_container); + + if (mRingerAndRowsContainer != null) { + // Wait for layout so the background bounds are set, then set the background top to the + // ringer drawer closed position. + mRingerAndRowsContainer.post(() -> { + final LayerDrawable bgWrapper = + ((LayerDrawable) mRingerAndRowsContainer.getBackground()); + + if (bgWrapper != null) { + mRingerAndRowsContainerBackground = bgWrapper.getDrawable(0); + setRingerAndRowsBackgroundTop(1f /* closedAmount */); + } + }); + } + final LayerDrawable seekbarDrawable = (LayerDrawable) mContext.getDrawable(R.drawable.volume_row_seekbar); - final LayerDrawable seekbarBgDrawable = - (LayerDrawable) seekbarDrawable.findDrawableByLayerId(android.R.id.background); - - row.sliderBgSolid = seekbarBgDrawable.findDrawableByLayerId( - R.id.volume_seekbar_background_solid); - - final Drawable sliderBgIcon = seekbarBgDrawable.findDrawableByLayerId( - R.id.volume_seekbar_background_icon); - row.sliderBgIcon = sliderBgIcon != null ? (AlphaTintDrawableWrapper) - ((RotateDrawable) sliderBgIcon).getDrawable() : null; - final LayerDrawable seekbarProgressDrawable = (LayerDrawable) ((RoundedCornerProgressDrawable) seekbarDrawable.findDrawableByLayerId( android.R.id.progress)).getDrawable(); @@ -679,10 +697,10 @@ public class VolumeDialogImpl implements VolumeDialog, mDialogView.getPaddingLeft(), mDialogView.getPaddingTop(), mDialogView.getPaddingRight(), - mDialogView.getPaddingBottom() + (mRingerCount - 1) * mRingerDrawerItemSize); + mDialogView.getPaddingBottom() + getRingerDrawerOpenExtraHeight()); } else { mDialogView.setPadding( - mDialogView.getPaddingLeft() + (mRingerCount - 1) * mRingerDrawerItemSize, + mDialogView.getPaddingLeft() + getRingerDrawerOpenExtraHeight(), mDialogView.getPaddingTop(), mDialogView.getPaddingRight(), mDialogView.getPaddingBottom()); @@ -731,6 +749,9 @@ public class VolumeDialogImpl implements VolumeDialog, } }); mRingerDrawerIconColorAnimator.setDuration(DRAWER_ANIMATION_DURATION_SHORT); + + mAnimateUpBackgroundToMatchDrawer.addUpdateListener(valueAnimator -> + setRingerAndRowsBackgroundTop((float) valueAnimator.getAnimatedValue())); } private ImageView getDrawerIconViewForMode(int mode) { @@ -789,14 +810,16 @@ public class VolumeDialogImpl implements VolumeDialog, mRingerDrawerContainer.setAlpha(0f); mRingerDrawerContainer.setVisibility(VISIBLE); + final int ringerDrawerAnimationDuration = mState.ringerModeInternal == RINGER_MODE_VIBRATE + ? DRAWER_ANIMATION_DURATION_SHORT + : DRAWER_ANIMATION_DURATION; + // Animate the drawer up and visible. mRingerDrawerContainer.animate() .setInterpolator(Interpolators.FAST_OUT_SLOW_IN) // Vibrate is way farther up, so give the selected ringer icon a head start if // vibrate is selected. - .setDuration(mState.ringerModeInternal == RINGER_MODE_VIBRATE - ? DRAWER_ANIMATION_DURATION_SHORT - : DRAWER_ANIMATION_DURATION) + .setDuration(ringerDrawerAnimationDuration) .setStartDelay(mState.ringerModeInternal == RINGER_MODE_VIBRATE ? DRAWER_ANIMATION_DURATION - DRAWER_ANIMATION_DURATION_SHORT : 0) @@ -812,6 +835,10 @@ public class VolumeDialogImpl implements VolumeDialog, .withEndAction(() -> getDrawerIconViewForMode(mState.ringerModeInternal).setVisibility(VISIBLE)); + mAnimateUpBackgroundToMatchDrawer.setDuration(ringerDrawerAnimationDuration); + mAnimateUpBackgroundToMatchDrawer.setInterpolator(Interpolators.FAST_OUT_SLOW_IN); + mAnimateUpBackgroundToMatchDrawer.start(); + if (!isLandscape()) { mSelectedRingerContainer.animate() .translationY(getTranslationInDrawerForRingerMode(mState.ringerModeInternal)) @@ -853,6 +880,10 @@ public class VolumeDialogImpl implements VolumeDialog, .start(); } + mAnimateUpBackgroundToMatchDrawer.setDuration(DRAWER_ANIMATION_DURATION); + mAnimateUpBackgroundToMatchDrawer.setInterpolator(Interpolators.FAST_OUT_SLOW_IN_REVERSE); + mAnimateUpBackgroundToMatchDrawer.reverse(); + mSelectedRingerContainer.animate() .translationX(0f) .translationY(0f) @@ -1524,7 +1555,7 @@ public class VolumeDialogImpl implements VolumeDialog, } final ColorStateList colorTint = useActiveColoring ? Utils.getColorAccent(mContext) - : Utils.getColorAttr(mContext, android.R.attr.colorForeground); + : Utils.getColorAttr(mContext, com.android.internal.R.attr.colorAccentSecondary); final int alpha = useActiveColoring ? Color.alpha(colorTint.getDefaultColor()) : getAlphaAttr(android.R.attr.secondaryContentAlpha); @@ -1532,18 +1563,24 @@ public class VolumeDialogImpl implements VolumeDialog, final ColorStateList bgTint = Utils.getColorAttr( mContext, android.R.attr.colorBackgroundFloating); + final ColorStateList inverseTextTint = Utils.getColorAttr( + mContext, com.android.internal.R.attr.textColorPrimaryInverse); + row.sliderProgressSolid.setTintList(colorTint); if (row.sliderBgIcon != null) { row.sliderBgIcon.setTintList(colorTint); } - row.sliderBgSolid.setTintList(bgTint); + if (row.sliderBgSolid != null) { + row.sliderBgSolid.setTintList(bgTint); + } + if (row.sliderProgressIcon != null) { row.sliderProgressIcon.setTintList(bgTint); } if (row.icon != null) { - row.icon.setImageTintList(colorTint); + row.icon.setImageTintList(inverseTextTint); row.icon.setImageAlpha(alpha); } @@ -1682,6 +1719,28 @@ public class VolumeDialogImpl implements VolumeDialog, }; } + /** + * Return the height of the 1-2 extra ringer options that are made visible when the ringer + * drawer is opened. + */ + private int getRingerDrawerOpenExtraHeight() { + return (mRingerCount - 1) * mRingerDrawerItemSize; + } + + /** + * Sets the top of the background drawable behind the container view for the ringer icon and the + * volume rows, depending on whether the ringer drawer is open or closed. + */ + private void setRingerAndRowsBackgroundTop(float drawerClosedAmount) { + if (mRingerAndRowsContainerBackground == null) { + return; + } + + final Rect bounds = mRingerAndRowsContainerBackground.copyBounds(); + bounds.top = (int) (drawerClosedAmount * getRingerDrawerOpenExtraHeight()); + mRingerAndRowsContainerBackground.setBounds(bounds); + } + private final VolumeDialogController.Callbacks mControllerCallbackH = new VolumeDialogController.Callbacks() { @Override