Bubbles styling: flyout changes

- no longer show a pointer with the flyout
- use the same color as the notifications
- increase the padding slightly

Test: manual - create some bubbles and observe the
        flyout
Bug: 183657745
Change-Id: I21ac5c1ce187e553e94ec41c81f9b43e8e914658
This commit is contained in:
Mady Mellor
2021-05-11 16:06:37 -07:00
parent 76fa21b5dc
commit 56b1e99d02
2 changed files with 12 additions and 7 deletions

View File

@@ -97,7 +97,7 @@
<!-- How much the bubble flyout text container is elevated. -->
<dimen name="bubble_flyout_elevation">4dp</dimen>
<!-- How much padding is around the left and right sides of the flyout text. -->
<dimen name="bubble_flyout_padding_x">12dp</dimen>
<dimen name="bubble_flyout_padding_x">14dp</dimen>
<!-- How much padding is around the top and bottom of the flyout text. -->
<dimen name="bubble_flyout_padding_y">10dp</dimen>
<!-- Size of the triangle that points from the flyout to the bubble stack. -->

View File

@@ -65,6 +65,9 @@ public class BubbleFlyoutView extends FrameLayout {
private static final long FLYOUT_FADE_OUT_DURATION = 150L;
private static final long FLYOUT_FADE_IN_DURATION = 250L;
// Whether the flyout view should show a pointer to the bubble.
private static final boolean SHOW_POINTER = false;
private final int mFlyoutPadding;
private final int mFlyoutSpaceFromBubble;
private final int mPointerSize;
@@ -166,14 +169,16 @@ public class BubbleFlyoutView extends FrameLayout {
final Resources res = getResources();
mFlyoutPadding = res.getDimensionPixelSize(R.dimen.bubble_flyout_padding_x);
mFlyoutSpaceFromBubble = res.getDimensionPixelSize(R.dimen.bubble_flyout_space_from_bubble);
mPointerSize = res.getDimensionPixelSize(R.dimen.bubble_flyout_pointer_size);
mPointerSize = SHOW_POINTER
? res.getDimensionPixelSize(R.dimen.bubble_flyout_pointer_size)
: 0;
mBubbleElevation = res.getDimensionPixelSize(R.dimen.bubble_elevation);
mFlyoutElevation = res.getDimensionPixelSize(R.dimen.bubble_flyout_elevation);
final TypedArray ta = mContext.obtainStyledAttributes(
new int[] {
android.R.attr.colorBackgroundFloating,
com.android.internal.R.attr.colorSurface,
android.R.attr.dialogCornerRadius});
mFloatingBackgroundColor = ta.getColor(0, Color.WHITE);
mCornerRadius = ta.getDimensionPixelSize(1, 0);
@@ -182,7 +187,7 @@ public class BubbleFlyoutView extends FrameLayout {
// Add padding for the pointer on either side, onDraw will draw it in this space.
setPadding(mPointerSize, 0, mPointerSize, 0);
setWillNotDraw(false);
setClipChildren(false);
setClipChildren(!SHOW_POINTER);
setTranslationZ(mFlyoutElevation);
setOutlineProvider(new ViewOutlineProvider() {
@Override
@@ -461,6 +466,7 @@ public class BubbleFlyoutView extends FrameLayout {
/** Renders the 'pointer' triangle that points from the flyout to the bubble stack. */
private void renderPointerTriangle(
Canvas canvas, float currentFlyoutWidth, float currentFlyoutHeight) {
if (!SHOW_POINTER) return;
canvas.save();
// Translation to apply for the 'retraction' effect as the flyout collapses.
@@ -488,13 +494,12 @@ public class BubbleFlyoutView extends FrameLayout {
// current position.
relevantTriangle.getOutline(mTriangleOutline);
mTriangleOutline.offset((int) arrowTranslationX, (int) arrowTranslationY);
canvas.restore();
}
/** Builds an outline that includes the transformed flyout background and triangle. */
private void getOutline(Outline outline) {
if (!mTriangleOutline.isEmpty()) {
if (!mTriangleOutline.isEmpty() || !SHOW_POINTER) {
// Draw the rect into the outline as a path so we can merge the triangle path into it.
final Path rectPath = new Path();
final float interpolatedRadius = getInterpolatedRadius();
@@ -503,7 +508,7 @@ public class BubbleFlyoutView extends FrameLayout {
outline.setPath(rectPath);
// Get rid of the triangle path once it has disappeared behind the flyout.
if (mPercentStillFlyout > 0.5f) {
if (SHOW_POINTER && mPercentStillFlyout > 0.5f) {
outline.mPath.addPath(mTriangleOutline.mPath);
}