[BugFix] Fix the media reco expanded layout when there is less than 6 items.

Screenshots:
- Before fix: http://screen/8PQhpUbKU88shZD
- After fix: http://screen/634Fw3ik5TKzrJ6; http://screen/67qumVeRFmEVThH

Bug: 186989643
Test: Studio builds
Change-Id: I7d7eacbfad1568c53f21060bc342c720c002b03d
This commit is contained in:
Cecilia
2021-05-02 15:52:47 -04:00
parent abc738e1c0
commit 08d2eee578
5 changed files with 67 additions and 31 deletions

View File

@@ -37,7 +37,14 @@
android:orientation="vertical"
app:layout_constraintGuide_percent="0.25" />
<ImageView
<androidx.constraintlayout.widget.Guideline
android:id="@+id/media_horizontal_center_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<com.android.internal.widget.CachingIconView
android:id="@+id/recommendation_card_icon"
android:layout_width="@dimen/qs_aa_media_rec_header_icon_size"
android:layout_height="@dimen/qs_aa_media_rec_header_icon_size"

View File

@@ -1279,9 +1279,10 @@
<dimen name="qs_media_disabled_seekbar_vertical_padding">36dp</dimen>
<!-- Size of Smartspace media recommendations cards in the QSPanel carousel -->
<dimen name="qs_aa_media_rec_header_icon_padding">10dp</dimen>
<dimen name="qs_aa_media_rec_header_icon_start_margin">10dp</dimen>
<dimen name="qs_aa_media_rec_header_icon_size">18dp</dimen>
<dimen name="qs_aa_media_rec_album_size">72dp</dimen>
<dimen name="qs_aa_media_rec_album_vertical_margin">8dp</dimen>
<dimen name="qq_aa_media_rec_header_text_size">16sp</dimen>
<!-- Window magnification -->

View File

@@ -22,8 +22,8 @@
android:id="@+id/recommendation_card_icon"
android:layout_width="@dimen/qs_aa_media_rec_header_icon_size"
android:layout_height="@dimen/qs_aa_media_rec_header_icon_size"
android:layout_marginTop="@dimen/qs_aa_media_rec_header_icon_padding"
android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_padding"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_start_margin"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
@@ -33,7 +33,7 @@
android:id="@+id/recommendation_card_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_padding"
android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_start_margin"
app:layout_constraintTop_toBottomOf="@id/recommendation_card_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
@@ -45,9 +45,12 @@
android:layout_height="@dimen/qs_aa_media_rec_album_size"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginBottom="@dimen/qs_media_padding"
app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
app:layout_constraintEnd_toStartOf="@id/media_cover2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintVertical_chainStyle="spread"
android:visibility="gone" />
<Constraint
@@ -64,6 +67,8 @@
android:id="@+id/media_cover2"
android:layout_width="@dimen/qs_aa_media_rec_album_size"
android:layout_height="@dimen/qs_aa_media_rec_album_size"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginBottom="@dimen/qs_media_padding"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/media_cover1"
@@ -85,6 +90,8 @@
android:id="@+id/media_cover3"
android:layout_width="@dimen/qs_aa_media_rec_album_size"
android:layout_height="@dimen/qs_aa_media_rec_album_size"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginBottom="@dimen/qs_media_padding"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/media_cover2"
@@ -112,7 +119,6 @@
app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
app:layout_constraintEnd_toStartOf="@id/media_cover5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_bias="1"
android:visibility="gone" />
<Constraint
@@ -134,7 +140,6 @@
app:layout_constraintStart_toEndOf="@+id/media_cover4"
app:layout_constraintEnd_toStartOf="@+id/media_cover6"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_bias="1"
android:visibility="gone" />
<Constraint

View File

