Update headers in message view.

- this uses the new gradient/drop shadows
- adds quick contact badge triangle thing
- also puts in contentDescriptions for the reply/all/forward/star
  actions that were lost
- also merges the headers in tablet and phone

Bug: 5144711
Change-Id: Ie2d14c26b7818aa4389731794a15be6c31f4981d
This commit is contained in:
Ben Komalo 2011-08-09 16:11:20 -07:00
parent 2468b54db5
commit 136dedbbd9
15 changed files with 253 additions and 248 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 467 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 399 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 629 B

View File

@ -15,35 +15,31 @@
-->
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
<ImageButton
android:id="@+id/favorite"
style="@style/message_view_action_buttons"
android:src="@drawable/btn_star_off_normal_holo_light"
android:layout_width="32dip"
android:layout_height="24dip"
android:layout_margin="8dip"
android:contentDescription="@string/favorite_action"
/>
<ImageView
<ImageButton
android:id="@+id/reply"
style="@style/message_view_action_buttons"
android:src="@drawable/ic_reply_holo_dark"
android:layout_width="32dip"
android:layout_height="24dip"
android:layout_margin="8dip"
android:baselineAlignBottom="true"
android:contentDescription="@string/reply_action"
/>
<ImageView
<ImageButton
android:id="@+id/reply_all"
style="@style/message_view_action_buttons"
android:src="@drawable/ic_reply_all_holo_dark"
android:layout_width="32dip"
android:layout_height="24dip"
android:layout_margin="8dip"
android:baselineAlignBottom="true"
android:contentDescription="@string/reply_all_action"
/>
<ImageView
<!-- Add extra margin on the right for the last action on landscape -->
<ImageButton
android:id="@+id/forward"
style="@style/message_view_action_buttons"
android:src="@drawable/ic_forward_holo_dark"
android:layout_width="32dip"
android:layout_height="24dip"
android:layout_margin="8dip"
android:baselineAlignBottom="true"
android:contentDescription="@string/forward_action"
android:layout_marginRight="24dip"
/>
</merge>

View File

