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

Commit 60c3f2f9 authored by Santiago Etchebehere's avatar Santiago Etchebehere
Browse files

Change the layout of TP pages and previews 

Change the position of the "Keep my wallpaper" checkbox and
make the bottom panel larger, as well as restrict how much
a preview card can grow or shrink depending on the screen
size.

Note that the UX spec cannot be met 100% on all screen
sizes, so for some cases we round to the closest
approximation.

(ConstraintLayout FTW!)

Fixes: 130763357
Fixes: 130398264
Change-Id: I15bece84fb4ce1018676f57d32e0fc533bcdec92
parent d4042abe

res/layout/fragment_clock_picker.xml

+45 −25
Original line number Diff line number Diff line
@@ -23,40 +23,60 @@ 
    android:background="?android:colorPrimary">

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



    <com.android.customization.widget.PreviewPager

        android:id="@+id/clock_preview_pager"

    <androidx.constraintlayout.widget.ConstraintLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:background="@color/secondary_color"

        app:card_style="screen_aspect_ratio"/>

        android:layout_height="match_parent">



    <LinearLayout

        android:id="@+id/options_section"

        <com.android.customization.widget.PreviewPager

            android:id="@+id/clock_preview_pager"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

        android:paddingVertical="10dp"

        android:orientation="vertical">

            android:layout_marginTop="10dp"

            android:background="@color/secondary_color"

            app:layout_constrainedHeight="true"

            app:layout_constraintBottom_toTopOf="@id/options_container"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHeight_max="@dimen/preview_pager_max_height"

            app:layout_constraintHeight_min="@dimen/preview_pager_min_height"

            app:layout_constraintVertical_bias="0.0"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintVertical_chainStyle="spread_inside"/>



        <androidx.recyclerview.widget.RecyclerView

            android:id="@+id/options_container"

            android:layout_width="match_parent"

            android:layout_height="@dimen/options_container_height"

            android:layout_gravity="center_horizontal"/>

            android:layout_gravity="center_horizontal"

            android:layout_marginTop="10dp"

            app:layout_constraintBottom_toTopOf="@id/placeholder"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/clock_preview_pager"

            app:layout_constraintVertical_bias="1.0"/>



        <RelativeLayout

        <Space

            android:id="@+id/placeholder"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:paddingHorizontal="10dp">

            android:layout_height="@dimen/min_taptarget_height"

            app:layout_constraintBottom_toTopOf="@id/apply_button"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@id/options_container"

            app:layout_constraintVertical_bias="1.0"/>



        <Button

            android:id="@+id/apply_button"

            style="@style/ActionPrimaryButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

                android:layout_alignParentEnd="true"

                android:text="@string/apply_btn"/>

        </RelativeLayout>



    </LinearLayout>

            android:layout_gravity="end"

            android:layout_marginEnd="10dp"

            android:layout_marginVertical="10dp"

            android:layout_weight="1"

            android:text="@string/apply_theme_btn"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toBottomOf="@id/placeholder"/>



    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

res/layout/fragment_custom_theme_component.xml

+59 −30
Original line number Diff line number Diff line
@@ -16,54 +16,83 @@ 
-->

<LinearLayout

    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:orientation="vertical"

    android:background="?android:colorPrimary">

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



    <androidx.constraintlayout.widget.ConstraintLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">



        <FrameLayout

            android:id="@+id/component_preview_container"

            android:layout_width="match_parent"

            android:layout_height="0dp"

        android:layout_weight="1"

        android:background="?android:colorPrimary">

            android:background="?android:colorPrimary"

            app:layout_constrainedHeight="true"

            app:layout_constraintBottom_toTopOf="@+id/guideline"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHeight_max="@dimen/preview_pager_max_height"

            app:layout_constraintHeight_min="@dimen/preview_pager_min_height"

            app:layout_constraintHorizontal_bias="0.5"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintVertical_bias="0.0">



            <include

                android:id="@+id/component_preview_content"

                layout="@layout/theme_component_preview"

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:layout_marginHorizontal="@dimen/preview_page_horizontal_margin"

                android:layout_marginTop="@dimen/preview_page_top_margin"

            android:layout_marginBottom="@dimen/component_preview_page_bottom_margin"

            layout="@layout/theme_component_preview"/>

                android:layout_marginBottom="@dimen/indicator_container_height"/>

        </FrameLayout>

        <View

            android:id="@+id/divider"

            android:layout_width="match_parent"

            android:layout_height="1dp"

        android:background="@color/divider_color"/>

    <LinearLayout

        android:id="@+id/options_section"

        android:layout_width="match_parent"

            android:background="@color/divider_color"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/component_preview_container"/>



        <androidx.constraintlayout.widget.Guideline

            android:id="@+id/guideline"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

        android:paddingVertical="10dp"

        android:clipToPadding="false"

        android:orientation="vertical">

            android:orientation="horizontal"

            app:layout_constraintGuide_percent=".7"/>





        <TextView

            android:id="@+id/component_options_title"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_margin="10dp"

            android:layout_marginTop="10dp"

            android:layout_marginStart="10dp"

            android:layout_marginEnd="10dp"

            android:layout_marginBottom="10dp"

            android:textAlignment="center"

            android:textAppearance="@style/HeaderTextAppearance"/>

            android:textAppearance="@style/HeaderTextAppearance"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/guideline"/>



        <androidx.recyclerview.widget.RecyclerView

            android:id="@+id/options_container"

            android:layout_width="match_parent"

            android:layout_height="@dimen/options_container_height"

            android:layout_gravity="center_horizontal"/>



    </LinearLayout>

            android:layout_gravity="center_horizontal"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHorizontal_bias="0.5"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/component_options_title"

            app:layout_constraintVertical_bias=".2"/>



    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

