Android文本框背景样式实现求助：匹配目标设计样式

Hey there! Let's get that chat bubble style looking exactly how you want it. I notice your current chat_bubble.xml snippet is cut off, so I’ll walk you through building a complete, customizable solution that matches typical target chat bubble designs (like the ones in popular messaging apps).

Step 1: Create Custom Bubble Shape Drawables #

First, we’ll make two separate drawables for sender and receiver bubbles (since they usually have different colors and corner radii).

Receiver Bubble (Light Background)

Create res/drawable/chat_bubble_receiver.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- Light background color (adjust to match your target) -->
    <solid android:color="#F1F1F1" />
    <!-- Custom corners: large radii on top-left and bottom-right -->
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="8dp"
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="20dp" />
    <!-- Padding to keep text from touching the bubble edges -->
    <padding
        android:left="12dp"
        android:top="8dp"
        android:right="12dp"
        android:bottom="8dp" />
    <!-- Optional: Add a subtle border if needed -->
    <stroke
        android:width="1dp"
        android:color="#E0E0E0" />
</shape>

Sender Bubble (Dark Background)

Create res/drawable/chat_bubble_sender.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- Dark accent color (adjust to match your target) -->
    <solid android:color="#0084FF" />
    <!-- Custom corners: large radii on top-right and bottom-left -->
    <corners
        android:topLeftRadius="8dp"
        android:topRightRadius="20dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="8dp" />
    <!-- Same padding as receiver bubble for consistency -->
    <padding
        android:left="12dp"
        android:top="8dp"
        android:right="12dp"
        android:bottom="8dp" />
</shape>

Step 2: Dynamically Create TextViews with Bubble Styles #

Here’s how to create styled TextViews programmatically, with logic to switch between sender/receiver styles:

Kotlin Implementation

fun createStyledChatTextView(context: Context, isSender: Boolean, message: String): TextView {
    val textView = TextView(context).apply {
        text = message
        // Set text color based on bubble background
        setTextColor(if (isSender) android.graphics.Color.WHITE else android.graphics.Color.BLACK)
        setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
        // Apply the correct bubble background
        background = ContextCompat.getDrawable(
            context,
            if (isSender) R.drawable.chat_bubble_sender else R.drawable.chat_bubble_receiver
        )
        // Limit bubble width to 75% of screen to avoid overly wide bubbles
        maxWidth = (Resources.getSystem().displayMetrics.widthPixels * 0.75).toInt()
    }

    // Set layout params to align bubbles correctly (left for receiver, right for sender)
    val layoutParams = LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.WRAP_CONTENT,
        LinearLayout.LayoutParams.WRAP_CONTENT
    ).apply {
        if (isSender) {
            marginStart = dpToPx(context, 40)
            gravity = Gravity.END
        } else {
            marginEnd = dpToPx(context, 40)
            gravity = Gravity.START
        }
        bottomMargin = dpToPx(context, 8) // Add spacing between messages
    }

    textView.layoutParams = layoutParams
    return textView
}

// Helper extension to convert dp to pixels
private fun Int.dpToPx(context: Context): Int {
    return TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        this.toFloat(),
        context.resources.displayMetrics
    ).toInt()
}

Java Implementation

public static TextView createStyledChatTextView(Context context, boolean isSender, String message) {
    TextView textView = new TextView(context);
    textView.setText(message);
    // Set text color based on bubble background
    textView.setTextColor(isSender ? android.graphics.Color.WHITE : android.graphics.Color.BLACK);
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
    // Apply correct bubble background
    Drawable bubbleBg = isSender ?
            ContextCompat.getDrawable(context, R.drawable.chat_bubble_sender) :
            ContextCompat.getDrawable(context, R.drawable.chat_bubble_receiver);
    textView.setBackground(bubbleBg);
    // Limit bubble width to 75% of screen
    int maxWidth = (int) (Resources.getSystem().getDisplayMetrics().widthPixels * 0.75);
    textView.setMaxWidth(maxWidth);

    // Set layout params for alignment and spacing
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.WRAP_CONTENT,
            LinearLayout.LayoutParams.WRAP_CONTENT
    );
    if (isSender) {
        layoutParams.setMarginStart(dpToPx(context, 40));
        layoutParams.gravity = Gravity.END;
    } else {
        layoutParams.setMarginEnd(dpToPx(context, 40));
        layoutParams.gravity = Gravity.START;
    }
    layoutParams.bottomMargin = dpToPx(context, 8);
    textView.setLayoutParams(layoutParams);

    return textView;
}

// Helper method to convert dp to pixels
private static int dpToPx(Context context, int dp) {
    return (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dp,
            context.getResources().getDisplayMetrics()
    );
}

Step 3: Adjust to Match Your Exact Target #

If your target bubble has unique features (like a pointing arrow, gradient background, or specific corner sizes), you can tweak the drawable files:

• To add an arrow: Use a <layer-list> to combine the rectangle shape with a rotated triangle drawable.
• To change corner radii: Modify the android:radius values in the <corners> tag.
• For gradients: Replace the <solid> tag with a <gradient> tag to define start/end colors and direction.

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