@@ -23,7 +23,7 @@
android:layout_width="@dimen/qs_aa_media_rec_header_icon_size"
android:layout_height="@dimen/qs_aa_media_rec_header_icon_size"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_padding"
android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_start_margin"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
@@ -33,7 +33,7 @@
android:id="@+id/recommendation_card_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_padding"
android:layout_marginStart="@dimen/qs_aa_media_rec_header_icon_start_margin"
app:layout_constraintTop_toBottomOf="@id/recommendation_card_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/media_vertical_start_guideline"
@@ -44,11 +44,14 @@
android:layout_width="@dimen/qs_aa_media_rec_album_size"
android:layout_height="@dimen/qs_aa_media_rec_album_size"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginBottom="@dimen/qs_aa_media_rec_album_vertical_margin"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/media_cover4"
app:layout_constraintBottom_toTopOf="@+id/media_horizontal_center_guideline"
app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
app:layout_constraintEnd_toStartOf="@id/media_cover2"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_bias="0"
android:visibility="gone" />
<Constraint
@@ -66,11 +69,14 @@
android:layout_width="@dimen/qs_aa_media_rec_album_size"
android:layout_height="@dimen/qs_aa_media_rec_album_size"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginBottom="@dimen/qs_aa_media_rec_album_vertical_margin"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/media_cover5"
app:layout_constraintBottom_toTopOf="@+id/media_horizontal_center_guideline"
app:layout_constraintStart_toEndOf="@id/media_cover1"
app:layout_constraintEnd_toStartOf="@id/media_cover3"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_bias="0"
android:visibility="gone" />
<Constraint
@@ -88,12 +94,15 @@
android:layout_width="@dimen/qs_aa_media_rec_album_size"
android:layout_height="@dimen/qs_aa_media_rec_album_size"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginBottom="@dimen/qs_aa_media_rec_album_vertical_margin"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/media_cover6"
app:layout_constraintBottom_toTopOf="@+id/media_horizontal_center_guideline"
app:layout_constraintStart_toEndOf="@id/media_cover2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_bias="0"
android:visibility="gone" />
<Constraint
@@ -110,14 +119,15 @@
android:id="@+id/media_cover4"
android:layout_width="@dimen/qs_aa_media_rec_album_size"
android:layout_height="@dimen/qs_aa_media_rec_album_size"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginTop="@dimen/qs_aa_media_rec_album_vertical_margin"
android:layout_marginBottom="@dimen/qs_media_padding"
app:layout_constraintTop_toBottomOf="@+id/media_cover1"
app:layout_constraintTop_toBottomOf="@+id/media_horizontal_center_guideline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/media_vertical_start_guideline"
app:layout_constraintEnd_toStartOf="@id/media_cover5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_bias="1"
android:visibility="gone" />
<Constraint
@@ -134,14 +144,15 @@
android:id="@+id/media_cover5"
android:layout_width="@dimen/qs_aa_media_rec_album_size"
android:layout_height="@dimen/qs_aa_media_rec_album_size"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginTop="@dimen/qs_aa_media_rec_album_vertical_margin"
android:layout_marginBottom="@dimen/qs_media_padding"
app:layout_constraintTop_toBottomOf="@+id/media_cover2"
app:layout_constraintTop_toBottomOf="@+id/media_horizontal_center_guideline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/media_cover4"
app:layout_constraintEnd_toStartOf="@+id/media_cover6"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_bias="1"
android:visibility="gone" />
<Constraint
@@ -158,14 +169,16 @@
android:id="@+id/media_cover6"
android:layout_width="@dimen/qs_aa_media_rec_album_size"
android:layout_height="@dimen/qs_aa_media_rec_album_size"
android:layout_marginTop="@dimen/qs_media_padding"
android:layout_marginTop="@dimen/qs_aa_media_rec_album_vertical_margin"
android:layout_marginBottom="@dimen/qs_media_padding"
app:layout_constraintTop_toBottomOf="@id/media_cover3"
app:layout_constraintTop_toBottomOf="@id/media_horizontal_center_guideline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/media_cover5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_bias="1"
android:visibility="gone" />
<Constraint

View File

@@ -486,8 +486,10 @@ public class MediaControlPanel {
ConstraintSet collapsedSet = mMediaViewController.getCollapsedLayout();
int mediaRecommendationNum = Math.min(mediaRecommendationList.size(),
MEDIA_RECOMMENDATION_MAX_NUM);
for (int i = 0; i < mediaRecommendationNum; i++) {
SmartspaceAction recommendation = mediaRecommendationList.get(i);
for (int itemIndex = 0, uiComponentIndex = 0;
itemIndex < mediaRecommendationNum && uiComponentIndex < mediaRecommendationNum;
itemIndex++) {
SmartspaceAction recommendation = mediaRecommendationList.get(itemIndex);
if (recommendation.getIcon() == null) {
Log.w(TAG, "No media cover is provided. Skipping this item...");
continue;
@@ -511,13 +513,13 @@ public class MediaControlPanel {
}
// Set up media source app's logo.
ImageView mediaSourceLogoImageView = mediaLogoItems.get(i);
ImageView mediaSourceLogoImageView = mediaLogoItems.get(uiComponentIndex);
mediaSourceLogoImageView.setImageDrawable(icon);
// TODO(b/186699032): Tint the app logo using the accent color.
mediaSourceLogoImageView.setColorFilter(backgroundColor, PorterDuff.Mode.XOR);
// Set up media item cover.
ImageView mediaCoverImageView = mediaCoverItems.get(i);
ImageView mediaCoverImageView = mediaCoverItems.get(uiComponentIndex);
mediaCoverImageView.setImageIcon(recommendation.getIcon());
// Set up the click listener if applicable.
@@ -527,15 +529,23 @@ public class MediaControlPanel {
target.getSmartspaceTargetId(),
null);
if (i < MEDIA_RECOMMENDATION_ITEMS_PER_ROW) {
setVisibleAndAlpha(collapsedSet, mediaCoverItemsResIds.get(i), true);
setVisibleAndAlpha(collapsedSet, mediaLogoItemsResIds.get(i), true);
if (uiComponentIndex < MEDIA_RECOMMENDATION_ITEMS_PER_ROW) {
setVisibleAndAlpha(collapsedSet,
mediaCoverItemsResIds.get(uiComponentIndex), true);
setVisibleAndAlpha(collapsedSet,
mediaLogoItemsResIds.get(uiComponentIndex), true);
} else {
setVisibleAndAlpha(collapsedSet, mediaCoverItemsResIds.get(i), false);
setVisibleAndAlpha(collapsedSet, mediaLogoItemsResIds.get(i), false);
setVisibleAndAlpha(collapsedSet,
mediaCoverItemsResIds.get(uiComponentIndex), false);
setVisibleAndAlpha(collapsedSet,
mediaLogoItemsResIds.get(uiComponentIndex), false);
}
setVisibleAndAlpha(expandedSet, mediaCoverItemsResIds.get(i), true);
setVisibleAndAlpha(expandedSet, mediaLogoItemsResIds.get(i), true);
setVisibleAndAlpha(expandedSet,
mediaCoverItemsResIds.get(uiComponentIndex), true);
setVisibleAndAlpha(expandedSet,
mediaLogoItemsResIds.get(uiComponentIndex), true);
uiComponentIndex++;
}
// Set up long press to show guts setting panel.