[MaterialTimePicker] Fix TimePicker appearance for RTL

Resolves #2837
Resolves #2835
Resolves #2836

GIT_ORIGIN_REV_ID=2fa54f683b263c61933469f2bca1cdf81dbddeed
Co-authored-by: paulfthomas
PiperOrigin-RevId: 466986098

Author: pubiqq

lib/java/com/google/android/material/timepicker/TimePickerView.java

@@ -38,7 +38,6 @@
 import androidx.annotation.Nullable;
 import androidx.annotation.StringRes;
 import androidx.constraintlayout.widget.ConstraintLayout;
-import androidx.constraintlayout.widget.ConstraintSet;
 import androidx.core.view.AccessibilityDelegateCompat;
 import androidx.core.view.ViewCompat;
 import com.google.android.material.button.MaterialButtonToggleGroup;
@@ -257,30 +256,10 @@ public void showToggle() {
   protected void onVisibilityChanged(@NonNull View changedView, int visibility) {
     super.onVisibilityChanged(changedView, visibility);
     if (changedView == this && visibility == VISIBLE) {
-      updateToggleConstraints();
       hourView.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED);
     }
   }
 
-  @Override
-  protected void onAttachedToWindow() {
-    super.onAttachedToWindow();
-    updateToggleConstraints();
-  }
-
-  private void updateToggleConstraints() {
-    if (toggle.getVisibility() == VISIBLE) {
-      // The clock display would normally be centered, clear the constraint on one side to make
-      // room for the toggle
-      ConstraintSet constraintSet = new ConstraintSet();
-      constraintSet.clone(this);
-      boolean isLtr = ViewCompat.getLayoutDirection(this) == ViewCompat.LAYOUT_DIRECTION_LTR;
-      int sideToClear = isLtr ? ConstraintSet.RIGHT : ConstraintSet.LEFT;
-      constraintSet.clear(R.id.material_clock_display, sideToClear);
-      constraintSet.applyTo(this);
-    }
-  }
-
   @Level
   int getCurrentLevel() {
     return clockFace.getCurrentLevel();

lib/java/com/google/android/material/timepicker/res/layout-land/material_timepicker.xml

@@ -16,46 +16,42 @@
 -->
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
+  xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/material_timepicker_container"
   android:layout_width="wrap_content"
-  android:layout_height="wrap_content">
+  android:layout_height="wrap_content"
+  tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
 
-  <androidx.constraintlayout.widget.Guideline
-    android:layout_width="wrap_content"
+  <androidx.constraintlayout.helper.widget.Flow
+    android:id="@+id/material_clock_display_and_toggle"
+    android:layout_width="0dp"
     android:layout_height="wrap_content"
-    android:id="@+id/guideline"
-    app:layout_constraintGuide_begin="16dp"
-    android:orientation="horizontal"/>
+    android:layout_marginTop="20dp"
+    android:orientation="vertical"
+    app:constraint_referenced_ids="material_clock_display,material_clock_period_toggle"
+    app:flow_verticalGap="@dimen/material_clock_period_toggle_vertical_gap"
+    app:layout_constraintBottom_toBottomOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent" />
 
   <include
     android:id="@+id/material_clock_display"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    app:layout_constraintBottom_toTopOf="@+id/material_clock_period_toggle"
-    android:layout_marginTop="4dp"
-    app:layout_constraintLeft_toLeftOf="parent"
-    app:layout_constraintVertical_chainStyle="packed"
-    layout="@layout/material_clock_display"
-    app:layout_constraintTop_toTopOf="@+id/guideline" />
+    layout="@layout/material_clock_display" />
 
   <include
     android:id="@+id/material_clock_period_toggle"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
-    android:layout_marginTop="12dp"
-    app:layout_constraintVertical_chainStyle="packed"
-    app:layout_constraintTop_toBottomOf="@+id/material_clock_display"
-    app:layout_constraintBottom_toBottomOf="parent"
-    app:layout_constraintLeft_toLeftOf="@+id/material_clock_display"
-    app:layout_constraintRight_toRightOf="@+id/material_clock_display"
     layout="@layout/material_clock_period_toggle_land" />
 
   <com.google.android.material.timepicker.ClockFaceView
     android:id="@+id/material_clock_face"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_marginStart="@dimen/clock_face_margin_start"
-    app:layout_constraintStart_toEndOf="@+id/material_clock_display"
+    app:layout_constraintStart_toEndOf="@+id/material_clock_display_and_toggle"
     app:layout_constraintTop_toTopOf="parent" />
 
 </merge>

lib/java/com/google/android/material/timepicker/res/layout-ldrtl/material_textinput_timepicker.xml

@@ -34,7 +34,7 @@
     android:layout_width="@dimen/material_clock_period_toggle_width"
     android:layout_height="@dimen/material_clock_period_toggle_height"
     android:layout_marginStart="0dp"
-    android:layout_marginEnd="@dimen/material_clock_period_toggle_margin_left" />
+    android:layout_marginEnd="@dimen/material_clock_period_toggle_horizontal_gap" />
 
   <include layout="@layout/material_timepicker_textinput_display" />
 

lib/java/com/google/android/material/timepicker/res/layout/material_clock_display.xml

@@ -16,18 +16,13 @@
 -->
 
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/material_clock_display"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
-  android:layout_marginTop="8dp"
   android:layoutDirection="ltr"
   android:orientation="horizontal"
   android:baselineAligned="false"
-  app:layout_constraintTop_toTopOf="parent"
-  app:layout_constraintLeft_toLeftOf="parent"
-  app:layout_constraintRight_toRightOf="parent"
   tools:ignore="UnusedAttribute">
 
   <include

lib/java/com/google/android/material/timepicker/res/layout/material_clock_period_toggle.xml

@@ -21,12 +21,9 @@
   android:id="@+id/material_clock_period_toggle"
   android:layout_width="@dimen/material_clock_period_toggle_width"
   android:layout_height="@dimen/material_clock_period_toggle_height"
-  android:layout_marginStart="@dimen/material_clock_period_toggle_margin_left"
   android:orientation="vertical"
   android:contentDescription="@string/material_clock_toggle_content_description"
   app:checkedButton="@id/material_clock_period_am_button"
-  app:layout_constraintStart_toEndOf="@id/material_clock_display"
-  app:layout_constraintTop_toTopOf="parent"
   android:visibility="gone"
   app:selectionRequired="true"
   app:singleSelection="true">

lib/java/com/google/android/material/timepicker/res/layout/material_textinput_timepicker.xml

@@ -35,6 +35,6 @@
     layout="@layout/material_clock_period_toggle"
     android:layout_width="@dimen/material_clock_period_toggle_width"
     android:layout_height="@dimen/material_clock_period_toggle_height"
-    android:layout_marginStart="@dimen/material_clock_period_toggle_margin_left" />
+    android:layout_marginStart="@dimen/material_clock_period_toggle_horizontal_gap" />
 
 </LinearLayout>

lib/java/com/google/android/material/timepicker/res/layout/material_timepicker.xml

@@ -16,9 +16,22 @@
 -->
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
+  xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/material_timepicker_container"
   android:layout_width="wrap_content"
-  android:layout_height="wrap_content">
+  android:layout_height="wrap_content"
+  tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
+
+  <androidx.constraintlayout.helper.widget.Flow
+    android:id="@+id/material_clock_display_and_toggle"
+    android:layout_width="0dp"
+    android:layout_height="@dimen/material_clock_period_toggle_height"
+    android:orientation="horizontal"
+    app:constraint_referenced_ids="material_clock_display,material_clock_period_toggle"
+    app:flow_horizontalGap="@dimen/material_clock_period_toggle_horizontal_gap"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent" />
 
   <include
     android:id="@+id/material_clock_display"
@@ -32,10 +45,10 @@
     android:id="@+id/material_clock_face"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    android:layout_marginTop="36dp"
+    android:layout_marginTop="28dp"
     android:layout_gravity="center"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
-    app:layout_constraintTop_toBottomOf="@+id/material_clock_display" />
+    app:layout_constraintTop_toBottomOf="@+id/material_clock_display_and_toggle" />
 
 </merge>

lib/java/com/google/android/material/timepicker/res/values/dimens.xml

@@ -19,7 +19,8 @@
   <dimen name="material_clock_display_padding">24dp</dimen>
   <dimen name="material_clock_period_toggle_height">96dp</dimen>
   <dimen name="material_clock_period_toggle_width">52dp</dimen>
-  <dimen name="material_clock_period_toggle_margin_left">12dp</dimen>
+  <dimen name="material_clock_period_toggle_horizontal_gap">12dp</dimen>
+  <dimen name="material_clock_period_toggle_vertical_gap">12dp</dimen>
   <dimen name="material_clock_face_margin_top">44dp</dimen>
   <dimen name="clock_face_margin_start">64dp</dimen>
   <dimen name="material_timepicker_dialog_buttons_margin_top">24dp</dimen>