[Android Themes] Yorzua:
registerphone / registername

Next screen will redirect you to register your phone number

The file is located in \Whatsapp\res\layout\registerphone.xml

• android:background="@drawable/background_repeat"

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 )

background_repeat correspond here to the background_repeat.xml in \Whatsapp\res\drawable-hdpi :

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

backpattern.png will be repeated as more as needed to fill the background of the registerphone screen.

• <RelativeLayout style="@style/Header">

<TextView android:ellipsize="end" android:text="@string/register_phone_header" style="@style/Text.Header" />

</RelativeLayout>

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

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 registerphone screen the following :

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

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

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

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

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

You can chose to work with a style or not, you can chose to edit directly a style but be aware that this style might be used by another xml and modifiy consequently both parts.

in this example, the png for my header in the registerphone screen will be

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

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

===> if you are following, you could avoid all this by changing from

<RelativeLayout style="@style/Header">

to

<RelativeLayout android:background="@drawable/topbar_pattern"

which is the same, except that the style allows you to add more settings in one command :

style="@style/Header"

is equal to

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

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

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

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

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

Easy, right ?! :rolleyes:

Same system for all the styles and you can add your own styles in the styles.xml

For all my versions, i added a couple of new styles in order to implement a diferent layout but will see that in next chapters.

• the text in the header will be defined by the style="@style/Text.Header"

style name="Text.Header" parent="@style/Text">

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

<item name="android:typeface">sans</item>

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

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

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

<item name="android:layout_gravity">left|center</item>

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

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

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

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

<item name="android:shadowColor">#ff333333</item>

<item name="android:shadowDx">0.0</item>

<item name="android:shadowDy">-1.0</item>

<item name="android:shadowRadius">1.0</item>

• <EditText android:textColor="#ff000000" android:textColorHint="#ff888888" android:gravity="center" android:id="@id/registration_phone"

will allow you to define the color for the digits you will enter in the field

• the text in the screen will be defined by the style="@style/Text.Description"

<style name="Text.Description" parent="@style/Text">

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

<item name="android:typeface">sans</item>

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

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

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

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

<item name="android:shadowColor">@color/white</item>

<item name="android:shadowDx">1.0</item>

<item name="android:shadowDy">1.0</item>

<item name="android:shadowRadius">0.0</item>

<item name="android:lineSpacingMultiplier">1.25</item>

<item name="android:textColor">#ff33b5e5</item> gives a ICS text colored for example

◘◘◘ Exactly the same works for the file registername.xml

this screen is the next after registering the phone number and will be modified with the same styles of registerphone.xml if you dont change it.