This gets the playback ui exactly like the redlines.
- Various fixes to make voicemail playback ui just like the redlines.
- Swap speakerphone and playback buttons over.
- Vastly expanded seekbar area, as well as bigger touch targets for rate
buttons.
- Rate buttons and seekbar now correctly vertically aligned with one
another.
- Adds the second blue separator line after the contact picture.
- Makes the thumb seek drawable always centred on the seek bar current
position, including making it overhang the seek bar by half its width
at each extreme end (looks much better).
Bug: 5070975
Change-Id: I530fd5bccab688f20f9f6b3c3919da3a475c8ba5
diff --git a/res/drawable/seek_bar_thumb.xml b/res/drawable/seek_bar_thumb.xml
index 04ba0fa..61884bb 100644
--- a/res/drawable/seek_bar_thumb.xml
+++ b/res/drawable/seek_bar_thumb.xml
@@ -6,8 +6,8 @@
android:shape="oval"
>
<size
- android:width="15dip"
- android:height="15dip"
+ android:width="16dip"
+ android:height="16dip"
/>
<solid
android:color="@color/voicemail_playback_seek_bar_yet_to_play"
diff --git a/res/layout/call_detail.xml b/res/layout/call_detail.xml
index 441cc6c..ece2f64 100644
--- a/res/layout/call_detail.xml
+++ b/res/layout/call_detail.xml
@@ -52,10 +52,17 @@
/>
</view>
<LinearLayout
+ android:id="@+id/blue_separator"
+ android:layout_width="match_parent"
+ android:layout_height="1dip"
+ android:background="@android:color/holo_blue_light"
+ android:layout_below="@+id/contact_background_sizer"
+ />
+ <LinearLayout
android:id="@+id/voicemail_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
- android:layout_below="@id/contact_background_sizer"
+ android:layout_below="@id/blue_separator"
>
<!-- The voicemail fragment will be put here. -->
</LinearLayout>
diff --git a/res/layout/playback_layout.xml b/res/layout/playback_layout.xml
index 020c017..45e7ad9 100644
--- a/res/layout/playback_layout.xml
+++ b/res/layout/playback_layout.xml
@@ -19,75 +19,90 @@
android:layout_alignParentTop="true"
>
<ImageButton
- android:id="@+id/playback_speakerphone"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:padding="5px"
- android:layout_marginTop="4dip"
- android:layout_marginLeft="4dip"
- android:background="@drawable/dialpad_background"
- android:src="@drawable/ic_sound_holo_dark"
- android:layout_weight="1"
- />
- <ImageButton
android:id="@+id/playback_start_stop"
android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:padding="5px"
- android:layout_marginTop="4dip"
- android:layout_marginLeft="4dip"
+ android:layout_height="58dip"
+ android:layout_marginRight="2dip"
android:background="@drawable/dialpad_background"
android:src="@drawable/ic_hold_pause_holo_dark"
android:layout_weight="1"
/>
+ <ImageButton
+ android:id="@+id/playback_speakerphone"
+ android:layout_width="wrap_content"
+ android:layout_height="58dip"
+ android:layout_marginLeft="2dip"
+ android:background="@drawable/dialpad_background"
+ android:src="@drawable/ic_sound_holo_dark"
+ android:layout_weight="1"
+ />
</LinearLayout>
- <SeekBar
- android:id="@+id/playback_seek"
+ <RelativeLayout
+ android:id="@+id/seek_container"
android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:progressDrawable="@drawable/seekbar_drawable"
- android:thumb="@drawable/seek_bar_thumb"
- android:thumbOffset="0dip"
+ android:layout_height="80dip"
android:background="@drawable/dialpad_background"
- android:paddingLeft="50dip"
- android:paddingRight="50dip"
- android:paddingTop="10dip"
- android:paddingBottom="20dip"
- android:layout_margin="4dip"
- android:progress="20"
- android:max="50"
android:layout_below="@id/buttons_linear_layout"
- />
- <TextView
- android:id="@+id/playback_position_text"
- android:text="@string/voicemail_initial_time"
- android:layout_height="wrap_content"
- android:layout_width="wrap_content"
- android:paddingBottom="5dip"
- android:layout_alignBottom="@id/playback_seek"
- android:layout_centerHorizontal="true"
- />
- <ImageButton
- android:id="@+id/rate_decrease_button"
- android:src="@drawable/ic_minus_holo_dark"
- android:layout_width="30dip"
- android:layout_height="wrap_content"
- android:background="@android:color/transparent"
- android:paddingTop="10dip"
- android:paddingBottom="15dip"
- android:layout_alignLeft="@id/playback_seek"
- android:layout_alignBottom="@id/playback_seek"
- />
- <ImageButton
- android:id="@+id/rate_increase_button"
- android:src="@drawable/ic_plus_holo_dark"
- android:layout_width="30dip"
- android:layout_height="wrap_content"
- android:background="@android:color/transparent"
- android:paddingTop="10dip"
- android:paddingBottom="15dip"
- android:layout_alignRight="@id/playback_seek"
- android:layout_alignBottom="@id/playback_seek"
- />
+ android:layout_marginTop="4dip"
+ >
+ <!-- SeekBar left-right margin decreased from redlines 72dip by 8dip to account for
+ half thumb width (thumb is 16dip).
+ Vertically, SeekBar and rate buttons should be below centre, position achieved by
+ making them centred but giving a difference between top and bottom padding,
+ difference is currently 10dip. -->
+ <SeekBar
+ android:id="@+id/playback_seek"
+ android:layout_width="fill_parent"
+ android:layout_height="wrap_content"
+ android:progressDrawable="@drawable/seekbar_drawable"
+ android:thumb="@drawable/seek_bar_thumb"
+ android:thumbOffset="8dip"
+ android:progress="20"
+ android:paddingLeft="8dip"
+ android:paddingRight="8dip"
+ android:paddingTop="30dip"
+ android:paddingBottom="20dip"
+ android:layout_marginRight="64dip"
+ android:layout_marginLeft="64dip"
+ android:max="50"
+ android:layout_centerVertical="true"
+ />
+ <TextView
+ android:id="@+id/playback_position_text"
+ android:text="@string/voicemail_initial_time"
+ android:layout_height="wrap_content"
+ android:layout_width="wrap_content"
+ android:textSize="14sp"
+ android:layout_alignParentTop="true"
+ android:layout_centerHorizontal="true"
+ android:layout_marginTop="10dip"
+ />
+ <ImageButton
+ android:id="@+id/rate_decrease_button"
+ android:src="@drawable/ic_minus_holo_dark"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:background="@android:color/transparent"
+ android:paddingLeft="16dip"
+ android:paddingRight="16dip"
+ android:paddingBottom="16dip"
+ android:paddingTop="26dip"
+ android:layout_alignParentLeft="true"
+ android:layout_centerVertical="true"
+ />
+ <ImageButton
+ android:id="@+id/rate_increase_button"
+ android:src="@drawable/ic_plus_holo_dark"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:background="@android:color/transparent"
+ android:paddingLeft="16dip"
+ android:paddingRight="16dip"
+ android:paddingBottom="16dip"
+ android:paddingTop="26dip"
+ android:layout_alignParentRight="true"
+ android:layout_centerVertical="true"
+ />
+ </RelativeLayout>
</RelativeLayout>
</LinearLayout>