чата в 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.Using же XML с 100dp шириной.

ОБНОВЛЕНИЕ Максимальная ширина TextView регулирует его в соответствии с дизайном.

Это выглядит следующим образом: