[Android Themes] Yorzua:
conversations.xml / conversations_row.xml

Next screen after registering your phone number and your name will be the "Chats" screen

This screen is composed by conversations.xml and conversations_row.xml

To understand all the mechanism of those two xml's, you may preferably have some notions of how works a Layout in android.

As i said, the order of chapters may differ

I. Intro

II. Drawables

III. Gradients & Selectors

IV. Layout

V. Values & Manifest

VI. Tweaks & Updates

If you dont have notions at all about how works a Layout in android, i will try to simplify and clarify as more as possible sticking to the whatsapp architecture.

The "Chats" screen is a great example of simple layout we can work on to make it more unique and less boring than the stock one.

◘◘◘ Conversations.xml will allow you to mod the header part :

header

text

icons

• android:background="@null"

will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )

• style="@style/Header"

Each style can be found and modified in the file "styles.xml" located at \Whatsapp\res\values\styles

in this case, the style Header will attribute to the Chats screen the following header settings :

<item name="android:gravity">center_vertical</item>

<item name="android:background">@drawable/header_repeat</item>

<item name="androidaddingTop">2.0dip</item>

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

<item name="android:layout_height">@dimen/header_height</item>

again, the png for my header in the Chats screen will be

android:background">@drawable/header_repeat which correspond to the header_repeat.xml

<bitmap android:src="@drawable/topbar_pattern" android:tileMode="repeat"

• The next layout ( <LinearLayout> blablablbalbaa </LinearLayout> ) will allow you to set the content of the header for Chats screen

In the stock apk, you get :

<LinearLayout android:gravity="left|center" android:id="@id/header_ll" android:layout_width="fill_parent" android:layout_height="fill_parent">

<TextView android:layout_gravity="left|center" android:text="@string/chats" style="@style/Text.HeaderCentered" />

<ImageView android:layout_gravity="top|right|center" android:id="@id/divider1" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" />

<ImageButton android:layout_gravity="right|center" android:id="@id/button_search" android:background="@null" android:layout_width="@dimen/header_height" android:layout_height="@dimen/header_height" android:src="@drawable/button_search" android:scaleType="center" style="@style/HeaderButton" />

<ImageView android:layout_gravity="top|right|center" android:id="@id/divider1" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" />

<ImageButton android:layout_gravity="right|center" android:id="@id/button_compose_chat" android:background="@null" android:layout_width="@dimen/header_height" android:layout_height="@dimen/header_height" android:src="@drawable/button_pen" android:scaleType="center" style="@style/HeaderButton" />

</LinearLayout>

Which correspond to

In my XL versions, i changed this order for this one

==> Notice that you can erase the dividers between the icons by :

editing the png divider1.png located in \res\drawable-hdpi ( blank png )

or

changing android:background="@drawable/divider" by android:background="@null"

• <ScrollView android:id="@id/conversations_empty" android:background="@drawable/background_repeat"

will allow you to set a background for the Chats screen when not enough conversations are running to fill the screen so a background is required

You can set android:background="@null" for no background

You can even delete this option or to set a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )

• the last layout of conversations.xml will allow you to set the welcome screen

LinearLayout android:orientation="vertical" android:paddingLeft="@dimen/horizontal_padding" android:paddingRight="@dimen/horizontal_padding" android:layout_width="fill_parent" android:layout_height="fill_parent">

<ImageView android:layout_gravity="center" android:paddingTop="50.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circlepenicon" />

<TextView android:textSize="22.0sp" android:textStyle="bold" android:paddingTop="20.0dip" android:paddingBottom="3.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/welcome" style="@style/Text" />

<TextView android:textSize="14.0sp" android:id="@id/welcome_message" android:paddingBottom="50.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/welcome_message" style="@style/Text" />

</LinearLayout>

same than usual, you can edit the text

android:textSize="22.0sp"

android:textStyle="bold

you can edit the content of the text

android:text="@string/welcome_message" located in \res\values

