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

Commit 6cec9eda authored by Catherine Liang's avatar Catherine Liang
Browse files

Color Picker Fragment UX Polish 

Adjustments to the header, bottom sheet tabs, subheader and color
options to make sure they align with the most updated UX requirements.
Also made sure common ItemSpacing is used.

Before: https://screenshot.googleplex.com/8ZdxAhznKfP6K8z.png
After: https://screenshot.googleplex.com/5CRw2g3abxpTQv8.png

Bug: 269450711
Test: Manually verified new UI, made sure existing color picker unit
tests still pass.

Change-Id: Idb06ca5e7bf8b59ab21b34ffe1dbfb508f7a39e6
parent a0966662

res/layout/color_option_with_background.xml

+20 −21
Original line number Diff line number Diff line
@@ -22,8 +22,8 @@ 
    android:orientation="vertical" >

    <FrameLayout

        android:id="@+id/icon_container"

        android:layout_width="@dimen/option_tile_width"

        android:layout_height="@dimen/option_tile_width"

        android:layout_width="@dimen/option_item_size"

        android:layout_height="@dimen/option_item_size"

        android:importantForAccessibility="yes">



        <ImageView
@@ -43,41 +43,41 @@ 


        <ImageView

            android:id="@+id/color_preview_0"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_width="@dimen/component_color_chip_small_radius_default2"

            android:layout_height="@dimen/component_color_chip_small_radius_default2"

            android:layout_gravity="center"

            android:layout_marginRight="@dimen/color_seed_chip_margin"

            android:layout_marginBottom="@dimen/color_seed_chip_margin"

            android:layout_marginRight="@dimen/color_seed_chip_margin2"

            android:layout_marginBottom="@dimen/color_seed_chip_margin2"

            android:src="@drawable/color_chip_seed_filled0"

            android:importantForAccessibility="no"/>



        <ImageView

            android:id="@+id/color_preview_1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_width="@dimen/component_color_chip_small_radius_default2"

            android:layout_height="@dimen/component_color_chip_small_radius_default2"

            android:layout_gravity="center"

            android:layout_marginLeft="@dimen/color_seed_chip_margin"

            android:layout_marginBottom="@dimen/color_seed_chip_margin"

            android:layout_marginLeft="@dimen/color_seed_chip_margin2"

            android:layout_marginBottom="@dimen/color_seed_chip_margin2"

            android:src="@drawable/color_chip_seed_filled2"

            android:importantForAccessibility="no"/>



        <ImageView

            android:id="@+id/color_preview_2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_width="@dimen/component_color_chip_small_radius_default2"

            android:layout_height="@dimen/component_color_chip_small_radius_default2"

            android:layout_gravity="center"

            android:layout_marginRight="@dimen/color_seed_chip_margin"

            android:layout_marginTop="@dimen/color_seed_chip_margin"

            android:layout_marginRight="@dimen/color_seed_chip_margin2"

            android:layout_marginTop="@dimen/color_seed_chip_margin2"

            android:src="@drawable/color_chip_seed_filled1"

            android:importantForAccessibility="no"/>



        <ImageView

            android:id="@+id/color_preview_3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_width="@dimen/component_color_chip_small_radius_default2"

            android:layout_height="@dimen/component_color_chip_small_radius_default2"

            android:layout_gravity="center"

            android:layout_marginLeft="@dimen/color_seed_chip_margin"

            android:layout_marginTop="@dimen/color_seed_chip_margin"

            android:layout_marginLeft="@dimen/color_seed_chip_margin2"

            android:layout_marginTop="@dimen/color_seed_chip_margin2"

            android:src="@drawable/color_chip_seed_filled3"

            android:importantForAccessibility="no"/>

    </FrameLayout>
@@ -91,4 +91,3 @@ 
        android:visibility="gone"

        android:gravity="center" />

</LinearLayout>

res/layout/fragment_color_picker.xml

+18 −4
Original line number Diff line number Diff line
@@ -35,7 +35,7 @@ 
        android:layout_height="0dp"

        android:layout_weight="1"

        android:layout_marginHorizontal="24dp"

        android:paddingTop="36dp"

        android:paddingTop="20dp"

        android:paddingBottom="40dp"

        android:orientation="horizontal"

        android:gravity="center_vertical">
@@ -70,10 +70,11 @@ 


            <androidx.recyclerview.widget.RecyclerView

                android:id="@+id/color_type_tabs"

                android:layout_width="match_parent"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:clipToPadding="false"

                android:paddingHorizontal="16dp" />

                android:paddingHorizontal="16dp"

                android:layout_gravity="center_horizontal"/>



            <!--

            This is just an invisible placeholder put in place so that the parent keeps its height
