如何在Android Studio中实现CardView左侧边框处添加带‘KM’的ImageView？

核心思路 #

将ImageView与CardView置于同一父布局层级，通过偏移或负margin控制ImageView的位置，使其刚好卡在CardView的左侧边框处，同时调整层级确保ImageView显示在CardView上方。

方案一：使用ConstraintLayout实现（推荐） #

这种布局方式灵活性高，适配不同屏幕尺寸更方便：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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="wrap_content"
    android:padding="16dp">

    <!-- 主内容CardView -->
    <androidx.cardview.widget.CardView
        android:id="@+id/main_card"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        app:cardCornerRadius="8dp"
        app:cardElevation="4dp"
        app:layout_constraintTop_toTopOf="parent">

        <!-- CardView内部的自定义内容 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="CardView内容区域" />

    </androidx.cardview.widget.CardView>

    <!-- 左侧KM标识ImageView -->
    <ImageView
        android:id="@+id/km_icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:scaleType="centerInside"
        android:src="@drawable/km_icon" <!-- 替换为你的KM图标资源 -->
        android:elevation="6dp" <!-- 确保图标显示在CardView上方 -->
        app:layout_constraintLeft_toLeftOf="@id/main_card"
        app:layout_constraintTop_toTopOf="@id/main_card"
        app:layout_constraintBottom_toBottomOf="@id/main_card"
        android:translationX="-20dp" <!-- 向左偏移一半宽度，让图标一半在CardView外 -->
        />

</androidx.constraintlayout.widget.ConstraintLayout>

方案二：使用TextView替代ImageView（更灵活） #

如果不需要图片，直接用TextView显示"KM"可以节省图片资源，同时方便修改文本样式：

<!-- 替换上述布局中的ImageView为以下TextView -->
<TextView
    android:id="@+id/km_text"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:background="@drawable/circle_gray_bg" <!-- 自定义圆形背景 -->
    android:text="KM"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    android:gravity="center"
    android:elevation="6dp"
    app:layout_constraintLeft_toLeftOf="@id/main_card"
    app:layout_constraintTop_toTopOf="@id/main_card"
    app:layout_constraintBottom_toBottomOf="@id/main_card"
    android:translationX="-20dp" />

对应的圆形背景circle_gray_bg.xml（放在drawable目录）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#808080"/>
    <size android:width="40dp" android:height="40dp"/>
</shape>

Java代码动态设置（可选） #

如果需要在代码中动态修改图标或文本，可参考以下代码：

// 在Activity/Fragment中
ImageView kmIcon = findViewById(R.id.km_icon);
kmIcon.setImageResource(R.drawable.new_km_icon); // 动态替换图标

// 如果用TextView的话
TextView kmText = findViewById(R.id.km_text);
kmText.setText("KM"); // 动态修改文本
kmText.setBackgroundResource(R.drawable.new_circle_bg); // 动态修改背景

关键注意点 #

1. 层级控制：给ImageView/TextView设置比CardView更高的elevation，避免被CardView遮挡。
2. 位置调整：translationX="-20dp"是基于图标宽度40dp设置的，如果你修改了图标尺寸，需要对应调整偏移值（一般为宽度的一半）。
3. 替代方案：也可以用android:layout_marginStart="-20dp"代替translationX，效果一致。

内容的提问来源于stack exchange，提问作者Ubaidur Rahman Shaikh