call: add connecting animation

Brings a pulse animation on contact avatar while calling
Clears wrong layout instructions and use ButterKnife for views
injections.
We use a different layout file in landscape to better use the available
screen estate.

Change-Id: Ie40f64bc8951b29cfc2c6b1c7640e05de149ccf9
Tuleap: #834
diff --git a/ring-android/app/src/main/res/layout/frag_call.xml b/ring-android/app/src/main/res/layout/frag_call.xml
index 656d3c7..7c9f8c9 100644
--- a/ring-android/app/src/main/res/layout/frag_call.xml
+++ b/ring-android/app/src/main/res/layout/frag_call.xml
@@ -44,53 +44,76 @@
             android:layout_margin="8dp"
             android:visibility="gone" />
 
-        <LinearLayout
+        <RelativeLayout
             android:id="@+id/contact_bubble_layout"
-            android:layout_width="fill_parent"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:layout_marginBottom="16dp"
-            android:gravity="center_horizontal"
-            android:orientation="vertical">
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_gravity="center"
+            android:layout_marginBottom="16dp">
 
-            <ImageView
-                android:id="@+id/contact_bubble"
-                android:layout_width="160dp"
-                android:layout_height="160dp"
-                android:layout_marginBottom="16dp"
-                android:layout_marginLeft="16dp"
-                android:layout_marginRight="16dp" />
+            <com.skyfishjy.library.RippleBackground
+                android:id="@+id/ripple_animation"
+                android:layout_width="230dp"
+                android:layout_height="230dp"
+                android:layout_centerInParent="true"
+                app:rb_color="@color/white"
+                app:rb_duration="5000"
+                app:rb_radius="20dp"
+                app:rb_rippleAmount="3"
+                app:rb_scale="6">
 
-            <TextView
-                android:id="@+id/contact_bubble_txt"
-                android:layout_width="match_parent"
+                <ImageView
+                    android:id="@+id/contact_bubble"
+                    android:layout_width="160dp"
+                    android:layout_height="160dp"
+                    android:layout_centerInParent="true"
+                    tools:src="@drawable/ic_contact_picture" />
+            </com.skyfishjy.library.RippleBackground>
+
+            <LinearLayout
+                android:layout_width="300dp"
                 android:layout_height="wrap_content"
-                android:gravity="center_horizontal"
-                android:singleLine="true"
-                android:textAppearance="?android:attr/textAppearanceLarge"
-                android:textColor="@color/text_color_primary_dark" />
+                android:layout_below="@id/ripple_animation"
+                android:layout_centerHorizontal="true"
+                android:layout_margin="10dp"
+                android:orientation="vertical">
 
-            <TextView
-                android:id="@+id/contact_bubble_num_txt"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:ellipsize="middle"
-                android:gravity="center_horizontal"
-                android:paddingEnd="8dp"
-                android:paddingStart="8dp"
-                android:singleLine="true"
-                android:textAppearance="?android:attr/textAppearanceMedium"
-                android:textColor="@color/text_color_secondary_dark" />
+                <TextView
+                    android:id="@+id/contact_bubble_txt"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:singleLine="true"
+                    android:textAppearance="?android:attr/textAppearanceLarge"
+                    android:textColor="@color/text_color_primary_dark"
+                    tools:text="Contact Name" />
 
-            <TextView
-                android:id="@+id/call_status_txt"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:textAppearance="?android:attr/textAppearanceMedium"
-                android:textColor="@color/text_color_primary_dark"
-                android:textSize="16sp" />
+                <TextView
+                    android:id="@+id/contact_bubble_num_txt"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:ellipsize="end"
+                    android:paddingEnd="32dp"
+                    android:paddingStart="32dp"
+                    android:singleLine="true"
+                    android:textAppearance="?android:attr/textAppearanceMedium"
+                    android:textColor="@color/text_color_secondary_dark"
+                    tools:text="ring:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
 
-        </LinearLayout>
+                <TextView
+                    android:id="@+id/call_status_txt"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="center_horizontal"
+                    android:textColor="@color/text_color_primary_dark"
+                    android:textSize="16sp"
+                    tools:text="Connecting" />
+
+            </LinearLayout>
+
+
+        </RelativeLayout>
 
         <LinearLayout
             android:layout_width="wrap_content"