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

Commit 7a642177 authored by chihhangchuang's avatar chihhangchuang
Browse files

Use ConstraintLayout for theme preview to fix UI break of largest font/display size 

Before:
- Normal https://screenshot.googleplex.com/15MgPxRCzUJ.png
- Largest font and display size https://screenshot.googleplex.com/daDFBMxP0Ve.png
- Largest font and display size full preview https://screenshot.googleplex.com/gUWvARts7zS.png

After:
- Normal https://screenshot.googleplex.com/5FSUE7GLTZ0.png
- Largest font and display size https://screenshot.googleplex.com/ZaRf2pzRCjD.png
- Largest font and display size full preview https://screenshot.googleplex.com/R3iFjjWYTYC.png

Next: Update the UI to match new spec once we have, new spec is tracked by b/157097884

Test: Manually
Bug: 157402935
Change-Id: I0d202146f2be258acb923965ede6fac93bf5fc48
parent 0b5031d8

res/layout/theme_preview_app_icon_shape.xml

+57 −34
Original line number Diff line number Diff line
@@ -14,23 +14,33 @@ 
     See the License for the specific language governing permissions and

     limitations under the License.

-->

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

<androidx.constraintlayout.widget.ConstraintLayout

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

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

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:paddingHorizontal="@dimen/preview_theme_app_icon_shape_padding_horizontal"

    android:layout_height="match_parent"

    android:orientation="vertical">



    <LinearLayout

    <androidx.constraintlayout.widget.ConstraintLayout

        android:id="@+id/app_row_0"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingTop="@dimen/preview_theme_app_icon_shape_padding_top"

        android:orientation="horizontal">

        android:orientation="horizontal"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintBottom_toTopOf="@id/app_row_1">



        <LinearLayout

            android:layout_width="wrap_content"

            android:id="@+id/app_item_0"

            android:layout_width="@dimen/preview_theme_app_icon_shape_item_width"

            android:layout_height="wrap_content"

            android:gravity="center_horizontal"

            android:orientation="vertical">

            android:orientation="vertical"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/app_item_1"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent">

            <ImageView

                android:id="@+id/shape_preview_icon_0"

                android:layout_width="@dimen/preview_theme_shape_size"
@@ -42,19 +52,20 @@ 
                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"/>

                android:lineHeight="20dp"

                android:singleLine="true"/>

        </LinearLayout>



        <Space

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"/>



        <LinearLayout

            android:layout_width="wrap_content"

            android:id="@+id/app_item_1"

            android:layout_width="@dimen/preview_theme_app_icon_shape_item_width"

            android:layout_height="wrap_content"

            android:gravity="center_horizontal"

            android:orientation="vertical">

            android:orientation="vertical"

            app:layout_constraintStart_toEndOf="@id/app_item_0"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent">

            <ImageView

                android:id="@+id/shape_preview_icon_1"

                android:layout_width="@dimen/preview_theme_shape_size"
@@ -66,21 +77,31 @@ 
                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"/>

                android:lineHeight="20dp"

                android:singleLine="true"/>

        </LinearLayout>



    </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>



    <LinearLayout

    <androidx.constraintlayout.widget.ConstraintLayout

        android:id="@+id/app_row_1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingTop="@dimen/preview_theme_app_icon_shape_padding_top"

        android:orientation="horizontal">

        android:orientation="horizontal"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toBottomOf="@id/app_row_0"

        app:layout_constraintBottom_toBottomOf="parent">

        <LinearLayout

            android:layout_width="wrap_content"

            android:id="@+id/app_item_2"

            android:layout_width="@dimen/preview_theme_app_icon_shape_item_width"

            android:layout_height="wrap_content"

            android:gravity="center_horizontal"

            android:orientation="vertical">

            android:orientation="vertical"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/app_item_3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent">

            <ImageView

                android:id="@+id/shape_preview_icon_2"

                android:layout_width="@dimen/preview_theme_shape_size"
@@ -92,19 +113,20 @@ 
                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"/>

                android:lineHeight="20dp"

                android:singleLine="true"/>

        </LinearLayout>



        <Space

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"/>



        <LinearLayout

            android:layout_width="wrap_content"

            android:id="@+id/app_item_3"

            android:layout_width="@dimen/preview_theme_app_icon_shape_item_width"

            android:layout_height="wrap_content"

            android:gravity="center_horizontal"

            android:orientation="vertical">

            android:orientation="vertical"

            app:layout_constraintStart_toEndOf="@id/app_item_2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent">

            <ImageView

                android:id="@+id/shape_preview_icon_3"

                android:layout_width="@dimen/preview_theme_shape_size"
