Android布局求助：如何让两个卡片布局悬浮在界面中间

安全阿岳

2026-7-15

Android悬浮卡片布局实现方案

我设计了一款Android界面，希望让两个卡片布局悬浮在界面中间位置（覆盖在顶部banner下方），但始终无法实现。尝试了以下XML代码却未达到预期效果，搜索到的相关方案大多针对FloatingActionButton，因此求助。

原尝试代码

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:background="@drawable/icon_banner_home">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="20dp"
                android:lineSpacingExtra="8dp"
                android:text="@string/selamat_datang_admin" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center">

            <LinearLayout
                android:id="@+id/dashboard"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="10dp"
                android:background="@drawable/rounded_corner_menu"
                android:orientation="vertical"
                android:padding="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="10dp"
                    android:lineSpacingExtra="2dp"
                    android:text="90%"
                    android:textAlignment="center" />


                <TextView
                    android:layout_width="90dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:lineSpacingExtra="2dp"
                    android:text="Tugas Selesai Hari Ini"
                    android:textAlignment="center" />


            </LinearLayout>

            <LinearLayout
                android:id="@+id/checkin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_margin="10dp"
                android:layout_toRightOf="@+id/dashboard"
                android:background="@drawable/rounded_corner_menu"
                android:orientation="vertical"
                android:padding="10dp">

                <ImageView
                    android:layout_width="28dp"
                    android:layout_height="33dp"
                    android:layout_gravity="center"
                    android:src="@drawable/icon_green_checklist" />

                <TextView
                    android:layout_width="90dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:lineSpacingExtra="2dp"
                    android:text="Tepat Waktu"
                    android:textAlignment="center" />


            </LinearLayout>


        </RelativeLayout>

        <com.pastiberes.ExpandableHeightGridView
            android:id="@+id/gvMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_marginTop="50dp"
            android:columnWidth="100dp"
            android:gravity="center"
            android:isScrollContainer="false"
            android:numColumns="4"
            android:scrollbars="none"
            android:stretchMode="columnWidth"
            android:textAlignment="center" />


    </LinearLayout>

</ScrollView>

问题原因

原布局使用垂直方向的LinearLayout，卡片容器会被固定排在banner下方，无法实现悬浮覆盖的效果。需要改用支持灵活定位的布局容器，比如ConstraintLayout。

解决方案：改用ConstraintLayout实现悬浮效果

将外层LinearLayout替换为ConstraintLayout，通过设置负margin让卡片容器向上偏移，悬浮在banner和GridView之间，同时保持水平居中。

修改后的完整代码

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 顶部Banner -->
        <RelativeLayout
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:background="@drawable/icon_banner_home"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="20dp"
                android:lineSpacingExtra="8dp"
                android:text="@string/selamat_datang_admin" />

        </RelativeLayout>

        <!-- 悬浮卡片容器 -->
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/banner"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="-60dp"> <!-- 负margin让卡片向上偏移，值可根据卡片高度调整 -->

            <LinearLayout
                android:id="@+id/dashboard"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="10dp"
                android:background="@drawable/rounded_corner_menu"
                android:orientation="vertical"
                android:padding="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="10dp"
                    android:lineSpacingExtra="2dp"
                    android:text="90%"
                    android:textAlignment="center" />


                <TextView
                    android:layout_width="90dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:lineSpacingExtra="2dp"
                    android:text="Tugas Selesai Hari Ini"
                    android:textAlignment="center" />


            </LinearLayout>

            <LinearLayout
                android:id="@+id/checkin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_margin="10dp"
                android:layout_toRightOf="@+id/dashboard"
                android:background="@drawable/rounded_corner_menu"
                android:orientation="vertical"
                android:padding="10dp">

                <ImageView
                    android:layout_width="28dp"
                    android:layout_height="33dp"
                    android:layout_gravity="center"
                    android:src="@drawable/icon_green_checklist" />

                <TextView
                    android:layout_width="90dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:lineSpacingExtra="2dp"
                    android:text="Tepat Waktu"
                    android:textAlignment="center" />


            </LinearLayout>

        </RelativeLayout>

        <!-- 下方GridView -->
        <com.pastiberes.ExpandableHeightGridView
            android:id="@+id/gvMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_marginTop="20dp" <!-- 调整margin避免被卡片遮挡 -->
            android:columnWidth="100dp"
            android:gravity="center"
            android:isScrollContainer="false"
            android:numColumns="4"
            android:scrollbars="none"
            android:stretchMode="columnWidth"
            android:textAlignment="center"
            app:layout_constraintTop_toBottomOf="@id/banner" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

关键修改点

外层容器替换为ConstraintLayout，支持灵活的布局约束
给卡片容器设置app:layout_constraintTop_toBottomOf="@id/banner"，并添加负android:layout_marginTop，让卡片向上偏移，实现悬浮在banner下方的效果
调整GridView的layout_marginTop，避免被悬浮卡片遮挡
通过app:layout_constraintStart_toStartOf="parent"和app:layout_constraintEnd_toEndOf="parent"保证卡片水平居中

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

Android布局求助：如何让两个卡片布局悬浮在界面中间

原尝试代码 #

问题原因 #

解决方案：改用ConstraintLayout实现悬浮效果 #

修改后的完整代码 #

关键修改点 #

原尝试代码

问题原因

解决方案：改用ConstraintLayout实现悬浮效果

修改后的完整代码

关键修改点