DO NOT MERGE - Email support for 7" devices.

- use XLarge layout for Large as well in most cases.
- use XLarge portrait behavior for landscape and portrait for message
list collapsing
- some minor tweaks to account setup UI as the XLarge one didn't fit
on large devices with the padding it specified

Change-Id: I2a83e7239019b3feadcabe5fae61f0d13a628471
This commit is contained in:
Ben Komalo 2011-05-17 19:35:08 -07:00
parent 963bc99b2f
commit 9f976e29a0
43 changed files with 243 additions and 71 deletions

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- Account-type picker - xlarge - see layout/ for small-screen version -->
<!-- Account-type picker - tablet - see layout/ for small-screen version -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
@ -41,22 +41,12 @@
android:layout_height="1px"
android:background="@color/account_setup_divider_color" />
<!-- Button(s) on the right -->
<Button
android:id="@+id/previous"
android:layout_below="@+id/top_divider"
android:layout_alignParentRight="true"
android:layout_marginTop="@dimen/setup_buttons_padding_top"
android:layout_marginRight="@dimen/setup_buttons_padding_right"
style="@style/accountSetupButton"
android:text="@string/previous_action" />
<!-- Layout on the left containing the setup info -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_content"
android:layout_below="@+id/top_divider"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/previous"
android:layout_marginRight="64dip"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
@ -95,4 +85,14 @@
style="@style/accountSetupButton"
android:text="@string/account_setup_account_type_exchange_action" />
</RelativeLayout>
<!-- Previous button (can be below or to the right) -->
<Button
android:id="@+id/previous"
android:layout_marginTop="@dimen/setup_buttons_padding_top"
android:layout_marginRight="@dimen/setup_buttons_padding_right"
style="@style/accountSetupTypePrevious"
android:text="@string/previous_action" />
</RelativeLayout>

View File

@ -15,7 +15,7 @@
-->
<!-- Common data-entry area of initial account setup screen - email, password, default check -->
<!-- xlarge version -->
<!-- tablet version -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- Exchange server settings - xlarge - see layout/ for phone UX variant -->
<!-- Exchange server settings - tablet - see layout/ for phone UX variant -->
<!-- This is used directly by the account setup activity, but during settings it is
wrapped in an outer layout (account_settings_exchange_fragment) -->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- Incoming server settings - xlarge - see layout/ for phone UX variant -->
<!-- Incoming server settings - tablet - see layout/ for phone UX variant -->
<!-- This is used directly by the account setup activity, but during settings it is
wrapped in an outer layout (account_settings_incoming_fragment) -->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

View File

@ -15,7 +15,7 @@
-->
<!-- Common data-entry area of account name setup screen - account nickname, user name. -->
<!-- xlarge version -->
<!-- tablet version -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"

View File

@ -15,7 +15,7 @@
-->
<!-- Common data-entry area of account options setup screen - check freq, options, etc. -->
<!-- xlarge version -->
<!-- tablet version -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- Incoming server settings - xlarge - see layout/ for phone UX variant -->
<!-- Incoming server settings - tablet - see layout/ for phone UX variant -->
<!-- This is used directly by the account setup activity, but during settings it is
wrapped in an outer layout (account_settings_outgoing_fragment) -->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- xlarge -->
<!-- tablet -->
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- xlarge -->
<!-- tablet -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- xlarge -->
<!-- tablet -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- xlarge -->
<!-- tablet -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
@ -392,4 +392,4 @@
</LinearLayout>
</RelativeLayout>
</FrameLayout>
</LinearLayout>
</LinearLayout>

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- xlarge -->
<!-- tablet -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"

View File

@ -0,0 +1,26 @@
<?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.
-->
<!-- Note the width of each pane is set by code at runtime. -->
<com.android.email.activity.ThreePaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:splitMotionEvents="true"
>
<include layout="@layout/three_pane_collapsible_impl" />
</com.android.email.activity.ThreePaneLayout>

View File

