Android中的聊天布局

Question

我正在尝试创建这样的布局（蓝色气泡）：

但是，在我的下面的XML中，蓝色气泡延伸到片段的整个宽度，尽管我已经将宽度指定为wrap_content。有什么想法吗？

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="5dp"
    android:paddingRight="17dp"
    android:paddingLeft="17dp"
    android:layout_alignParentRight="true"
    android:gravity="right"
    android:layout_gravity="right"
    android:paddingTop="5dp">

    <RelativeLayout
        android:layout_width="wrap_content" android:id="@+id/bubble_user"  android:gravity="end" android:background="@drawable/chat_user_reply_background"  android:layout_alignParentRight="true"
        android:layout_height="wrap_content">



    <ImageView
        android:id="@+id/user_reply_status"
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:layout_alignBottom="@+id/chat_user_reply"
        android:layout_marginBottom="5dp"
        android:layout_marginRight="10dp"
       android:layout_alignParentRight="true"


        android:src="@drawable/ic_single_tick"
        android:visibility="visible" />

        <TextView
            android:id="@+id/user_reply_timing"
            style="@style/chat_timings"
            android:layout_alignBottom="@id/chat_user_reply"
            android:textColor="@color/gray"
            android:paddingBottom="5dp"
            android:layout_marginRight="2dp"
            android:layout_toLeftOf="@id/user_reply_status"
            android:text="17:10" />

        <TextView
            android:id="@+id/chat_user_reply"
            style="@style/chat_text_message_style"

            android:layout_toLeftOf="@id/user_reply_timing"
            android:maxWidth="280dp"
            android:autoLink="web"
            android:text="Rahul Agrawal is a good boy but he does not know what he wants." />

    </RelativeLayout>

</RelativeLayout>


<style name="chat_text_message_style">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/chat_message_text_color</item>
        <item name="android:paddingTop">5dp</item>
        <item name="android:paddingBottom">5dp</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:textSize">18sp</item>
    </style>

    <style name="chat_timings">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">12sp</item>
    </style>

Answer 1

检查用作RelativeLayout背景的图像的大小，或更改Layout的宽度。使用宽度为100dp的相同xml。

<强>更新 TextView的maxWidth根据设计进行调整。

看起来像这样：