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

Commit 9dbe02f1 authored by chihhangchuang's avatar chihhangchuang
Browse files

Add new preview UI for theme picker 

- Copied some reviewed part(UI only) from ag/11490179, and added some new code for UI. Will use ag/11490179 to keep going the scale part.
Mock:
https://docs.google.com/presentation/d/15JadcGi5k1_0znUN_XdFpU7UxeXwxjK3Y7LxvhW5ETM/edit?ts=5e69a05c#slide=id.g733fc3779b_39_0

Screenshot:
https://screenshot.googleplex.com/srobRRL70GT.png
https://screenshot.googleplex.com/1DZRPJdYrr8.png
https://screenshot.googleplex.com/G0C08ZgdVsS.png

Test: Manually
Bug: 146475648
Change-Id: Iaa7cba5391a363ca03dfdcf661a41723abf25504
parent cb6d3c38

res/layout/theme_preview_app_icon_shape.xml

0 → 100644
+122 −0
Original line number Diff line number Diff line 
<?xml version="1.0" encoding="utf-8"?>

<!--

     Copyright (C) 2020 The Android Open Source Project



     Licensed under the Apache License, Version 2.0 (the "License");

     you may not use this file except in compliance with the License.

     You may obtain a copy of the License at



          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.

-->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:paddingHorizontal="@dimen/preview_theme_app_icon_shape_padding_horizontal"

    android:orientation="vertical">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingTop="@dimen/preview_theme_app_icon_shape_padding_top"

        android:orientation="horizontal">



        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:gravity="center_horizontal"

            android:orientation="vertical">

            <ImageView

                android:id="@+id/shape_preview_icon_0"

                android:layout_width="@dimen/preview_theme_shape_size"

                android:layout_height="@dimen/preview_theme_shape_size"

                android:elevation="4dp"/>

            <TextView

                android:id="@+id/shape_preview_icon_app_name_0"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginTop="@dimen/preview_theme_app_icon_shape_text_margin_top"

                android:textSize="@dimen/preview_theme_app_icon_shape_text_size"

                android:lineHeight="20dp"/>

        </LinearLayout>



        <Space

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"/>



        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:gravity="center_horizontal"

            android:orientation="vertical">

            <ImageView

                android:id="@+id/shape_preview_icon_1"

                android:layout_width="@dimen/preview_theme_shape_size"

                android:layout_height="@dimen/preview_theme_shape_size"

                android:elevation="4dp"/>

            <TextView

                android:id="@+id/shape_preview_icon_app_name_1"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginTop="@dimen/preview_theme_app_icon_shape_text_margin_top"

                android:textSize="@dimen/preview_theme_app_icon_shape_text_size"

                android:lineHeight="20dp"/>

        </LinearLayout>



    </LinearLayout>



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingTop="@dimen/preview_theme_app_icon_shape_padding_top"

        android:orientation="horizontal">

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:gravity="center_horizontal"

            android:orientation="vertical">

            <ImageView

                android:id="@+id/shape_preview_icon_2"

                android:layout_width="@dimen/preview_theme_shape_size"

                android:layout_height="@dimen/preview_theme_shape_size"

                android:elevation="4dp"/>

            <TextView

                android:id="@+id/shape_preview_icon_app_name_2"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginTop="@dimen/preview_theme_app_icon_shape_text_margin_top"

                android:textSize="@dimen/preview_theme_app_icon_shape_text_size"

                android:lineHeight="20dp"/>

        </LinearLayout>



        <Space

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"/>



        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:gravity="center_horizontal"

            android:orientation="vertical">

            <ImageView

                android:id="@+id/shape_preview_icon_3"

                android:layout_width="@dimen/preview_theme_shape_size"

                android:layout_height="@dimen/preview_theme_shape_size"

                android:elevation="4dp"/>

            <TextView

                android:id="@+id/shape_preview_icon_app_name_3"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginTop="@dimen/preview_theme_app_icon_shape_text_margin_top"

                android:textSize="@dimen/preview_theme_app_icon_shape_text_size"

                android:lineHeight="20dp"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

res/layout/theme_preview_card_v2.xml

+1 −3
Original line number Diff line number Diff line
@@ -35,7 +35,5 @@ 
    <FrameLayout

        android:id="@+id/theme_preview_container"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:paddingVertical="@dimen/preview_card_top_padding"

        android:paddingHorizontal="@dimen/preview_card_padding"/>

        android:layout_height="match_parent"/>

</androidx.cardview.widget.CardView>
 
 No newline at end of file

res/layout/theme_preview_color_icons.xml

0 → 100644
+169 −0
Original line number Diff line number Diff line 
<?xml version="1.0" encoding="utf-8"?>