@ -0,0 +1,27 @@
<?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.
-->
<!-- Note the width of each pane is set by code at runtime. -->
<com.android.email.activity.ThreePaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:splitMotionEvents="true"
>
<include layout="@layout/three_pane_impl" />
</com.android.email.activity.ThreePaneLayout>

View File

@ -16,12 +16,10 @@
<!-- ThreePaneLayout is based on LinearLayout with the orientation always horizontal -->
<!-- for portrait -->
<!-- Implementation of a three pane layout where in some modes, the left pane is
collapsible. -->
<!-- Note the width of each pane is set by code at runtime. -->
<com.android.email.activity.ThreePaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:splitMotionEvents="true"
>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<fragment
android:name="com.android.email.activity.MailboxListFragment"
@ -65,4 +63,4 @@
android:background="@color/message_view_fogged_glass_color"
/>
</FrameLayout>
</com.android.email.activity.ThreePaneLayout>
</merge>

View File

@ -16,12 +16,10 @@
<!-- ThreePaneLayout is based on LinearLayout with the orientation always horizontal -->
<!-- for landscape -->
<!-- Implementation of a three pane layout where two panes are always visible at
any given time. -->
<!-- Note the width of each pane is set by code at runtime. -->
<com.android.email.activity.ThreePaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:splitMotionEvents="true"
>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<fragment
android:name="com.android.email.activity.MailboxListFragment"
@ -52,4 +50,4 @@
android:layout_width="0dip"
android:layout_height="match_parent"
/>
</com.android.email.activity.ThreePaneLayout>
</merge>

View File

@ -0,0 +1,24 @@
<?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.
-->
<!-- large, landscape -->
<resources>
<!-- Account Setup Activities -->
<dimen name="setup_padding_top">16dip</dimen>
<dimen name="setup_padding_left">64dip</dimen>
<dimen name="setup_padding_right">64dip</dimen>
</resources>

View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2009 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.
-->
<resources>
<style name="accountSetupTypePrevious" parent="@style/accountSetupButton">
<item name="android:layout_alignParentBottom">true</item>
<item name="android:layout_alignParentLeft">true</item>
<item name="android:layout_marginBottom">48dip</item>
<item name="android:layout_marginLeft">48dip</item>
</style>
</resources>

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- xlarge, landscape -->
<!-- tablet, landscape -->
<resources>
<dimen name="message_compose_field_label_width">120dip</dimen>

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- xlarge, landscape -->
<!-- tablet, landscape -->
<resources>
<!-- Use fixed width in landscape -->

View File

@ -14,12 +14,9 @@
limitations under the License.
-->
<!-- xlarge, portrait -->
<resources>
<dimen name="message_compose_field_label_width">120dip</dimen>
<!-- XL activity dimensions -->
<!-- width of mailbox list -->
<dimen name="mailbox_list_width">206dip</dimen>
<!--

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- xlarge, portrait -->
<!-- tablet, portrait -->
<resources>
<!-- Use fixed margin in portrait -->

View File

@ -0,0 +1,19 @@
<?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.
-->
<resources>
<bool name="use_two_pane">true</bool>
</resources>

View File

@ -14,7 +14,6 @@
limitations under the License.
-->
<!-- Specializations for xlarge screens - most colors are in values/colors.xml -->
<resources>
<color name="message_view_fogged_glass_color">#00000000</color>

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- xlarge -->
<!-- tablet -->
<resources>
<!-- Account Setup Activities -->

View File

@ -14,7 +14,7 @@
limitations under the License.
-->
<!-- Specializations for xlarge screens - most colors are in values/colors.xml -->
<!-- Specializations for tablet screens - most colors are in values/colors.xml -->
<resources>
<!-- The headline at the top of every account settings fragments (in preferences) -->
<style name="accountSettingsHeadline">
@ -134,4 +134,9 @@
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
</style>
<style name="accountSetupTypePrevious" parent="@style/accountSetupButton">
<item name="android:layout_toRightOf">@+id/main_content"</item>
<item name="android:layout_alignParentRight">true</item>
</style>
</resources>

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2010 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.
-->
<!-- tablet, landscape -->
<resources>
<!-- Account Setup Activities -->
<dimen name="setup_padding_top">16dip</dimen>
<dimen name="setup_padding_left">128dip</dimen>
<dimen name="setup_padding_right">128dip</dimen>
</resources>

