[Android Themes] Yorzua:
contact_picker.xml / contact_picker_row.xml

You have now few ways from the Chats screen but to keep the dinamic of this tutorial, lets say you want to pick up a contact in your contact list for a new chat :

Next screen will be the "My contacts" screen

As for Chats screen ( header + rows ), this screen is composed by contact_picker.xml and contact_picker_row.xml

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 "My contacts" screen is a great example of simple layout we can work on to make it more unique and less boring than the stock one.

◘◘◘ contact_picker.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_rl" android:layout_width="fill_parent" android:layout_height="fill_parent">

<TextView android:ellipsize="end" android:layout_gravity="left|center" android:text="@string/whatsapp_contacts" android:maxLines="1" android:lines="1" android:singleLine="true" 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_help" android:background="@null" android:layout_width="@dimen/header_height" android:layout_height="@dimen/header_height" android:src="@drawable/button_help" android:scaleType="center" style="@style/HeaderButton" />

<ImageView android:layout_gravity="top|right|center" android:id="@id/divider2" 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" />

</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"

Here is no need to setup a scrollview as the list of contacts should be never empty _ all your whatsapp contacts would/should fill the height of a screen.

If not, the last part of the contact_picker.xml defines what comes in the empty space :

<View style="@style/HeaderDivider" />

<ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="0.0dip" android:cacheColorHint="@color/background" android:divider="@color/divider_gray" android:dividerHeight="1.0px" android:choiceMode="singleChoice" android:layout_weight="1.0" />

<include android:id="@id/contacts_empty" android:layout_below="@id/conversation_header" layout="@layout/empty_tell_a_friend" />

<LinearLayout android:id="@id/footer" android:background="@drawable/contactpicker_bar_repeat" android:paddingTop="4.0dip" android:paddingBottom="4.0dip" android:layout_width="fill_parent" android:layout_height="@dimen/header_height">

<ImageButton android:ellipsize="end" android:id="@id/groups_btn" android:background="@drawable/contactpicker_button" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_marginLeft="5.0dip" android:layout_marginRight="2.5dip" android:src="@drawable/groups" android:layout_weight="1.0" />

<ImageButton android:id="@id/contacts_btn" android:background="@drawable/contactpicker_button_pressed" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_marginLeft="2.5dip" android:layout_marginRight="5.0dip" android:src="@drawable/people" android:layout_weight="1.0" />

</LinearLayout>

</LinearLayout>

You are now more familiar with terms like

○ android:background="@drawable/

○ android:divider="@color/

○ style="@style/HeaderDivider"

I will explain deeper the rest of the codes in the Chapter IV. Layout :rolleyes:

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 contacts list

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

contact picture

contact name

phone type

contact status

• 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

• android:id="@id/contactpicker_row_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

• android:id="@id/contactpicker_row_phone_type"

will allow you to mod the type of the contact phone number ( can be mobile/other/etc )

android:textSize="12.0sp"

android:textColor="#ff999999"

android:gravity="right|center"

With the gravity, you can chose where to fit the @id/

You will be able to create a style or not

• android:id="@id/contactpicker_row_status"

will allow you to mod the status set as shown on the screenshot

android:textSize="14.0sp"

android:textStyle="normal"

android:textColor="#ff999999"

You will be able to create a style or not

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

</LinearLayout>

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

<View android:id="@id/contact_picker_divider_upper" android:background="@drawable/gradient" android:paddingBottom="2.0dip" android:layout_width="fill_parent" android:layout_height="1.0px" android:layout_alignParentTop="true" />

</RelativeLayout>

• 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 :

Or no divider at all :

•◘○ 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