paparazzi icon indicating copy to clipboard operation
paparazzi copied to clipboard

ConstraintLayout in snapshot image using `match_parent` instead of `wrap_content`

Open mochadwi opened this issue 3 years ago • 2 comments

Actual:

This is an image

Expected:

Screen Shot 2022-02-01 at 12 03 16 PM
XML (click to expand)
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/banner_root"
    android:layout_width="match_parent"
    android:visibility="gone"
    tools:visibility="visible"
    android:layout_height="wrap_content"
    android:paddingLeft="18dp"
    android:paddingStart="18dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingEnd="16dp"
    android:paddingBottom="20dp">

    <ImageView
        android:id="@+id/imageview_empty_logo"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textview_empty_description"
        tools:srcCompat="@drawable/ic_indicator_warning_yellow"/>

    <TextView
        android:id="@+id/textview_empty_description"
        style="@style/TextNormalBlack"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/textview_banner_action"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/imageview_empty_logo"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread"
        tools:text="@tools:sample/lorem"
        tools:textColor="@color/text_normal"/>

    <TextView
        android:id="@+id/textview_banner_action"
        style="@style/TextNormalBold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_empty_description"
        tools:text="@android:string/ok"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Test File (click to expand)
        val root = paparazzi.inflate<ConstraintLayout>(R.layout.component_banner)
        root.isVisible = isShown
        val bannerRoot = root.findViewById<ConstraintLayout>(R.id.banner_root)
        bannerRoot.background = ContextCompat.getDrawable(root.context, background ?: 0)
        val imageviewEmptyLogo = root.findViewById<ImageView>(R.id.imageview_empty_logo)
        imageviewEmptyLogo.isVisible = logo != -1
        imageviewEmptyLogo.setImageDrawable(
            ContextCompat.getDrawable(
                root.context,
                logo ?: 0
            )
        )
        val textviewEmptyDescription = root.findViewById<TextView>(R.id.textview_empty_description)
        textviewEmptyDescription.text = description
        textviewEmptyDescription.setTextColor(
            ContextCompat.getColor(
                root.context,
                descriptionColor ?: 0
            )
        )
        val textviewBannerAction = root.findViewById<TextView>(R.id.textview_banner_action)
        textviewBannerAction.text = okText
        textviewBannerAction.setTextColor(
            ContextCompat.getColor(
                root.context,
                okTextColor ?: 0
            )
        )

        paparazzi.snapshot(root)

mochadwi avatar Feb 01 '22 05:02 mochadwi

I am experiencing the same issue

MarjanaKarzek avatar Apr 28 '22 09:04 MarjanaKarzek

It's possible to use the snapshot method for composables from Paparazzi to easily wrap the ConstraintLayout view under test into a column so the height is not the device height anymore. Like:

fun method() {
  val yourView = paparazzi.inflate<ConstraintLayout>(R.layout.your_view)
  paparazzi.snapshot {
    Column {
      AndroidView(modifier = Modifier.fillMaxWidth(), factory = {
        yourView
      })
    }
  }
}

But the margins of the ConstraintLayout are gone :(

BenedictP avatar Aug 18 '22 12:08 BenedictP

Hi, could you try again with the 1.2.0-SNAPSHOT and the following properties:

    @get:Rule
    val paparazzi = Paparazzi(
        ....
        showSystemUi = false
     )

jrodbx avatar Dec 14 '22 17:12 jrodbx

@mochadwi Could you also push a branch to a reproducible sample? The XML and test sources you gave above were helpful, but I don't have the backing styles/drawables and I want to make sure I'm using the right specs.

jrodbx avatar Dec 14 '22 17:12 jrodbx

It's now working, but margins around the view are not there: image

BenedictP avatar Dec 16 '22 07:12 BenedictP

Closing as original issue is now working, please file a separate issue for the margins!

jrodbx avatar Mar 24 '23 23:03 jrodbx