19
res/values/bools.xml Normal file
View File

@ -0,0 +1,19 @@
<?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.
-->
<resources>
<bool name="use_two_pane">false</bool>
</resources>

View File

@ -37,7 +37,8 @@ import android.widget.LinearLayout;
/**
* The "three pane" layout used on tablet.
*
* It'll encapsulate the behavioral differences between portrait mode and landscape mode.
* This layout can show up to two panes at any given time, and operates in two different modes.
* See {@link #isPaneCollapsible()} for details on the two modes.
*
* TODO Unit tests, when UX is settled.
*/
@ -50,14 +51,21 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
/** Uninitialized state -- {@link #changePaneState} hasn't been called yet. */
private static final int STATE_UNINITIALIZED = -1;
/** Mailbox list + message list */
/** Mailbox list + message list both visible. */
private static final int STATE_LEFT_VISIBLE = 0;
/** Message view on portrait, + message list on landscape. */
/**
* A view where the MessageView is visible. The MessageList is visible if
* {@link #isPaneCollapsible} is false, but is otherwise collapsed and hidden.
*/
private static final int STATE_RIGHT_VISIBLE = 1;
/** Portrait mode only: message view + expanded message list */
private static final int STATE_PORTRAIT_MIDDLE_EXPANDED = 2;
/**
* A view where the MessageView is partially visible and a collapsible MessageList on the left
* has been expanded to be in view. {@link #isPaneCollapsible} must return true for this
* state to be active.
*/
private static final int STATE_MIDDLE_EXPANDED = 2;
// Flags for getVisiblePanes()
public static final int PANE_LEFT = 1 << 2;
@ -75,7 +83,7 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
private View mRightPane;
private MessageCommandButtonView mMessageCommandButtons;
// Views used only on portrait
// Views used only when the left pane is collapsible.
private View mFoggedGlass;
private boolean mFirstSizeChangedDone;
@ -84,8 +92,8 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
private int mMailboxListWidth;
/**
* Message list width, on:
* - the message list + message view mode, on landscape.
* - the message view + expanded message list mode, on portrait.
* - the message list + message view mode, when the left pane is not collapsible
* - the message view + expanded message list mode, when the left pane is collapsible
* Comes from resources.
*/
private int mMessageListWidth;
@ -152,14 +160,14 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
(MessageCommandButtonView) findViewById(R.id.message_command_buttons);
mFoggedGlass = findViewById(R.id.fogged_glass);
if (mFoggedGlass != null) { // If it's around, it's portrait.
if (mFoggedGlass != null) {
mRightPane = findViewById(R.id.right_pane_with_fog);
mFoggedGlass.setOnClickListener(this);
} else { // landscape
} else {
mRightPane = findViewById(R.id.right_pane);
}
if (isLandscape()) {
if (!isPaneCollapsible()) {
mShowHideViews = new View[][][] {
// STATE_LEFT_VISIBLE
{
@ -173,7 +181,7 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
{mLeftPane}, // Invisible
{}, // Gone
},
// STATE_PORTRAIT_MIDDLE_EXPANDED -- not used in landscape
// STATE_MIDDLE_EXPANDED
{
{}, // Visible
{}, // Invisible
@ -194,7 +202,7 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
{mLeftPane, mMiddlePane, mFoggedGlass}, // Invisible
{}, // Gone
},
// STATE_PORTRAIT_MIDDLE_EXPANDED
// STATE_MIDDLE_EXPANDED
{
{mMiddlePane, mRightPane, mMessageCommandButtons, mFoggedGlass}, // Visible
{mLeftPane}, // Invisible
@ -216,8 +224,11 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
mCallback = (callback == null) ? EmptyCallback.INSTANCE : callback;
}
private boolean isLandscape() {
return mFoggedGlass == null;
/**
* Return whether or not the left pane should be collapsible.
*/
private boolean isPaneCollapsible() {
return mFoggedGlass != null;
}
public MessageCommandButtonView getMessageCommandButtons() {
@ -268,7 +279,7 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
* @return true if the event is handled.
*/
public boolean onBackPressed(boolean isSystemBackKey) {
if (isLandscape()) {
if (!isPaneCollapsible()) {
switch (mPaneState) {
case STATE_RIGHT_VISIBLE:
changePaneState(STATE_LEFT_VISIBLE, true); // Close the right pane
@ -280,10 +291,10 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
if (isSystemBackKey) {
changePaneState(STATE_LEFT_VISIBLE, true);
} else {
changePaneState(STATE_PORTRAIT_MIDDLE_EXPANDED, true);
changePaneState(STATE_MIDDLE_EXPANDED, true);
}
return true;
case STATE_PORTRAIT_MIDDLE_EXPANDED:
case STATE_MIDDLE_EXPANDED:
changePaneState(STATE_LEFT_VISIBLE, true);
return true;
}
@ -319,7 +330,7 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
}
private void changePaneState(int newState, boolean animate) {
if (isLandscape() && (newState == STATE_PORTRAIT_MIDDLE_EXPANDED)) {
if (!isPaneCollapsible() && (newState == STATE_MIDDLE_EXPANDED)) {
newState = STATE_RIGHT_VISIBLE;
}
if (!mFirstSizeChangedDone) {
@ -349,7 +360,7 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
final String animatorLabel; // for debug purpose
if (isLandscape()) { // Landscape
if (!isPaneCollapsible()) {
setViewWidth(mLeftPane, mMailboxListWidth);
setViewWidth(mRightPane, totalWidth - mMessageListWidth);
@ -370,7 +381,7 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
throw new IllegalStateException();
}
} else { // Portrait
} else {
setViewWidth(mLeftPane, mMailboxListWidth);
setViewWidth(mRightPane, totalWidth);
@ -381,7 +392,7 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
expectedMailboxLeft = 0;
expectedMessageListWidth = totalWidth - mMailboxListWidth;
break;
case STATE_PORTRAIT_MIDDLE_EXPANDED:
case STATE_MIDDLE_EXPANDED:
// mailbox + message list -> message list + message view
animatorLabel = "moving to [message list + message view]";
expectedMailboxLeft = -mMailboxListWidth;
@ -439,7 +450,7 @@ public class ThreePaneLayout extends LinearLayout implements View.OnClickListene
public void onClick(View v) {
switch (v.getId()) {
case R.id.fogged_glass:
if (isLandscape()) {
if (!isPaneCollapsible()) {
return; // Shouldn't happen
}
changePaneState(STATE_RIGHT_VISIBLE, true);

View File

@ -19,6 +19,7 @@ package com.android.email.activity;
import com.android.email.AccountBackupRestore;
import com.android.email.Email;
import com.android.email.ExchangeUtils;
import com.android.email.R;
import com.android.email.activity.setup.AccountSetupBasics;
import com.android.email.service.MailService;
import com.android.emailcommon.provider.EmailContent;
@ -29,7 +30,6 @@ import com.android.emailcommon.utility.Utility;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
@ -84,8 +84,7 @@ public class Welcome extends Activity {
* @return true if the two-pane activity should be used on the current configuration.
*/
public static boolean useTwoPane(Context context) {
final int screenLayout = context.getResources().getConfiguration().screenLayout;
return (screenLayout & Configuration.SCREENLAYOUT_SIZE_XLARGE) != 0;
return context.getResources().getBoolean(R.bool.use_two_pane);
}
/**