MaterialContainerTransform异常：目标容器未识别，点击FAB仅显示白屏

问题症状 #

点击悬浮操作按钮（FAB）后仅显示白屏，日志输出错误提示：
MaterialContainerTransform: Skipping due to null end bounds. Ensure end view is laid out and measured

问题代码 #

fragment_motion.xml #

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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/containerMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MotionFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/viewEnd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:visibility="gone">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/containerBar"
            android:layout_width="0dp"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/error_color"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageButton
                android:id="@+id/btnCancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:src="@drawable/ic_close"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                style="@style/TextAppearance.MyTheme.Headline5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:text="Settings"
                android:textColor="@color/white"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/btnCancel"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum"
            app:layout_constraintTop_toBottomOf="@id/containerBar" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/viewStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_filter_list" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

MotionFragment.java #

package com.example.material;

import android.os.Bundle;

import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import androidx.fragment.app.DialogFragment;
import androidx.transition.TransitionManager;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.transition.MaterialContainerTransform;

public class MotionFragment extends DialogFragment {

    private FloatingActionButton viewStart;
    private CoordinatorLayout containerMain;
    private ConstraintLayout viewEnd;

    public MotionFragment() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NORMAL,
                com.google.android.material.R.style.ShapeAppearanceOverlay_MaterialComponents_MaterialCalendar_Window_Fullscreen);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_motion, container, false);

        viewStart = view.findViewById(R.id.viewStart);
        containerMain = view.findViewById(R.id.containerMain);
        viewEnd = view.findViewById(R.id.containerBar);

        viewStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MaterialContainerTransform transform = new MaterialContainerTransform();

                switch (v.getId()) {
                    case R.id.btnCancel:
                        break;
                    case R.id.viewStart:
                        transform.setStartView(viewStart);
                        transform.setEndView(viewEnd);
                        transform.addTarget(viewEnd);

                        TransitionManager.beginDelayedTransition(containerMain, transform);
                        viewStart.setVisibility(View.GONE);
                        viewEnd.setVisibility(View.VISIBLE);
                        break;
                }
            }
        });
        return view;
    }
}

问题根源 #

1. 目标视图引用错误：代码中将viewEnd绑定到了子布局containerBar，但containerBar的父布局viewEnd处于gone状态，导致containerBar从未被系统测量和布局，转场无法获取其边界信息。
2. 可见性切换逻辑错误：仅切换containerBar的可见性，但父布局viewEnd始终为gone，导致转场后只有containerBar显示，父布局的白色背景未正常渲染，出现白屏。

修复步骤 #

步骤1：修正目标视图引用 #

将viewEnd的绑定对象改为父布局@id/viewEnd：

// 原代码
viewEnd = view.findViewById(R.id.containerBar);
// 修改后
viewEnd = view.findViewById(R.id.viewEnd);

步骤2：调整转场目标与可见性切换逻辑 #

转场目标设为viewEnd，同时切换viewEnd的可见性：

case R.id.viewStart:
    transform.setStartView(viewStart);
    transform.setEndView(viewEnd);
    transform.addTarget(viewEnd);

    TransitionManager.beginDelayedTransition(containerMain, transform);
    viewStart.setVisibility(View.GONE);
    viewEnd.setVisibility(View.VISIBLE);
    break;

步骤3：可选优化 - 配置转场属性 #

添加Material Design风格的转场配置，提升视觉效果：

MaterialContainerTransform transform = new MaterialContainerTransform();
transform.setDuration(300); // 设置转场时长
transform.setScrimColor(getResources().getColor(android.R.color.transparent)); // 移除遮罩层
transform.setContainerColor(getResources().getColor(android.R.color.white)); // 匹配目标布局背景色

步骤4：添加逆向转场逻辑 #

为关闭按钮添加点击事件，实现从底部布局收缩回FAB的逆向转场：

// 在onCreateView中初始化关闭按钮
ImageButton btnCancel = view.findViewById(R.id.btnCancel);
btnCancel.setOnClickListener(v -> {
    MaterialContainerTransform reverseTransform = new MaterialContainerTransform();
    reverseTransform.setStartView(viewEnd);
    reverseTransform.setEndView(viewStart);
    reverseTransform.addTarget(viewStart);

    TransitionManager.beginDelayedTransition(containerMain, reverseTransform);
    viewEnd.setVisibility(View.GONE);
    viewStart.setVisibility(View.VISIBLE);
});

最终效果 #

修复后，点击FAB会从FAB位置平滑展开底部布局，点击关闭按钮则逆向收缩回FAB，不再出现白屏和null end bounds错误。

内容的提问来源于stack exchange，提问作者Alfito69420