Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit b8ca4b84 authored by Beth Thibodeau's avatar Beth Thibodeau
Browse files

Update media controls layout 

Changes to match S mocks
- corner radius to match notifications
- solid background for device chip
- bigger album art

By default this only shows the icon for app/device, but this can be
changed with flags:

adb shell setprop persist.sysui.qs_media_show_app_name true
adb shell setprop persist.sysui.qs_media_show_device_name true
adb shell am crash com.android.systemui

Bug: 176177555
Test: visual
Test: atest MediaControlPanelTest
Change-Id: I76c3130df252baee3f5d3009f9098f77bf115f3e
parent 2451ee45

packages/SystemUI/res-keyguard/drawable/qs_media_seamless_background.xml

+2 −3
Original line number Diff line number Diff line
@@ -17,9 +17,8 @@ 
<ripple xmlns:android="http://schemas.android.com/apk/res/android"

    android:color="@color/media_seamless_border">

    <item android:id="@android:id/background">

        <shape

            android:color="@android:color/transparent">

            <stroke android:width="1dp" android:color="@color/media_seamless_border"/>

        <shape android:shape="rectangle">

            <solid android:color="@color/media_seamless_border" />

            <corners android:radius="24dp"/>

        </shape>

    </item>

packages/SystemUI/res/drawable/qs_media_background.xml

+1 −1
Original line number Diff line number Diff line
@@ -17,4 +17,4 @@ 
<com.android.systemui.media.IlluminationDrawable

    xmlns:systemui="http://schemas.android.com/apk/res-auto"

    systemui:highlight="15"

    systemui:cornerRadius="?android:attr/dialogCornerRadius" />
 
 No newline at end of file
 
    systemui:cornerRadius="@dimen/notification_corner_radius" />
 
 No newline at end of file

packages/SystemUI/res/layout/media_view.xml

+37 −32
Original line number Diff line number Diff line
@@ -64,7 +64,7 @@ 
    </FrameLayout>



    <!--  Actions must be ordered left-to-right even in RTL layout.  However, they appear in a chain

    with the album art and the title, and must as a group appear at the end of that chain.  This is

    with the album art, and must as a group appear at the end of that chain.  This is

    accomplished by having all actions appear in a LTR chain within the parent, and then biasing it

    to the right side, then this barrier is used to bound the text views.  -->

    <androidx.constraintlayout.widget.Barrier
@@ -72,10 +72,10 @@ 
        android:layout_width="0dp"

        android:layout_height="0dp"

        android:orientation="vertical"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintTop_toBottomOf="@id/header_artist"

        app:barrierDirection="start"

        app:constraint_referenced_ids="action0,action1,action2,action3,action4"

        />

        app:layout_constraintHorizontal_bias="0" />



    <ImageButton

        android:id="@+id/action0"
@@ -111,36 +111,39 @@ 
    <ImageView

        android:id="@+id/album_art"

        android:layout_width="@dimen/qs_media_album_size"

        android:layout_height="@dimen/qs_media_album_size" />

        android:layout_height="@dimen/qs_media_album_size"

        android:layout_gravity="center_vertical" />



    <!-- Seamless Output Switcher -->

    <LinearLayout

        android:id="@+id/media_seamless"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:gravity="center_vertical|end"

        android:forceHasOverlappingRendering="false">

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:foreground="@drawable/qs_media_seamless_background"

            android:background="@drawable/qs_media_light_source"

            android:orientation="horizontal"

        android:forceHasOverlappingRendering="false"

        android:paddingStart="12dp"

        android:paddingTop="6dp"

        android:paddingEnd="12dp"

        android:paddingBottom="6dp">



            android:padding="6dp"

            android:contentDescription="@string/quick_settings_media_device_label">

            <ImageView

                android:id="@+id/media_seamless_image"

                android:layout_width="@dimen/qs_seamless_icon_size"

                android:layout_height="@dimen/qs_seamless_icon_size"

            android:layout_marginEnd="8dp"

            android:layout_gravity="center_vertical"

                android:layout_gravity="center"

                android:tint="@color/media_primary_text"

                android:src="@*android:drawable/ic_media_seamless" />



            <TextView

                android:visibility="gone"

                android:id="@+id/media_seamless_text"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="center_vertical"

                android:layout_marginStart="8dp"

                android:fontFamily="@*android:string/config_headlineFontFamily"

                android:singleLine="true"

                android:text="@*android:string/ext_media_seamless_action"
@@ -148,6 +151,7 @@ 
                android:textDirection="locale"

                android:textSize="14sp" />

        </LinearLayout>

    </LinearLayout>



    <ImageView

        android:id="@+id/media_seamless_fallback"
