[Android Themes] Yorzua:
conversation_text_row_left.xml / conversation_text_row_right.xml

Busy at work, i can barely update all i would like to go into deep explanation but as it was asked : here is the solution to mod the content of the bubbles ;)

The two files you need to edit are located in \WhatsApp\res\layout :

○ conversation_text_row_left.xml

○ conversation_text_row_right.xml

They are slightly diferent so pay attention to this article before copy/paste one to the other.

• conversation_text_row_left.xml

This xml will allow you to mod the content of the bubbles for your contact answers but also for the group answers which are displayed on the left side of your conversation screen as well.

This is the content :

• <com.whatsapp.DividerView android:id="@id/date_divider" style="@style/DateDivider" />

the date divider is corresponding here to the style "DateDivider" located in \WhatsApp\res\values\styles.xml

<style name="DateDivider">

<item name="android:textSize">11.0sp</item>

<item name="android:textStyle">italic</item>

<item name="android:textColor">#ff777777</item>

<item name="android:paddingLeft">5.0dip</item>

<item name="android:paddingTop">2.0dip</item>

<item name="android:paddingRight">2.0dip</item>

<item name="android:paddingBottom">2.0dip</item>

<item name="android:visibility">gone</item>

<item name="android:layout_width">wrap_content</item>

<item name="android:layout_height">wrap_content</item>

<item name="android:layout_marginBottom">@dimen/conversation_date_divider_marginbottom</item>

<item name="android:layout_alignParentTop">true</item>

<item name="android:layout_centerInParent">true</item>

• <LinearLayout android:gravity="left" android:orientation="vertical" android:id="@id/text_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/conversation_row_margin" android:layout_marginRight="@dimen/conversation_left_row_margin_right" android:layout_below="@id/date_divider" android:layout_alignParentLeft="true">

This layout linear ( opposite of the vertical layout ) defines here the position of the content for the bubbles and can be modified as well.

for example, android:layout_marginLeft="@dimen/conversation_row_margin" correspond to the value "conversation_row_margin" located in \WhatsApp\res\values\dimens.xml

<dimen name="conversation_row_margin">11.0dip</dimen>

• The next part will allow you to mod the text with the following parameters :

<TextView android:textSize="@dimen/conversation_participant_name_tv" android:textColor="#ffffffff" android:ellipsize="end" android:autoLink="all" android:layout_gravity="top" android:id="@id/name_in_group_tv" android:paddingLeft="4.0dip" android:paddingRight="6.0dip" android:paddingBottom="2.0dip" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:layout_weight="1.0" android:layout_alignParentLeft="true" />

As we explained many times in this tutorial, android:textColor="#ffffffff" indicates here that your contact bubbles will display a white text color for the groups :

android:id="@id/name_in_group_tv"

WARNING : If you dont see the color you have chosen in the xml, it is big chances you might have to look at the smali's files located in \WhatsApp\smali\whatsapp

I will explain it clearly in the chapter VI. Tweaks & Updates :cool:

• <LinearLayout android:orientation="horizontal" android:id="@id/text_content_layout" android:layout_width="wrap_content" android:layout_height="wrap_content">

<TextView android:textSize="@dimen/conversation_text_row_tv" android:textColor="#ff33b5e5" android:autoLink="all" android:id="@id/message_text" android:paddingLeft="4.0dip" android:paddingBottom="2.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="4.0dip" android:layout_weight="1.0" />

Here, android:textColor="#ff33b5e5" indicates here that your contact bubbles will display a blue ics text color for a single contact :

android:id="@id/message_text"

• <TextView android:textSize="@dimen/conversation_date_size" android:textStyle="italic" android:textColor="#ffffffff" android:layout_gravity="bottom|left|center" android:id="@id/date" android:paddingBottom="2.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="4.0dip" />

</LinearLayout>

</LinearLayout>

Here, android:textColor="#ffffffff" indicates here that your contact bubbles will display a white text color for the date/time of the messages sent :

android:id="@id/date"

________________________________________

• conversation_text_row_right.xml

This xml will allow you to mod the content of your own bubbles which are displayed on the right side of your conversation screen.

This is the content :

• <com.whatsapp.DividerView android:id="@id/date_divider" style="@style/DateDivider" />

the date divider is corresponding here to the style "DateDivider" located in \WhatsApp\res\values\styles.xml

<style name="DateDivider">

<item name="android:textSize">11.0sp</item>

<item name="android:textStyle">italic</item>

<item name="android:textColor">#ff777777</item>

<item name="android:paddingLeft">5.0dip</item>

<item name="android:paddingTop">2.0dip</item>

<item name="android:paddingRight">2.0dip</item>

<item name="android:paddingBottom">2.0dip</item>

<item name="android:visibility">gone</item>

<item name="android:layout_width">wrap_content</item>

<item name="android:layout_height">wrap_content</item>

<item name="android:layout_marginBottom">@dimen/conversation_date_divider_marginbottom</item>

<item name="android:layout_alignParentTop">true</item>

<item name="android:layout_centerInParent">true</item>

• <LinearLayout android:gravity="right" android:id="@id/text_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="18.0dip" android:layout_marginRight="@dimen/conversation_row_margin" android:layout_marginBottom="6.0dip" android:layout_below="@id/date_divider" android:layout_alignParentRight="true">

This layout linear ( opposite of the vertical layout ) defines here the position of the content for the bubbles and can be modified as well.

for example, android:layout_marginLeft="@dimen/conversation_row_margin" correspond to the value "conversation_row_margin" located in \WhatsApp\res\values\dimens.xml

<dimen name="conversation_row_margin">11.0dip</dimen>

• The next part will allow you to mod the text with the following parameters :

<TextView android:textSize="11.0sp" android:textStyle="italic" android:textColor="#ff666666" android:layout_gravity="bottom|right|center" android:id="@id/date" android:paddingLeft="6.0dip" android:paddingRight="2.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/status" android:layout_alignBottom="@id/message_text" />

Here, android:textColor="#ffffffff" indicates here that your own bubbles will display a white text color for the date/time of the messages sent :

android:id="@id/date"

• <ImageView android:layout_gravity="bottom|right|center" android:id="@id/status" android:paddingLeft="4.0dip" android:paddingBottom="2.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/message_text" android:layout_alignBottom="@id/date" />

This part will allow you to mod the parameters for android:id="@id/status"

• You will need to mod the status png's for the bubbles which indicates the send/waiting/reception status of the message which are located in \WhatsApp\res\drawable-hdpi :

message_got_receipt_from_server

message_got_receipt_from_target

msg_status_client_received

msg_status_server_receive

message_unsent

msg_status_gray_waiting

Those png's are not directly affiliated to conversation_text_row_left.xml / conversation_text_row_right.xml but to conversation.xml which will be explained in the next article ( big xml full of content and more suitable to be detailed piece by piece ) :)

• <TextView android:textSize="@dimen/conversation_text_row_tv" android:textColor="#ffffffff" android:gravity="center_vertical" android:autoLink="all" android:id="@id/message_text" android:paddingLeft="4.0dip" android:paddingBottom="2.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" />

</LinearLayout>

Here, android:textColor="#ffffffff" indicates here that your own bubbles will display a white text color for the date/time of the messages sent :

android:id="@id/message_text"

Happy theming :D