@ -19,7 +19,7 @@
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffffff"
android:background="@android:color/white"
>
<ProgressBar
android:id="@+id/loading_progress"
@ -56,129 +56,18 @@
style="@style/message_view_horizontal_divider"
/>
<!-- Badge -->
<ImageButton
android:id="@+id/badge"
android:layout_width="64dip"
android:layout_height="64dip"
android:layout_below="@id/subject_divider"
android:layout_alignLeft="@id/subject"
android:padding="0dip"
android:scaleType="fitCenter"
/>
<!-- Background for sender name and buttons -->
<View
android:id="@+id/header_background"
android:layout_width="0dip"
android:layout_height="64dip"
android:layout_below="@id/subject_divider"
android:layout_toRightOf="@id/badge"
android:layout_alignRight="@id/subject"
android:background="@color/message_view_header_color"
/>
<!--
reply, reply-all, forward, Star
These buttons can all be gone at runtime, so don't refer to individual buttons from
other views. Instead refer to this outer layout.
-->
<LinearLayout
android:id="@+id/forward_reply_buttons"
android:layout_width="wrap_content"
<!-- Upper header. Outer container needed only since the relative layout
params can't be passed in an include tag.-->
<FrameLayout
android:id="@+id/message_view_header_upper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dip"
android:layout_marginLeft="0dip"
android:layout_alignTop="@id/header_background"
android:layout_alignRight="@id/header_background"
android:orientation="horizontal"
android:layout_marginLeft="32dip"
android:layout_marginRight="32dip"
android:layout_below="@id/subject_divider"
>
<ImageButton
android:id="@+id/reply"
android:layout_marginRight="16dip"
android:contentDescription="@string/reply_action"
android:src="@drawable/ic_reply_holo_dark"
android:visibility="gone"
style="@style/message_view_action_buttons"
/>
<ImageButton
android:id="@+id/reply_all"
android:layout_marginRight="16dip"
android:contentDescription="@string/reply_all_action"
android:src="@drawable/ic_reply_all_holo_dark"
android:visibility="gone"
style="@style/message_view_action_buttons"
/>
<ImageButton
android:id="@+id/forward"
android:layout_marginRight="16dip"
android:contentDescription="@string/forward_action"
android:src="@drawable/ic_forward_holo_dark"
android:visibility="gone"
style="@style/message_view_action_buttons"
/>
<ImageButton
android:id="@+id/favorite"
android:layout_marginRight="16dip"
android:src="@drawable/btn_star_off_normal_holo_light"
style="@style/message_view_action_buttons"
/>
</LinearLayout>
<!-- presence, sender address, sender name: make them center_vertical -->
<LinearLayout
android:id="@+id/presence_from_name"
android:layout_width="0dip"
android:layout_height="0dip"
android:layout_alignTop="@id/header_background"
android:layout_alignBottom="@id/header_background"
android:layout_alignLeft="@id/header_background"
android:layout_toLeftOf="@id/forward_reply_buttons"
android:orientation="vertical"
android:gravity="center_vertical"
>
<LinearLayout
android:id="@+id/presence_from_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center|center_vertical"
>
<!-- Presence icon -->
<ImageView
android:id="@+id/presence"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginLeft="8dip"
android:layout_marginRight="8dip"
android:src="@android:drawable/presence_offline"
/>
<!-- Sender display name -->
<TextView
android:id="@+id/from_name"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="18dip"
android:textColor="@color/text_primary_color_inverse"
android:textStyle="bold"
android:singleLine="true"
android:ellipsize="end"
/>
</LinearLayout>
<!-- From address -->
<TextView
android:id="@+id/from_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dip"
android:layout_marginLeft="34dip"
android:textSize="14dip"
android:textColor="@color/text_secondary_color_inverse"
android:singleLine="true"
android:ellipsize="end"
/>
</LinearLayout>
<include layout="@layout/message_view_header_upper" />
</FrameLayout>
<!-- Addresses, timestamp -->
<FrameLayout
@ -187,7 +76,7 @@
android:layout_height="wrap_content"
android:layout_marginLeft="32dip"
android:layout_marginRight="32dip"
android:layout_below="@id/header_background"
android:layout_below="@id/message_view_header_upper"
>
<include layout="@layout/message_view_subheader" />
</FrameLayout>
@ -196,8 +85,8 @@
android:id="@+id/address_divider"
android:layout_width="0dip"
android:layout_below="@id/message_view_subheader"
android:layout_alignLeft="@id/badge"
android:layout_alignRight="@id/header_background"
android:layout_alignLeft="@id/message_view_header_upper"
android:layout_alignRight="@id/message_view_header_upper"
style="@style/message_view_horizontal_divider"
/>
@ -209,8 +98,8 @@
android:layout_width="0dip"
android:layout_height="0dip"
android:layout_below="@id/address_divider"
android:layout_alignLeft="@id/badge"
android:layout_alignRight="@id/header_background"
android:layout_alignLeft="@id/message_view_header_upper"
android:layout_alignRight="@id/message_view_header_upper"
android:layout_alignParentBottom="true"
android:orientation="vertical"
>

View File

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2011 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageButton
android:id="@+id/reply"
style="@style/message_view_action_buttons"
android:src="@drawable/ic_reply_holo_dark"
android:contentDescription="@string/reply_action"
android:baselineAlignBottom="true"
/>
<ImageButton
android:id="@+id/reply_all"
style="@style/message_view_action_buttons"
android:src="@drawable/ic_reply_all_holo_dark"
android:contentDescription="@string/reply_all_action"
android:baselineAlignBottom="true"
/>
<ImageButton
android:id="@+id/forward"
style="@style/message_view_action_buttons"
android:src="@drawable/ic_forward_holo_dark"
android:contentDescription="@string/forward_action"
android:baselineAlignBottom="true"
/>
<ImageButton
android:id="@+id/favorite"
style="@style/message_view_action_buttons"
android:src="@drawable/btn_star_off_normal_holo_light"
android:contentDescription="@string/favorite_action"
android:baselineAlignBottom="true"
/>
</merge>

View File