@@ -206,8 +210,9 @@ 
    <com.android.internal.widget.CachingIconView

        android:id="@+id/icon"

        android:tint="@color/media_primary_text"

        android:layout_width="@dimen/qs_media_icon_size"

        android:layout_height="@dimen/qs_media_icon_size" />

        android:layout_width="48dp"

        android:layout_height="48dp"

        android:layout_margin="6dp" />



    <!-- Constraints are set here as they are the same regardless of host -->

    <TextView

packages/SystemUI/res/values/dimens.xml

+1 −2
Original line number Diff line number Diff line
@@ -1179,10 +1179,9 @@ 
    <dimen name="new_qs_vertical_margin">8dp</dimen>



    <!-- Size of media cards in the QSPanel carousel -->

    <dimen name="qs_media_width">350dp</dimen>

    <dimen name="qs_media_padding">16dp</dimen>

    <dimen name="qs_media_panel_outer_padding">16dp</dimen>

    <dimen name="qs_media_album_size">52dp</dimen>

    <dimen name="qs_media_album_size">120dp</dimen>

    <dimen name="qs_media_icon_size">16dp</dimen>

    <dimen name="qs_center_guideline_padding">10dp</dimen>

    <dimen name="qs_seamless_icon_size">@dimen/qs_media_icon_size</dimen>

packages/SystemUI/res/xml/media_collapsed.xml

+50 −41
Original line number Diff line number Diff line
@@ -22,36 +22,39 @@ 
        android:layout_width="@dimen/qs_media_icon_size"

        android:layout_height="@dimen/qs_media_icon_size"

        android:layout_marginStart="18dp"

        app:layout_constraintTop_toTopOf="@id/app_name"

        app:layout_constraintBottom_toBottomOf="@id/app_name"

        app:layout_constraintStart_toStartOf="parent"

        android:layout_marginTop="@dimen/qs_media_panel_outer_padding"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintStart_toEndOf="@id/album_art"

        />



    <Constraint

        android:id="@+id/app_name"

        android:layout_width="0dp"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="@dimen/qs_center_guideline_padding"

        android:layout_marginStart="10dp"

        android:layout_marginTop="20dp"

        app:layout_constraintTop_toTopOf="parent"

        android:layout_marginStart="8dp"

        app:layout_constraintTop_toTopOf="@id/icon"

        app:layout_constraintBottom_toBottomOf="@id/icon"

        app:layout_constraintStart_toEndOf="@id/icon"

        app:layout_constraintEnd_toStartOf="@id/center_vertical_guideline"

        app:layout_constraintEnd_toStartOf="@id/media_seamless"

        app:layout_constraintHorizontal_chainStyle="spread_inside"

        app:layout_constrainedWidth="true"

        app:layout_constraintHorizontal_bias="0"

        />



    <Constraint

        android:id="@+id/media_seamless"

        android:layout_width="wrap_content"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constrainedWidth="true"

        app:layout_constraintWidth_min="60dp"

        app:layout_constraintStart_toEndOf="@id/center_vertical_guideline"

        app:layout_constraintStart_toEndOf="@id/app_name"

        app:layout_constraintHorizontal_chainStyle="spread_inside"

        app:layout_constraintHorizontal_bias="1"

        android:layout_marginTop="@dimen/qs_media_panel_outer_padding"

        android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"

        app:layout_constrainedWidth="true"

        app:layout_constraintWidth_min="48dp"

        app:layout_constraintHeight_min="48dp"

        android:layout_marginEnd="@dimen/qs_center_guideline_padding"

        android:layout_marginStart="@dimen/qs_center_guideline_padding"

        />
@@ -64,22 +67,23 @@ 
        android:alpha="0.5"

        android:visibility="gone"

        app:layout_constraintHorizontal_bias="1"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toTopOf="@id/app_name"

        app:layout_constraintBottom_toBottomOf="@id/app_name"

        app:layout_constraintTop_toTopOf="@id/icon"

        app:layout_constraintBottom_toBottomOf="@id/icon"

        app:layout_constraintStart_toEndOf="@id/center_vertical_guideline"

        app:layout_constraintEnd_toEndOf="parent"

        />



    <Constraint

        android:id="@+id/album_art"

        android:layout_width="@dimen/qs_media_album_size"

        android:layout_height="@dimen/qs_media_album_size"

        android:layout_marginTop="16dp"

        android:layout_marginTop="@dimen/qs_media_panel_outer_padding"

        android:layout_marginStart="@dimen/qs_media_panel_outer_padding"

        android:layout_marginBottom="24dp"

        app:layout_constraintTop_toBottomOf="@id/icon"

        android:layout_marginBottom="@dimen/qs_media_panel_outer_padding"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toStartOf="@id/media_action_barrier"

        app:layout_constraintHorizontal_bias="0"

        />



    <!-- Song name -->
