Alineación correcta de TextViews en RelativeLayout

Question

Estoy desarrollando una aplicación de mensajería instantánea para un curso universitario, similar a Whatsapp, ya que podría adivinar el icono en la captura de pantalla adjunta :).

Tengo un ListFragment poblado con un CursorAdapter personalizado. Da dos tipos de vistas, mensajes enviados (alineados a la derecha) y mensajes recibidos (alineados a la izquierda).

El diseño de los mensajes enviados funciona bien, pero no puedo decir lo mismo de los mensajes recibidos.

Aquí está una captura de pantalla:

diseño mensaje enviado:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" > 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:background="#FFCCCCCC" 
     android:padding="5dp" > 

     <TextView 
      android:id="@+id/ceo_timestamp" 
      android:layout_width="60sp" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:background="#FFBBBBBB" 
      android:gravity="center" 
      android:textSize="10sp" /> 

     <TextView 
      android:id="@+id/ceo_text" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@+id/ceo_timestamp" 
      android:background="#FFAAAAAA" 
      android:gravity="right" 
      android:textSize="16sp" /> 
    </RelativeLayout> 

</RelativeLayout> 

diseño de mensajes recibidos:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:gravity="left" > 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:background="#FF999999" 
     android:padding="5dp" > 

     <TextView 
      android:id="@+id/cei_timestamp" 
      android:layout_width="60sp" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:background="#FF888888" 
      android:gravity="center" 
      android:textSize="10sp" /> 

     <TextView 
      android:id="@+id/cei_text" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toLeftOf="@+id/cei_timestamp" 
      android:background="#FF777777" 
      android:gravity="right" 
      android:textSize="16sp" /> 
    </RelativeLayout> 

</RelativeLayout> 

se añaden Esos colores de fondo feas sólo para ver la espacio tomado para cada vista y diseño. Como puede ver en la captura de pantalla, enviar mensajes (alineados a la derecha) funciona muy bien. Los mensajes recibidos (alineados a la izquierda) no se están alineando bien, porque RelativeLayout toma todo el espacio horizontal disponible, con la intención de simplemente envolver el contenido.

¿Alguien sabe cómo solucionarlo, o tal vez un mejor diseño para lograr lo que necesito?

Muchas gracias.

Answer 1

En el diseño de mensajes enviados, reemplace el parámetro android: layout_alignParentRight = "true" con el android: layout_alignParentLeft = "true".

Answer 2

Cuando el hijo RelativeLayout es RelativeLayout, su ancho se cambiará automáticamente a match_parent. TextView cei_timestamp 's android:layout_alignParentRight="true" cambie el ancho de su padre de wrap_content a match_parent en silencio.
U tienen dos formas de corregir:

1. no utilizan RelativeLayout

   <?xml version="1.0" encoding="utf-8"?> 
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 
   
       <LinearLayout 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentLeft="true" 
        android:background="#FF999999" 
        android:padding="5dp" > 
   
        <TextView 
         android:id="@+id/cei_text" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:background="#FF777777" 
         android:gravity="right" 
         android:textSize="16sp" /> 
   
        <TextView 
         android:id="@+id/cei_timestamp" 
         android:layout_width="60sp" 
         android:layout_height="wrap_content" 
         android:background="#FF888888" 
         android:gravity="center" 
         android:textSize="10sp" /> 
   
       </LinearLayout> 
   
   </RelativeLayout> 
   

   
   

2. no utilice wrap_content, tanto el uso de ancho específico como 60dp.

Answer 3

Sé que es tarde pero lo estoy publicando para alguien que busca la solución al mismo problema. Para alinear el mensaje recibido a la izquierda, simplemente elimine esta línea del segundo TextView en xml para los mensajes recibidos.

android:layout_toLeftOf="@+id/cei_timestamp" 

Lo probé con un simple ejemplo y funcionó. Aquí está el código y la captura de pantalla

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="com.example.android.myapplication1.MainActivity"> 
<RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="#FF4081"> 

    <TextView 
     android:id="@+id/textView" 
     android:layout_width="60sp" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:gravity="center" 
     android:text="Hello" 
     android:textSize="23sp" /> 


    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toLeftOf="@+id/textView" 
     android:gravity="right" 
     android:text="New Text" 
     android:textColor="#FFF" 
     android:textSize="23sp" /> 
</RelativeLayout> 

<Button 
    android:id="@+id/button2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout centerHorizontal="true" 
    android:layout marginTop = "104dp" 
    android:text="New Button" /></RelativeLayout>`