Add shrink mode to shrink views (XML and composables) to the smallest size required

[BenedictP]

Added a shrink mode to shrink views to the direction the user wants. This should normally be part of the RenderingMode but we don't control this class so I needed to add an extra class to control the shrink mode.

When the RenderingMode is set to SHRINK and the shrinkDirection is null then XML layouts and composables are rendered with wrap_content and without any device frame (also respecting margins and padding):

XML	Composable

When shrinkDirection is set to VERTICAL the width is match_parent and the height is wrap_content:

XML	Composable

When shrinkDirection is set to HORIZONTAL the width is wrap_content but the height is match_parent (check the screenshot for this PR because the screenshots are very high).

Will fix:

• https://github.com/cashapp/paparazzi/issues/367
• https://github.com/cashapp/paparazzi/issues/37
• https://github.com/cashapp/paparazzi/issues/424

[rharter]

This appears to duplicate the proposed change in #497, which I think is able to accomplish the same thing using RenderingMode's horizAction and vertAction properties to avoid expanding the API surface.

[BenedictP]

I think https://github.com/cashapp/paparazzi/pull/497 is only fixing composables and not XML layouts and when we are using android:layout_width="match_parent" for the root node inside a layout we mean the device width. Just using SHRINK would even shrink these views in their width and the device width will be ignored. That's the reason I needed to expand the API surface.

[rharter]

I don't see anything in #497 that limits it to compose, and the tests even test legacy views.

RenderMode has horizontal and vertical options, just like ShrinkDirection, so if you wanted a device width you'd choose a RenderMode that didn't shrink along the horizontal axis.

It seems like ShrinkDirection duplicates the RenderMode settings, defining whether the view should shrink or not along either axis.

[BenedictP]

I checked out https://github.com/cashapp/paparazzi/pull/497/files and created this XML layout (display.xml):

<?xml version="1.0" encoding="utf-8"?>
<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:layout_margin="16dp"
  android:background="@color/keypadGreen">

  <TextView
    android:id="@+id/number"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="5"
    android:textColor="@android:color/white"
    android:textFontWeight="100"
    android:textSize="70dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

  <ImageView
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_marginStart="16dp"
    android:src="@drawable/camera"
    app:layout_constraintBottom_toBottomOf="@id/number"
    app:layout_constraintStart_toEndOf="@id/number"
    app:layout_constraintTop_toTopOf="@id/number" />

</androidx.constraintlayout.widget.ConstraintLayout>

Then I created this test class:

class ShrinkDirectionTest {

  @get:Rule
  val paparazzi = Paparazzi(
    deviceConfig = DeviceConfig.NEXUS_5.copy(softButtons = false)
  )

  @Test
  fun `rendering mode shrink`() {
    paparazzi.unsafeUpdateConfig(renderingMode = SessionParams.RenderingMode.SHRINK)
    val launch = paparazzi.inflate<ConstraintLayout>(R.layout.display)
    paparazzi.snapshot(launch)
  }

  @Test
  fun `rendering mode normal`() {
    paparazzi.unsafeUpdateConfig(renderingMode = SessionParams.RenderingMode.NORMAL)
    val launch = paparazzi.inflate<ConstraintLayout>(R.layout.display)
    paparazzi.snapshot(launch)
  }

  @Test
  fun `rendering mode v scroll`() {
    paparazzi.unsafeUpdateConfig(renderingMode = SessionParams.RenderingMode.V_SCROLL)
    val launch = paparazzi.inflate<ConstraintLayout>(R.layout.display)
    paparazzi.snapshot(launch)
  }

  @Test
  fun `rendering mode h scroll`() {
    paparazzi.unsafeUpdateConfig(renderingMode = SessionParams.RenderingMode.H_SCROLL)
    val launch = paparazzi.inflate<ConstraintLayout>(R.layout.display)
    paparazzi.snapshot(launch)
  }

  @Test
  fun `rendering mode full expand`() {
    paparazzi.unsafeUpdateConfig(renderingMode = SessionParams.RenderingMode.FULL_EXPAND)
    val launch = paparazzi.inflate<ConstraintLayout>(R.layout.display)
    paparazzi.snapshot(launch)
  }
}

The result is always the same:

I would love to know what I'm doing wrong or which parameter I need to change/set because that was the reason for creating this PR. Nothing I tried was working with the above example 😞

[jrodbx]

Closed by #497