android / views-widgets-samples

Multiple samples showing the best practices in views-widgets on Android.
Apache License 2.0
5.03k stars 3.01k forks source link

Motionlayout: WARNING could not find view id -1 #189

Open Berki2021 opened 3 years ago

Berki2021 commented 3 years ago

I constantly get the above written warning. In combination with that, the animation does not really work, but jumps from one state to another.. How can I solve this problem?

BaseXML

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

    <data>
        <variable
            name="product"
            type="com.example.app.framework.datasource.models.product.Product" />
    </data>

    <androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/shop_motion_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/shop_item_content_scene"
        app:showPaths="true"
        tools:context=".framework.ui.view.fragments.shop.ShopItemFragment">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/shop_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Light"
            app:menu="@menu/shop_item_toolbar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/product_image"
            android:layout_width="0dp"
            android:layout_height="142dp"
            android:layout_marginStart="72dp"
            android:layout_marginTop="@dimen/standard8dpMargin"
            android:layout_marginEnd="72dp"
            android:adjustViewBounds="true"
            android:contentDescription="@null"
            android:fitsSystemWindows="true"
            app:loadImage="@{product.images[0]}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/shop_toolbar" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/product_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/big16dpMargin"
            android:layout_marginBottom="12dp"
            android:ellipsize="end"
            android:fontFamily="sans-serif-medium"
            android:maxLines="2"
            android:text="@{product.name}"
            android:textAlignment="textStart"
            android:textColor="@color/color_text_dark"
            android:textSize="@dimen/textHeadlineNormal1"
            app:layout_constraintBottom_toTopOf="@id/scrollview_shop"
            app:layout_constraintEnd_toEndOf="@id/barrier"
            app:layout_constraintStart_toStartOf="@id/margin_left"
            app:layout_constraintTop_toBottomOf="@+id/product_image"
            tools:text="Long text to test some stuff etc. bla bla" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_shop"
            style="@style/Widget.MaterialComponents.Button.Icon"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:layout_marginEnd="16dp"
            android:backgroundTint="@color/color_btn_blue"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            android:padding="0dp"
            app:icon="@drawable/ic_shopping_cart_filled"
            app:iconGravity="textStart"
            app:iconPadding="0dp"
            app:layout_constraintBottom_toTopOf="@id/scrollview_shop"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/scrollview_shop"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Example.Button.Circle" />

        <!-- My scrollview -->
        <androidx.core.widget.NestedScrollView
            android:id="@+id/scrollview_shop"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:fillViewport="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/product_name">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/someID"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/product_article_number"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/standard8dpMargin"
                    android:text="FISCH"
                    android:textAlignment="textStart"
                    android:textColor="@color/color_text_gray"
                    android:textDirection="locale"
                    android:textSize="@dimen/textDescriptionNormal2"
                    android:textStyle="normal"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:text="A 1234567" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/tv_mwst_disclaimer"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/standard8dpMargin"
                    android:text="SEIFE"
                    android:textAlignment="textStart"
                    android:textColor="@color/color_text_mwst"
                    android:textDirection="locale"
                    android:textSize="@dimen/textDescriptionNormal4"
                    android:textStyle="italic"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/product_article_number"
                    tools:text="PREIS" />

            </androidx.constraintlayout.widget.ConstraintLayout>
        </androidx.core.widget.NestedScrollView>

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="left"
            app:constraint_referenced_ids="btn_shop" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/margin_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="@dimen/big16dpMargin" />

    </androidx.constraintlayout.motion.widget.MotionLayout>
</layout>

ContentScene

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:motion="http://schemas.android.com/tools">

    <Transition
        app:constraintSetEnd="@id/collapsed"
        app:constraintSetStart="@id/expanded">

        <OnSwipe
            motion:dragDirection="dragUp"
            app:onTouchUp="stop"
            motion:touchAnchorId="@id/scrollview_shop"
            motion:touchAnchorSide="top" />

        <KeyFrameSet>
            <KeyAttribute
                app:motionTarget="@id/product_image"
                app:framePosition="40"
                android:alpha="0.0" />
        </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/expanded" />

    <ConstraintSet android:id="@+id/collapsed">
        <Constraint
            android:id="@id/product_image"
            android:layout_height="?attr/actionBarSize"
            android:layout_marginStart="56dp"
            android:layout_marginEnd="56dp"
            android:alpha="0.0"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <Constraint
            android:id="@id/product_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="56dp"
            android:layout_marginEnd="@dimen/standard8dpMargin"
            android:scaleX="0.925"
            android:scaleY="0.925"
            app:layout_constraintBottom_toBottomOf="@id/shop_toolbar"
            app:layout_constraintTop_toTopOf="@id/shop_toolbar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="@id/barrier" />

        <Constraint
            android:id="@id/btn_shop"
            android:layout_marginEnd="@dimen/big16dpMargin"
            android:layout_width="56dp"
            android:layout_height="56dp"
            app:layout_constraintBottom_toBottomOf="@id/shop_toolbar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/product_name" />
    </ConstraintSet>

</MotionScene>

Fragment

class ShopItemFragment : Fragment(R.layout.fragment_shop_item) {
    private val productArgs by navArgs<ShopItemFragmentArgs>()

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = FragmentShopItemBinding.inflate(inflater, container, false).apply {
        product = productArgs.product
    }.root

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        initToolbar()
    }

    private fun initToolbar() = shop_toolbar.apply {
        setupWithNavController(findNavController(), AppBarConfiguration(findNavController().graph))
    }
}