@ -19,7 +19,7 @@
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffffff"
android:background="@android:color/white"
>
<ProgressBar
android:id="@+id/loading_progress"
@ -38,97 +38,39 @@
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- header area -->
<LinearLayout
<TextView
android:id="@+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="8dip"
android:layout_marginBottom="4dip"
android:layout_marginLeft="8dip"
android:layout_marginRight="8dip"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorSecondary"
android:textStyle="bold"
/>
<!-- Upper header area. -->
<include layout="@layout/message_view_header_upper" />
<!-- Addresses, timestamp, "show details" -->
<FrameLayout
android:id="@+id/message_view_subheader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:layout_marginRight="16dip"
>
<TextView
android:id="@+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dip"
android:layout_marginBottom="4dip"
android:layout_marginLeft="8dip"
android:layout_marginRight="8dip"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorSecondary"
android:textStyle="bold"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="48dip"
android:baselineAligned="true"
android:background="@color/message_view_header_color"
android:gravity="center_vertical"
>
<ImageView
android:id="@+id/badge"
android:layout_width="48dip"
android:layout_height="48dip"
/>
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#fff"
/>
<ImageView
android:id="@+id/presence"
android:src="@android:drawable/presence_offline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dip"
/>
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1.0"
>
<TextView
android:id="@+id/from_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16dip"
android:textColor="@color/text_primary_color_inverse"
android:singleLine="true"
android:ellipsize="end"
/>
<TextView
android:id="@+id/from_address"
android:layout_below="@+id/from_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
android:textColor="@color/text_secondary_color_inverse"
android:singleLine="true"
android:ellipsize="end"
/>
</RelativeLayout>
<include layout="@layout/message_view_header_actions" />
</LinearLayout>
<include layout="@layout/message_view_subheader" />
</FrameLayout>
<!-- Addresses, timestamp, "show details" -->
<FrameLayout
android:id="@+id/message_view_subheader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:layout_marginRight="16dip"
>
<include layout="@layout/message_view_subheader" />
</FrameLayout>
<!-- divider -->
<View
android:layout_width="match_parent"
android:layout_marginLeft="16dip"
android:layout_marginRight="16dip"
style="@style/message_view_horizontal_divider"
/>
</LinearLayout>
<!-- end of header area -->
<!-- divider -->
<View
android:layout_width="match_parent"
android:layout_marginLeft="16dip"
android:layout_marginRight="16dip"
style="@style/message_view_horizontal_divider"
/>
<LinearLayout
android:id="@+id/message_tabs_section"

View File

@ -15,20 +15,16 @@
-->
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
<ImageButton
android:id="@+id/favorite"
style="@style/message_view_action_buttons"
android:src="@drawable/btn_star_off_normal_holo_light"
android:layout_width="32dip"
android:layout_height="24dip"
android:layout_margin="6dip"
android:contentDescription="@string/favorite_action"
/>
<ImageView
<ImageButton
android:id="@+id/reply"
style="@style/message_view_action_buttons"
android:src="@drawable/ic_reply_holo_dark"
android:layout_width="32dip"
android:layout_height="24dip"
android:layout_margin="6dip"
android:baselineAlignBottom="true"
android:contentDescription="@string/reply_action"
/>
<View
@ -37,12 +33,11 @@
android:layout_margin="3dip"
android:background="#ddd"
/>
<ImageView
<ImageButton
android:id="@+id/more"
style="@android:style/Widget.Holo.ActionButton.Overflow"
android:layout_width="32dip"
android:layout_width="24dip"
android:layout_height="24dip"
android:layout_margin="6dip"
android:baselineAlignBottom="true"
/>
</merge>

View File

@ -0,0 +1,75 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2011 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!-- Upper header area for a message view. This contains the message actions
(e.g. reply, forward), and sender info -->
<!-- Note the bottom padding is to compensate for the drop shadow in the asset -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/message_header_height"
android:paddingBottom="@dimen/message_header_bottom_padding"
android:background="@drawable/message_header_bg_holo"
android:orientation="horizontal"
android:gravity="center_vertical"
>
<QuickContactBadge
android:id="@+id/badge"
android:layout_width="@dimen/message_header_badge_width"
android:layout_height="@dimen/message_header_badge_width"
android:scaleType="centerCrop"
/>
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="@android:color/white"
/>
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="@dimen/message_header_name_margin"
>
<TextView
android:id="@+id/from_name"
style="@style/message_header_sender_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="@+id/presence"
android:src="@android:drawable/presence_offline"
android:layout_below="@+id/from_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dip"
/>
<TextView
android:id="@+id/from_address"
style="@style/message_header_sender_address"
android:layout_below="@+id/from_name"
android:layout_toRightOf="@+id/presence"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
android:textColor="@color/text_secondary_color_inverse"
android:singleLine="true"
android:ellipsize="end"
/>
</RelativeLayout>
<include layout="@layout/message_view_header_actions" />
</LinearLayout>