in my case,

<string name="welcome_message">Para empezar a enviar mensajes a los contactos que ya tengan WhatsApp en su móvil, toque el icono de la esquina superior derecha.</string>

Congratulations, you just learn how to mod the header for the Chats screen

This method works for all the headers you will find in each screen.

----------------------- ----------------------------

We need now to mod the next part of the screen which are the rows corresponding of the running chats

◘◘◘ Conversations_row.xml will allow you to mod the rows part :

contact picture

name picture

date

last message

• android:layout_height="@dimen/conversations_row_height"

will allow you to change the height of the row which drives you to the dimens.xml located in \res\values

<dimen name="conversations_row_height">67.0dip</dimen>

• android:id="@id/contact_photo" android:layout_width="@dimen/imageview_size" android:layout_height="@dimen/imageview_size"

will allow you to change the height & width of the contact picture of the row which drives you to the dimens.xml located in \res\values

<dimen name="imageview_size">50.0dip</dimen>

==> in this case,the height of the row is 67.0dip so bigger than the height of the contact picture with 50.0dip but you can set the same in order to make perfectly fit the picture inside the row like this

• <com.whatsapp.TextEmojiLabel android:id="@id/conversations_row_contact_name"

will allow you to mod the contact name

android:textSize="18.0sp"

android:textStyle="bold"

android:textColor="#ffffffff"

You will be able to create a style or not

• <TextView android:id="@id/conversations_row_date"

will allow you to mod the date of the conversation

android:textSize="@dimen/conversation_date_size"

android:textColor="#ff999999"

You will be able to create a style or not

• <com.whatsapp.TextEmojiLabel android:id="@id/msg_from_tv"

will allow you to mod the last message sent in the conversation

android:textSize="13.329987sp"

android:textColor="#ff999999"

You will be able to create a style or not

• <com.whatsapp.TextEmojiLabel android:id="@id/single_msg_tv"

same story for this one

android:textSize="13.329987sp"

android:textColor="#ff999999"

You will be able to create a style or not

• <com.whatsapp.UnreadMsgIndicator android:id="@id/conversations_row_message_count"

will allow you to mod the counter for the messages not read yet in the conversation

A style is already setup for this @id ( style="@style/Text" ) but you will be able to create another style or not

Like show the example :

Last point, the dividers between each row can be mod on the end of conversations_row.xml :

<View android:background="@drawable/gradient" android:layout_width="fill_parent" android:layout_height="1.0px" android:layout_alignParentBottom="true" />

<View android:background="@drawable/gradient" android:layout_width="fill_parent" android:layout_height="1.0px" android:layout_alignParentTop="true" />

• android:background="@drawable/gradient"

will allow you to change the background by changing to a solid color "#ffrrggbb" or a gradient ="@drawable/gradient" or a transparent background ( will see that in another chapter )

in my case, i did use diferent solutions for each of my versions

you can create a new xml called for example "gradient.xml " with :

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

<shape android:shape="rectangle"

xmlns:android="http://schemas.android.com/apk/res/android">

<gradient android:startColor="#ff000000" android:endColor="#ff000000" android:angle="0.0" android:centerColor="#ffffffff" />

</shape>

==> android:background="@drawable/gradient" will take the values from gradient.xml and gives an interesting result like this :

•◘○ After all those points explained, the most curious of you will ask me where we can mod the dark & light background color to get alternative rows :rolleyes:

Well, i will explained it in another chapter but for those who cant wait _ you will find it \res\drawable-hdpi\

selector_orange_gradient_on_beige

selector_orange_gradient_on_gray

Both will allow you to mod the background color changing the last gradient :

<item>

<shape>

<gradient android:startColor="#ff000000" android:endColor="#ff333333" android:angle="90.0" />

</shape>

</item>

</selector>

It can be a simple gradient with 2 colors :

It can be a gradient with 3 colors :

It can be a gradient with 2 similar starting colors in both xmls :

Happy theming :D