<!--

     Copyright (C) 2020 The Android Open Source Project



     Licensed under the Apache License, Version 2.0 (the "License");

     you may not use this file except in compliance with the License.

     You may obtain a copy of the License at



          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.

-->

<androidx.cardview.widget.CardView

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

    android:id="@+id/color_icons_section"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:background="@color/primary_color">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingHorizontal="@dimen/preview_theme_color_icons_padding_horizontal"

        android:orientation="vertical">



        <!-- Title -->

        <TextView

            android:id="@+id/color_icons_section_title"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="@dimen/preview_theme_color_icons_title_margin_top"

            android:layout_marginBottom="@dimen/preview_theme_color_icons_title_margin_bottom"

            android:text="@string/theme_preview_icons_section_title"

            android:textSize="@dimen/preview_theme_color_icons_title_text_size"

            android:lineHeight="16dp"

            android:gravity="center"/>



        <!-- QS icons -->

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal">

            <FrameLayout

                android:layout_width="@dimen/preview_theme_color_icons_icon_size"

                android:layout_height="@dimen/preview_theme_color_icons_icon_size">

                <ImageView

                    android:id="@+id/preview_color_qs_0_bg"

                    android:layout_width="@dimen/preview_theme_color_icons_icon_size"

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

                <ImageView

                    android:id="@+id/preview_color_qs_0_icon"

                    android:layout_width="@dimen/preview_theme_color_icons_tile_size"

                    android:layout_height="@dimen/preview_theme_color_icons_tile_size"

                    android:tint="@color/tile_enabled_icon_color"

                    android:layout_gravity="center"/>

            </FrameLayout>

            <Space

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="1"/>

            <FrameLayout

                android:layout_width="@dimen/preview_theme_color_icons_icon_size"

                android:layout_height="@dimen/preview_theme_color_icons_icon_size"

                android:layout_gravity="center_horizontal">

                <ImageView

                    android:id="@+id/preview_color_qs_1_bg"

                    android:layout_width="@dimen/preview_theme_color_icons_icon_size"

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

                <ImageView

                    android:id="@+id/preview_color_qs_1_icon"

                    android:layout_width="@dimen/preview_theme_color_icons_tile_size"

                    android:layout_height="@dimen/preview_theme_color_icons_tile_size"

                    android:tint="@color/tile_enabled_icon_color"

                    android:layout_gravity="center"/>

            </FrameLayout>

            <Space

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="1"/>

            <FrameLayout

                android:layout_width="@dimen/preview_theme_color_icons_icon_size"

                android:layout_height="@dimen/preview_theme_color_icons_icon_size">

                <ImageView

                    android:id="@+id/preview_color_qs_2_bg"

                    android:layout_width="@dimen/preview_theme_color_icons_icon_size"

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

                <ImageView

                    android:id="@+id/preview_color_qs_2_icon"

                    android:layout_width="@dimen/preview_theme_color_icons_tile_size"

                    android:layout_height="@dimen/preview_theme_color_icons_tile_size"

                    android:tint="@color/tile_enabled_icon_color"

                    android:layout_gravity="center"/>

            </FrameLayout>

            <Space

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="1"/>

            <FrameLayout

                android:layout_width="@dimen/preview_theme_color_icons_icon_size"

                android:layout_height="@dimen/preview_theme_color_icons_icon_size">

                <ImageView

                    android:id="@+id/preview_color_qs_3_bg"

                    android:layout_width="@dimen/preview_theme_color_icons_icon_size"

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

                <ImageView

                    android:id="@+id/preview_color_qs_3_icon"

                    android:layout_width="@dimen/preview_theme_color_icons_tile_size"

                    android:layout_height="@dimen/preview_theme_color_icons_tile_size"

                    android:tint="@color/tile_enabled_icon_color"

                    android:layout_gravity="center"/>

            </FrameLayout>

        </LinearLayout>



        <!-- Icons of CheckBox/RadioButton/Switch. -->

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="@dimen/preview_theme_color_icons_buttons_margin_top"

            android:layout_marginBottom="@dimen/preview_theme_color_icons_buttons_margin_bottom"

            android:orientation="horizontal">

            <FrameLayout

                android:layout_width="@dimen/preview_theme_icon_size"

                android:layout_height="@dimen/preview_theme_icon_size">

                <CheckBox

                    android:id="@+id/preview_check_selected"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:checked="true"

                    android:enabled="false"/>

            </FrameLayout>

            <Space

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="1" />

            <FrameLayout

                android:layout_width="@dimen/preview_theme_icon_size"

                android:layout_height="@dimen/preview_theme_icon_size">

                <RadioButton

                    android:id="@+id/preview_radio_selected"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:checked="true"

                    android:enabled="false"/>

            </FrameLayout>

            <Space

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:layout_weight="1" />

            <FrameLayout

                android:layout_width="@dimen/preview_theme_icon_size"

                android:layout_height="@dimen/preview_theme_icon_size">

                <Switch

                    android:id="@+id/preview_toggle_selected"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:checked="true"

                    android:enabled="false"/>

            </FrameLayout>

        </LinearLayout>



    </LinearLayout>