@@ -87,13 +91,14 @@ 
        android:id="@+id/header_title"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="17dp"

        android:layout_marginStart="16dp"

        android:layout_marginTop="@dimen/qqs_media_spacing"

        android:layout_marginStart="@dimen/qqs_media_spacing"

        android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"

        app:layout_constrainedWidth="true"

        app:layout_constraintTop_toBottomOf="@id/app_name"

        app:layout_constraintTop_toBottomOf="@id/icon"

        app:layout_constraintBottom_toTopOf="@id/header_artist"

        app:layout_constraintStart_toEndOf="@id/album_art"

        app:layout_constraintEnd_toStartOf="@id/media_action_barrier"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0"/>



    <!-- Artist name -->
@@ -102,12 +107,12 @@ 
        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="3dp"

        android:layout_marginBottom="24dp"

        android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"

        android:layout_marginBottom="@dimen/qqs_media_spacing"

        app:layout_constrainedWidth="true"

        app:layout_constraintTop_toBottomOf="@id/header_title"

        app:layout_constraintStart_toStartOf="@id/header_title"

        app:layout_constraintEnd_toStartOf="@id/media_action_barrier"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0"/>



    <!-- Seek Bar -->
@@ -140,15 +145,15 @@ 
        android:id="@+id/action0"

        android:layout_width="48dp"

        android:layout_height="48dp"

        android:layout_marginStart="4dp"

        android:layout_marginStart="@dimen/qqs_media_spacing"

        android:layout_marginEnd="4dp"

        android:layout_marginTop="18dp"

        android:layout_marginBottom="@dimen/qs_media_panel_outer_padding"

        android:visibility="gone"

        app:layout_constraintHorizontal_chainStyle="packed"

        app:layout_constraintTop_toBottomOf="@id/app_name"

        app:layout_constraintTop_toBottomOf="@id/header_artist"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toLeftOf="@id/action1"

        app:layout_constraintHorizontal_bias="1"

        app:layout_constraintHorizontal_bias="0"

        >

    </Constraint>
@@ -158,8 +163,9 @@ 
        android:layout_height="48dp"

        android:layout_marginStart="4dp"

        android:layout_marginEnd="4dp"

        android:layout_marginTop="18dp"

        app:layout_constraintTop_toBottomOf="@id/app_name"

        android:layout_marginBottom="@dimen/qs_media_panel_outer_padding"

        app:layout_constraintTop_toBottomOf="@id/header_artist"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toRightOf="@id/action0"

        app:layout_constraintRight_toLeftOf="@id/action2"

        >
@@ -171,8 +177,9 @@ 
        android:layout_height="48dp"

        android:layout_marginStart="4dp"

        android:layout_marginEnd="4dp"

        android:layout_marginTop="18dp"

        app:layout_constraintTop_toBottomOf="@id/app_name"

        android:layout_marginBottom="@dimen/qs_media_panel_outer_padding"

        app:layout_constraintTop_toBottomOf="@id/header_artist"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toRightOf="@id/action1"

        app:layout_constraintRight_toLeftOf="@id/action3"

        >
@@ -184,8 +191,9 @@ 
        android:layout_height="48dp"

        android:layout_marginStart="4dp"

        android:layout_marginEnd="4dp"

        android:layout_marginTop="18dp"

        app:layout_constraintTop_toBottomOf="@id/app_name"

        android:layout_marginBottom="@dimen/qs_media_panel_outer_padding"

        app:layout_constraintTop_toBottomOf="@id/header_artist"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toRightOf="@id/action2"

        app:layout_constraintRight_toLeftOf="@id/action4"

        >
@@ -196,11 +204,12 @@ 
        android:layout_width="48dp"

        android:layout_height="48dp"

        android:layout_marginStart="4dp"

        android:layout_marginEnd="4dp"

        android:layout_marginEnd="@dimen/qs_media_panel_outer_padding"

        android:visibility="gone"

        android:layout_marginTop="18dp"

        android:layout_marginBottom="@dimen/qs_media_panel_outer_padding"

        app:layout_constraintHorizontal_chainStyle="packed"

        app:layout_constraintTop_toBottomOf="@id/app_name"

        app:layout_constraintTop_toBottomOf="@id/header_artist"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toRightOf="@id/action3"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintHorizontal_bias="0"