@@ -116,7 +138,8 @@ 
                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>

                android:lineHeight="20dp"

                android:singleLine="true"/>

        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

res/layout/theme_preview_color_icons.xml

+26 −11
Original line number Diff line number Diff line
@@ -16,15 +16,18 @@ 
-->

<androidx.cardview.widget.CardView

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

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

    android:id="@+id/color_icons_section"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_height="match_parent"

    android:background="@color/primary_color">



    <LinearLayout

    <androidx.constraintlayout.widget.ConstraintLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_height="match_parent"

        android:paddingHorizontal="@dimen/preview_theme_color_icons_padding_horizontal"

        android:paddingTop="@dimen/preview_theme_color_icons_padding_top"

        android:paddingBottom="@dimen/preview_theme_color_icons_padding_bottom"

        android:orientation="vertical">



        <!-- Title -->
@@ -32,18 +35,27 @@ 
            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"/>

            android:gravity="center"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toTopOf="@id/qs_icons"

            app:layout_constraintVertical_bias="0.0"

            app:layout_constraintVertical_chainStyle="spread_inside" />



        <!-- QS icons -->

        <LinearLayout

            android:id="@+id/qs_icons"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal">

            android:orientation="horizontal"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toBottomOf="@id/color_icons_section_title"

            app:layout_constraintBottom_toTopOf="@id/button_icons">

            <FrameLayout

                android:layout_width="@dimen/preview_theme_color_icons_icon_size"

                android:layout_height="@dimen/preview_theme_color_icons_icon_size">
@@ -117,11 +129,14 @@ 


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

        <LinearLayout

            android:id="@+id/button_icons"

            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">

            android:orientation="horizontal"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toBottomOf="@id/qs_icons"

            app:layout_constraintBottom_toBottomOf="parent">

            <FrameLayout

                android:layout_width="@dimen/preview_theme_icon_size"

                android:layout_height="@dimen/preview_theme_icon_size">
@@ -165,5 +180,5 @@ 
            </FrameLayout>

        </LinearLayout>



    </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

res/layout/theme_preview_content.xml

+51 −13
Original line number Diff line number Diff line
@@ -14,16 +14,28 @@ 
     See the License for the specific language governing permissions and

     limitations under the License.

-->

<LinearLayout

<androidx.constraintlayout.widget.ConstraintLayout

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

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

    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">

    android:clipChildren="false">



    <FrameLayout

        android:id="@+id/topbar_container"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintBottom_toTopOf="@id/smart_space_date"

        app:layout_constraintVertical_bias="0.0"

        app:layout_constraintVertical_chainStyle="spread_inside">

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

    </FrameLayout>



    <TextView

        android:id="@+id/smart_space_date"
@@ -31,20 +43,46 @@ 
        android:layout_height="wrap_content"

        android:textSize="@dimen/preview_theme_smart_space_date_size"

        android:lineHeight="24dp"

        android:singleLine="true"

        android:gravity="center"

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

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toBottomOf="@id/topbar_container"

        app:layout_constraintBottom_toTopOf="@id/app_icon_shape_container" />



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



    <include layout="@layout/theme_preview_color_icons"

    <FrameLayout

        android:id="@+id/app_icon_shape_container"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

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

        android:layout_height="0dp"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toBottomOf="@id/smart_space_date"

        app:layout_constraintBottom_toTopOf="@id/color_icons_container"

        app:layout_constraintHeight_percent="0.4">

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

    </FrameLayout>



    <Space

    <FrameLayout

        android:id="@+id/color_icons_container"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"/>

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toBottomOf="@id/app_icon_shape_container"

        app:layout_constraintBottom_toTopOf="@id/theme_qsb_container"

        app:layout_constraintHeight_percent="0.3">

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

    </FrameLayout>



    <FrameLayout

        android:id="@+id/theme_qsb_container"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintTop_toBottomOf="@id/color_icons_container"

        app:layout_constraintBottom_toBottomOf="parent">

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

</LinearLayout>
 
 No newline at end of file
 
    </FrameLayout>



</androidx.constraintlayout.widget.ConstraintLayout>

res/values/dimens.xml

+3 −8
Original line number Diff line number Diff line
@@ -73,21 +73,16 @@ 
    <!--  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_item_width">64dp</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_top">12dp</dimen>

    <dimen name="preview_theme_color_icons_padding_bottom">20dp</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_padding_top">@dimen/preview_page_top_margin</dimen>