res/layout/fragment_custom_theme_name.xml

+56 −37
Original line number Diff line number Diff line
@@ -16,59 +16,78 @@ 
-->

<LinearLayout

    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"

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

    android:orientation="vertical"

    android:background="?android:colorPrimary">

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



    <androidx.constraintlayout.widget.ConstraintLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">



        <FrameLayout

            android:id="@+id/component_preview_container"

            android:layout_width="match_parent"

            android:layout_height="0dp"

        android:layout_weight="1"

        android:background="@color/secondary_color">

            android:background="@color/secondary_color"

            app:layout_constrainedHeight="true"

            app:layout_constraintBottom_toTopOf="@+id/guideline"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHeight_max="@dimen/preview_pager_max_height"

            app:layout_constraintHeight_min="@dimen/preview_pager_min_height"

            app:layout_constraintHorizontal_bias="0.5"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintVertical_bias="0.0">



            <include

                android:id="@+id/component_preview_content"

                layout="@layout/theme_preview_card"

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:layout_marginHorizontal="@dimen/preview_page_horizontal_margin"

                android:layout_marginTop="@dimen/preview_page_top_margin"

            android:layout_marginBottom="@dimen/component_preview_page_bottom_margin"

            layout="@layout/theme_preview_card"/>

                android:layout_marginBottom="@dimen/indicator_container_height"/>

        </FrameLayout>

    <LinearLayout

        android:id="@+id/options_section"

        android:layout_width="match_parent"



        <androidx.constraintlayout.widget.Guideline

            android:id="@+id/guideline"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

        android:paddingVertical="10dp"

        android:clipToPadding="false"

        android:orientation="vertical">

            android:orientation="horizontal"

            app:layout_constraintGuide_percent=".7"/>



        <TextView

            android:id="@+id/component_options_title"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_margin="10dp"

            android:layout_marginTop="10dp"

            android:layout_marginStart="10dp"

            android:layout_marginEnd="10dp"

            android:layout_marginBottom="10dp"

            android:textAlignment="center"

            android:textAppearance="@style/HeaderTextAppearance"/>



        <FrameLayout

            android:layout_width="match_parent"

            android:layout_height="@dimen/options_container_height"

            android:layout_gravity="center">

            android:textAppearance="@style/HeaderTextAppearance"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/guideline"/>



        <EditText

                style="@style/CustomThemeNameEditText"

            android:id="@+id/custom_theme_name"

            style="@style/CustomThemeNameEditText"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:minWidth="300dp"/>

        </FrameLayout>

            android:importantForAutofill="no"

            android:minWidth="300dp"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHorizontal_bias="0.5"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/component_options_title"

            app:layout_constraintVertical_bias=".2"/>



    </LinearLayout>



    </androidx.constraintlayout.widget.ConstraintLayout>



</LinearLayout>

res/layout/fragment_grid_picker.xml

+48 −26
Original line number Diff line number Diff line
@@ -16,46 +16,68 @@ 
-->