</androidx.cardview.widget.CardView>

res/layout/theme_preview_content_v2.xml

+14 −35
Original line number Diff line number Diff line
@@ -18,50 +18,29 @@ 
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingTop="@dimen/preview_theme_content_padding_top"

    android:paddingHorizontal="@dimen/preview_theme_content_padding"

    android:paddingBottom="@dimen/preview_theme_content_padding"

    android:orientation="vertical">



    <include layout="@layout/theme_preview_topbar" />



    <!-- App icons for shapes. -->

    <GridLayout

    <TextView

        android:id="@+id/smart_space_date"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:orientation="horizontal"

        android:columnCount="2"

        android:rowCount="2"

        android:useDefaultMargins="true"

        android:layout_marginTop="12dp">

        android:textSize="@dimen/preview_theme_smart_space_date_size"

        android:lineHeight="24dp"

        android:gravity="center"

        android:layout_marginTop="@dimen/preview_theme_smart_space_margin_top"/>



        <ImageView

            android:id="@+id/shape_preview_icon_0"

            android:layout_width="@dimen/preview_theme_shape_size"

            android:layout_height="@dimen/preview_theme_shape_size"

            android:layout_gravity="start"

            android:elevation="4dp"/>

        <ImageView

            android:id="@+id/shape_preview_icon_1"

            android:layout_width="@dimen/preview_theme_shape_size"

            android:layout_height="@dimen/preview_theme_shape_size"

            android:layout_gravity="end"

            android:elevation="4dp"/>

    <include layout="@layout/theme_preview_app_icon_shape" />



        <ImageView

            android:id="@+id/shape_preview_icon_2"

            android:layout_width="@dimen/preview_theme_shape_size"

            android:layout_height="@dimen/preview_theme_shape_size"

            android:layout_gravity="start"

            android:elevation="4dp"/>



        <ImageView

            android:id="@+id/shape_preview_icon_3"

            android:layout_width="@dimen/preview_theme_shape_size"

            android:layout_height="@dimen/preview_theme_shape_size"

            android:layout_gravity="end"

            android:elevation="4dp"/>

    </GridLayout>

    <include layout="@layout/theme_preview_color_icons"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="@dimen/preview_theme_color_icons_margin_top"/>



    <!-- Placeholder, will add more content later. -->

    <Space

        android:layout_width="match_parent"

        android:layout_height="0dp"

res/values/dimens.xml

+19 −0
Original line number Diff line number Diff line
@@ -72,6 +72,25 @@ 
    <dimen name="preview_theme_content_bottom">@dimen/min_taptarget_height</dimen>

    <dimen name="preview_theme_cover_content_bottom">@dimen/preview_theme_content_bottom</dimen>



    <!--  For the new preview of theme picker.  -->

    <dimen name="preview_theme_content_padding_top">12dp</dimen>

    <dimen name="preview_theme_content_padding">@dimen/preview_card_padding</dimen>

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

    <dimen name="preview_theme_smart_space_date_size">16sp</dimen>

    <dimen name="preview_theme_app_icon_shape_padding_horizontal">36dp</dimen>

    <dimen name="preview_theme_app_icon_shape_padding_top">28dp</dimen>

    <dimen name="preview_theme_app_icon_shape_text_margin_top">8dp</dimen>

    <dimen name="preview_theme_app_icon_shape_text_size">16sp</dimen>

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

    <dimen name="preview_theme_color_icons_padding_horizontal">18dp</dimen>

    <dimen name="preview_theme_color_icons_title_text_size">12sp</dimen>

    <dimen name="preview_theme_color_icons_title_margin_top">12dp</dimen>

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

    <dimen name="preview_theme_color_icons_icon_size">@dimen/preview_theme_icon_size</dimen>

    <dimen name="preview_theme_color_icons_tile_size">@dimen/preview_theme_tile_size</dimen>

    <dimen name="preview_theme_color_icons_buttons_margin_top">32dp</dimen>

    <dimen name="preview_theme_color_icons_buttons_margin_bottom">28dp</dimen>



    <!--  For the customization previews on the picker. -->

    <dimen name="preview_content_height">@dimen/preview_pager_height</dimen>

    <dimen name="preview_content_padding_top">@dimen/preview_page_top_margin</dimen>