@@ -94,7 +95,20 @@ 


        <View

            android:layout_width="0dp"

            android:layout_height="22dp" />

            android:layout_height="6dp" />



        <TextView

            android:id="@+id/color_type_tab_subhead"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:textColor="@color/text_color_secondary"

            android:textSize="12sp"

            android:gravity="center"

            android:paddingHorizontal="16dp"/>



        <View

            android:layout_width="0dp"

            android:layout_height="8dp" />



        <FrameLayout

            android:layout_width="match_parent"

res/values/dimens.xml

+13 −8
Original line number Diff line number Diff line
@@ -130,20 +130,25 @@ 
    <dimen name="beta_tag_background_width">46dp</dimen>

    <dimen name="beta_tag_background_height">24dp</dimen>



    <!-- For the color option section -->

    <!-- For the color picker section -->

    <!-- Dimension for the original color picker section -->

    <dimen name="color_options_container_top_margin">24dp</dimen>



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

    <!-- Dimension for the original color chip resource -->

    <dimen name="component_color_chip_small_radius_default">29dp</dimen>

    <dimen name="component_color_chip_small_diameter_default">58dp</dimen>

    <dimen name="color_seed_chip_margin">14dp</dimen>

    <!-- Dimension for the revamped UI color chip -->

    <dimen name="component_color_overflow_small_radius_default">20dp</dimen>

    <dimen name="component_color_overflow_small_diameter_default">40dp</dimen>

    <dimen name="component_color_selected_small_radius_default">22dp</dimen>

    <dimen name="component_color_selected_small_diameter_default">44dp</dimen>



    <!-- For the color page. -->

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



    <dimen name="component_color_chip_small_radius_default">29dp</dimen>

    <dimen name="component_color_chip_small_diameter_default">58dp</dimen>

    <dimen name="color_seed_chip_margin">14dp</dimen>

    <!-- For the color picker page. -->

    <!-- Dimension for the revamped UI color chip -->

    <dimen name="component_color_chip_small_radius_default2">24dp</dimen>

    <dimen name="component_color_chip_small_diameter_default2">48dp</dimen>

    <dimen name="color_seed_chip_margin2">11dp</dimen>



    <!-- Keyguard quick affordances -->

    <!-- Size for the container for the icon of a quick affordance for the lock screen in the picker experience. -->

res/values/strings.xml

+7 −1
Original line number Diff line number Diff line
@@ -311,11 +311,17 @@ 


    <!-- The title for the tab with colors from wallpaper. [CHAR_LIMIT=20]-->

    <string name="wallpaper_color_tab">Wallpaper colors</string>

    <!-- The subheader for the tab with colors from wallpaper. [CHAR_LIMIT=55]-->

    <string name="wallpaper_color_subheader">Icons, text, and more match colors in your wallpaper</string>

    <!-- The description on an item that shows a color obtained from the wallpaper

        (used mainly for accessibility). [CHAR_LIMIT=NONE] -->

    <string name="wallpaper_color_title">Wallpaper color</string>

    <!-- The title for the tab with a default set of color options. [CHAR_LIMIT=20]-->

    <string name="preset_color_tab">Basic colors</string>

    <!-- The revised title for the tab with a default set of color options. [CHAR_LIMIT=20]-->

    <string name="preset_color_tab_2">Other colors</string>

    <!-- The subheader for the tab with a default set of color options. [CHAR_LIMIT=55]-->

    <string name="preset_color_subheader">Choose any color for your icons, clock, and more</string>

    <!-- The text for A11y announcement when color changes. -->

    <string name="color_changed">Color changed</string>

    <!-- Title of a section of color selection option that obtains colors automatically from the
@@ -326,7 +332,7 @@ 
    color options.

    [CHAR LIMIT=32].

    -->

    <string name="color_picker_title">System Colors</string>

    <string name="color_picker_title">System colors</string>



    <!--

    Name of the slot on the "start" side of the bottom of the lock screen, where lock screen

src/com/android/customization/picker/clock/ui/viewmodel/ClockSettingsViewModel.kt

+1 −1
Original line number Diff line number Diff line
@@ -123,7 +123,7 @@ private constructor( 
                                context,

                                selectedColorId,

                            )

                            ?: (colorOptions[ColorType.BASIC_COLOR]

                            ?: (colorOptions[ColorType.PRESET_COLOR]

                                    ?.find { it.isSelected }

                                    ?.colorOption as? ColorBundle)

                                ?.toColorOptionViewModel(