<LinearLayout

    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" xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="?android:colorPrimary">

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



    <com.android.customization.widget.PreviewPager

        android:id="@+id/grid_preview_pager"

    <androidx.constraintlayout.widget.ConstraintLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:background="@color/secondary_color"

        app:card_style="screen_aspect_ratio"/>

        android:layout_height="match_parent">



    <LinearLayout

        android:id="@+id/options_section"

        <com.android.customization.widget.PreviewPager

            android:id="@+id/grid_preview_pager"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

        android:paddingVertical="10dp"

        android:orientation="vertical">

            android:layout_marginTop="10dp"

            android:background="@color/secondary_color"

            app:card_style="screen_aspect_ratio"

            app:layout_constrainedHeight="true"

            app:layout_constraintBottom_toTopOf="@id/options_container"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHeight_max="@dimen/preview_pager_max_height"

            app:layout_constraintHeight_min="@dimen/preview_pager_min_height"

            app:layout_constraintVertical_bias="0.0"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintVertical_chainStyle="spread_inside"/>



        <androidx.recyclerview.widget.RecyclerView

            android:id="@+id/options_container"

            android:layout_width="match_parent"

            android:layout_height="@dimen/options_container_height"

            android:layout_gravity="center_horizontal"/>

            android:layout_gravity="center_horizontal"

            android:layout_marginTop="10dp"

            app:layout_constraintBottom_toTopOf="@id/placeholder"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/grid_preview_pager"

            app:layout_constraintVertical_bias="1.0"/>



        <RelativeLayout

        <Space

            android:id="@+id/placeholder"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:paddingHorizontal="10dp">

            android:layout_height="@dimen/min_taptarget_height"

            app:layout_constraintBottom_toTopOf="@id/apply_button"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@id/options_container"

            app:layout_constraintVertical_bias="1.0"/>



        <Button

            android:id="@+id/apply_button"

            style="@style/ActionPrimaryButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

                android:layout_alignParentEnd="true"

                android:text="@string/apply_btn"/>

        </RelativeLayout>



    </LinearLayout>

            android:layout_gravity="end"

            android:layout_marginEnd="10dp"

            android:layout_marginVertical="10dp"

            android:layout_weight="1"

            android:text="@string/apply_theme_btn"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toBottomOf="@id/placeholder"/>



    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

res/layout/fragment_theme_picker.xml

+53 −36
Original line number Diff line number Diff line
@@ -16,56 +16,73 @@ 
-->

<LinearLayout

    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:orientation="vertical"

    android:background="?android:colorPrimary">

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



    <com.android.customization.widget.PreviewPager

        android:id="@+id/theme_preview_pager"

    <androidx.constraintlayout.widget.ConstraintLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:background="@color/secondary_color"/>

        android:layout_height="match_parent">



    <LinearLayout

        android:id="@+id/options_section"

        <com.android.customization.widget.PreviewPager

            android:id="@+id/theme_preview_pager"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

        android:paddingVertical="10dp"

        android:orientation="vertical">

            android:background="@color/secondary_color"

            app:layout_constrainedHeight="true"

            app:layout_constraintBottom_toTopOf="@id/options_container"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHeight_max="@dimen/preview_pager_max_height"

            app:layout_constraintHeight_min="@dimen/preview_pager_min_height"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintVertical_bias="0.0"

            app:layout_constraintVertical_chainStyle="spread_inside"/>



        <androidx.recyclerview.widget.RecyclerView

            android:id="@+id/options_container"

            android:layout_width="match_parent"

            android:layout_height="@dimen/options_container_height"

            android:layout_gravity="center_horizontal"/>

            android:layout_gravity="bottom|center_horizontal"

            android:layout_marginTop="10dp"

            android:layout_weight="1"

            app:layout_constraintBottom_toTopOf="@id/use_my_wallpaper"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/theme_preview_pager"

            app:layout_constraintVertical_bias="1.0"/>



        <RelativeLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:paddingHorizontal="10dp">

        <CheckBox

            android:id="@+id/use_my_wallpaper"

            android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_alignParentStart="true"

                android:layout_centerVertical="true"

                android:layout_toStartOf="@+id/apply_button"

            android:layout_height="@dimen/min_taptarget_height"

            android:layout_marginStart="10dp"

            android:ellipsize="end"

            android:gravity="start|center_vertical"

            android:paddingLeft="4dp"

                android:minHeight="@dimen/min_taptarget_height"

                android:text="@string/keep_my_wallpaper"/>

            android:text="@string/keep_my_wallpaper"

            app:layout_constraintBottom_toTopOf="@id/apply_button"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHeight_min="@dimen/min_taptarget_height"

            app:layout_constraintHorizontal_bias="0.0"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@id/options_container"

            app:layout_constraintVertical_bias="1.0"/>



        <Button

            android:id="@+id/apply_button"

            style="@style/ActionPrimaryButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

                android:layout_alignParentEnd="true"

                android:text="@string/apply_theme_btn"/>

        </RelativeLayout>



    </LinearLayout>

            android:layout_gravity="end"

            android:layout_marginEnd="10dp"

            android:layout_marginBottom="10dp"

            android:text="@string/apply_theme_btn"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintEnd_toEndOf="parent"/>



    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>