MotionLayout bug with mapView resize

[sgueniot]

hello, we try to resize the mapView on scroll of recyclerView. everything is working well, excluding a glitch at the end of the transition : https://photos.app.goo.gl/fP6KsTYcJNebPT288

layout :

<androidx.constraintlayout.motion.widget.MotionLayout
    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"
    app:layoutDescription="@xml/fragment_itinerary_scene"
    android:id="@+id/motionLayout"
    android:clipToPadding="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.gms.maps.MapView
        android:id="@+id/mapView"
        android:name="com.hcnx.rtm.ui.map.MapsFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/rvItineraryHistoryList"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <com.hcnx.rtm.ui.common.widgets.StatusBarSpacer
        android:id="@+id/statusSpace"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fabLineBack"
            android:layout_margin="8dip"
            app:fabCustomSize="47dip"
            android:src="@drawable/ic_menu"
            app:backgroundTint="@color/secondaryColor"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/statusSpace"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnItineraryWhere"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:text="@string/itinerary_where_are_you_going"
        style="@style/AppTheme.Itinerary.Where.Button"
        app:layout_constraintBottom_toTopOf="@id/rvItineraryHistoryList"/>

        <androidx.recyclerview.widget.RecyclerView
            android:background="@color/windowBackground"
            android:id="@+id/rvItineraryHistoryList"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintTop_toBottomOf="@id/mapView"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:itemCount="1"
            tools:listitem="@layout/item_itinerary_history_header"/>

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

transition :

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

    <Transition
        android:id="@+id/historyScrollTransition"
        app:constraintSetStart="@+id/historyScrollMapExpanded"
        app:constraintSetEnd="@+id/historyScrollMapCollasped"
        app:duration="1000">

        <OnSwipe
            app:touchAnchorId="@+id/rvItineraryHistoryList"
            app:touchAnchorSide="top"
            app:dragDirection="dragUp" />
    </Transition>

    <Transition
        android:id="@+id/showAllMap"
        app:constraintSetStart="@+id/historyScrollMapExpanded"
        app:constraintSetEnd="@+id/mapFull"
        app:duration="1000">

        <OnClick
            app:touchAnchorId="@+id/rvItineraryHistoryList"
            app:targetId="@id/mapView"
            app:clickAction="transitionToEnd" />
    </Transition>

    <ConstraintSet android:id="@+id/mapFull" >
        <Constraint
            android:id="@id/mapView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">
            <CustomAttribute
                app:attributeName="alpha"
                app:customFloatValue="1.0" />
        </Constraint>

        <Constraint
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:id="@id/rvItineraryHistoryList"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="parent">

        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/historyScrollMapExpanded" >
        <Constraint
            android:id="@id/mapView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/rvItineraryHistoryList"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">
            <CustomAttribute
                app:attributeName="alpha"
                app:customFloatValue="1.0" />
        </Constraint>

        <Constraint
            android:id="@id/btnItineraryWhere">
            <CustomAttribute
                app:attributeName="alpha"
                app:customFloatValue="1.0" />
        </Constraint>

        <Constraint
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:id="@id/rvItineraryHistoryList"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/mapView">

        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/historyScrollCollpased">
        <Constraint
            android:id="@id/mapView"
            android:layout_height="0dp"
            android:layout_width="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="@+id/statusSpace"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <CustomAttribute
                app:attributeName="alpha"
                app:customFloatValue="0.0" />
        </Constraint>

        <Constraint
            android:id="@id/btnItineraryWhere">
            <CustomAttribute
                app:attributeName="alpha"
                app:customFloatValue="0.0" />
        </Constraint>

    </ConstraintSet>
</MotionScene>

Did anyone manage to do that? Thanks

[luoyexk]

same problem

[mitchtabian]

I have the same problem. Seems like the map can't render while it's in motion. https://vimeo.com/443199734

[CloseFile]

I have the same problem. Seems like the map can't render while it's in motion. https://vimeo.com/443199734

Thank you very match for the great android lessons. Try this old version androidx.constraintlayout:constraintlayout:2.0.0-alpha3. It's last good working version with maps in my app.

[mitchtabian]

Thanks I'll try it tomorrow

[AlexSuvorov2k]

This is solved?

[surajsahani]

this is fixed, use latest version