View File

@ -46,4 +46,12 @@
<style name="EmailRecipientEditTextView" parent="@style/RecipientEditTextView">
<item name="android:minHeight">40dip</item>
</style>
<style name="message_view_action_buttons" parent="android:Widget.Holo.Button.Borderless">
<item name="android:layout_width">32dip</item>
<item name="android:layout_height">24dip</item>
<item name="android:layout_marginLeft">8dip</item>
<item name="android:layout_marginRight">8dip</item>
<item name="android:padding">2dip</item>
</style>
</resources>

View File

@ -16,6 +16,12 @@
<!-- tablet -->
<resources>
<!-- Bottom padding used to compensate for the built in drop shadow in the
asset. -->
<dimen name="message_header_height">68dip</dimen>
<dimen name="message_header_bottom_padding">4dip</dimen>
<dimen name="message_header_badge_width">64dip</dimen>
<dimen name="message_header_name_margin">16dip</dimen>
<!-- Account Setup Activities -->
<!-- inset distance for setup/settings buttons -->

View File

@ -105,9 +105,26 @@
<item name="android:textColor">@color/text_primary_color</item>
<item name="android:singleLine">true</item>
</style>
<style name="message_header_sender_name">
<item name="android:textSize">18dip</item>
<item name="android:textColor">@color/text_primary_color_inverse</item>
<item name="android:textStyle">bold</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
</style>
<style name="message_header_sender_address">
<item name="android:textSize">14dip</item>
<item name="android:textColor">@color/text_secondary_color_inverse</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
</style>
<style name="message_view_action_buttons" parent="android:Widget.Holo.Button.Borderless">
<item name="android:layout_width">48dip</item>
<item name="android:layout_height">48dip</item>
<item name="android:layout_marginRight">16dip</item>
<item name="android:padding">8dip</item>
</style>

View File

@ -23,6 +23,13 @@
<dimen name="message_list_item_color_tip_width">35dip</dimen>
<dimen name="message_list_item_color_tip_height">6dip</dimen>
<!-- Bottom padding used to compensate for the built in drop shadow in the
asset. -->
<dimen name="message_header_height">52dip</dimen>
<dimen name="message_header_bottom_padding">4dip</dimen>
<dimen name="message_header_badge_width">48dip</dimen>
<dimen name="message_header_name_margin">4dip</dimen>
<dimen name="error_message_height">48dip</dimen>
<dimen name="widget_senders_font_size">14sp</dimen>

View File

@ -23,8 +23,6 @@
<!-- Do Not Translate. Unused string. -->
<string name="read_unread_action"/>
<!-- Do Not Translate. Unused string. -->
<string name="favorite_action"/>
<!-- Do Not Translate. Unused string. -->
<string name="deselect_all_action"/>
<!-- Do Not Translate. Unused string. -->
<string name="remove_account_action"/>
@ -99,6 +97,9 @@
<string name="delete_action">Delete</string>
<!-- Menu item/button name -->
<string name="forward_action">Forward</string>
<!-- Menu/Button item name and label for marking a message as a favorite
(usually called starred) [CHAR LIMIT=40] -->
<string name="favorite_action">Star</string>
<!-- Button name used to complete a multi-step process -->
<string name="done_action">Done</string>
<!-- Button name used to create a new quick response [CHAR_LIMIT=16] -->

View File

@ -201,5 +201,27 @@
<style name="message_list_item_wide">
<!-- no styles on phones -->
</style>
<style name="message_view_action_buttons" parent="android:Widget.Holo.Button.Borderless">
<item name="android:layout_width">24dip</item>
<item name="android:layout_height">24dip</item>
<item name="android:layout_marginLeft">8dip</item>
<item name="android:layout_marginRight">8dip</item>
<item name="android:padding">2dip</item>
</style>
<style name="message_header_sender_name">
<item name="android:textSize">16dip</item>
<item name="android:textColor">@color/text_primary_color_inverse</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
</style>
<style name="message_header_sender_address">
<item name="android:textSize">14dip</item>
<item name="android:textColor">@color/text_secondary_color_inverse</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
</style>
</resources>