如何让ImageView部分超出MaterialCardView？Android布局求助

要实现ImageView部分超出MaterialCardView的效果，核心是把ImageView和MaterialCardView放在同一父布局层级，让ImageView叠在CardView上方，而非嵌套在CardView内部——这样就不会导致CardView被拉伸。推荐用FrameLayout作为父容器实现叠层效果，以下是具体修改方案：

修改后的XML代码 #

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- 底部的MaterialCardView -->
    <com.google.android.material.card.MaterialCardView
        style="@style/BottomCornerRadiusCard"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:cardBackgroundColor="#0096ff">

        <!-- CardView内部原有内容 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <!-- 顶部姓名与退出按钮 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="16dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Фамилия Имя Отчество"
                    android:textColor="@color/white"
                    android:textSize="24sp"/>

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="auto"
                    android:background="#0096ff"
                    android:src="@drawable/baseline_exit_to_app_32"/>

            </LinearLayout>

            <!-- 底部评分文本 -->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="16dp"
                android:layout_marginBottom="16dp"
                android:text="Ваш рейтинг: N"
                android:textColor="@color/white"
                android:textSize="24sp"/>

        </LinearLayout>

    </com.google.android.material.card.MaterialCardView>

    <!-- 超出CardView的圆形头像 -->
    <com.google.android.material.card.MaterialCardView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="-50dp" <!-- 负margin让头像一半露在CardView外，数值可按需调整 -->
        app:cardCornerRadius="50dp">

        <com.google.android.material.card.MaterialCardView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_gravity="center"
            app:cardCornerRadius="45dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#0096ff"
                android:src="@drawable/micro_scooter"
                android:scaleType="centerInside"/>

        </com.google.android.material.card.MaterialCardView>

    </com.google.android.material.card.MaterialCardView>

</FrameLayout>

关键修改说明 #

• 父容器改用FrameLayout：支持子视图叠层，后添加的视图默认显示在上方
• 头像移至CardView外部：将原嵌套在CardView内的头像结构移到父容器，与CardView同级，避免拉伸CardView
• 负margin实现超出效果：通过layout_marginBottom="-50dp"让头像一半位于CardView底部外侧，可根据实际需求调整数值
• 优化内部布局层级：移除冗余的RelativeLayout，改用LinearLayout简化结构

内容的提问来源于stack exchange，提问作者Калашников Ян