PawletOS/app_Settings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Dashboard layout again

Browse Source 
- follow UX spec
- update also the Search Panels (suggestions / results) to
follow the same specs

See bug: #15384992 Setting Dashboard - padding updates

Change-Id: I3d27a3b3d9779644f8ea123990a0c7bed8d4ba74
This commit is contained in:
Fabrice Di Meglio
2014-06-19 20:16:20 -07:00
parent 8b2655cfbb
commit 47a25e7640
16 changed files with 208 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
res/layout-land/dashboard_tile.xml Normal file
View File

@@ -0,0 +1,74 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2014 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.
-->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="@dimen/dashboard_tile_minimum_height">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_weight="1">
<ImageView
android:id="@+id/icon"
android:layout_width="@dimen/dashboard_tile_image_size"
android:layout_height="@dimen/dashboard_tile_image_size"
android:scaleType="centerInside"
android:layout_marginStart="@dimen/dashboard_tile_image_margin_start"
android:layout_marginEnd="@dimen/dashboard_tile_image_margin_end" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="@style/TextAppearance.TileTitle"
android:ellipsize="marquee"
android:fadingEdge="horizontal" />
<TextView android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/title"
android:layout_alignStart="@android:id/title"
android:textAppearance="@style/TextAppearance.Small"
android:textColor="?android:attr/textColorSecondary" />
</RelativeLayout>
</LinearLayout>
<View android:id="@+id/tile_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/dividerVertical" />
</LinearLayout>
</LinearLayout>

7
res/layout/dashboard.xml
View File

@@ -18,9 +18,6 @@
android:id="@+id/dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="@dimen/dashboard_padding_start"
android:paddingEnd="@dimen/dashboard_padding_end"
android:paddingBottom="@dimen/dashboard_padding_bottom"
android:scrollbarStyle="outsideOverlay"
android:background="@color/dashboard_background_color">
@@ -28,6 +25,10 @@
android:id="@+id/dashboard_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="@dimen/dashboard_padding_start"
android:paddingEnd="@dimen/dashboard_padding_end"
android:paddingTop="@dimen/dashboard_padding_top"
android:paddingBottom="@dimen/dashboard_padding_bottom"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
/>

7
res/layout/dashboard_category.xml
View File

@@ -18,12 +18,15 @@
android:id="@+id/category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:orientation="vertical"
android:background="@android:color/white"
android:layout_marginBottom="8dip"
android:elevation="@dimen/dashboard_category_elevation">
<TextView android:id="@+id/category_title"
android:layout_width="match_parent"
android:layout_height="@dimen/dashboard_category_title_height"
android:layout_marginStart="@dimen/dashboard_category_title_margin_start"
android:paddingStart="@dimen/dashboard_category_title_margin_start"
android:singleLine="true"
android:ellipsize="marquee"
android:gravity="center_vertical"

64
res/layout/dashboard_tile.xml
View File

@@ -17,7 +17,7 @@
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="@dimen/dashboard_tile_minimum_height">
@@ -27,31 +27,49 @@
android:layout_height="@dimen/dashboard_tile_image_size"
android:scaleType="centerInside"
android:layout_marginStart="@dimen/dashboard_tile_image_margin_start"
android:layout_marginEnd="@dimen/dashboard_tile_image_margin_end"
/>
android:layout_marginEnd="@dimen/dashboard_tile_image_margin_end" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="@style/TextAppearance.TileTitle"
android:ellipsize="marquee"
android:fadingEdge="horizontal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="vertical"
android:gravity="center_vertical"
android:layout_weight="1">
<TextView android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@android:id/title"
android:layout_alignStart="@android:id/title"
android:textAppearance="@style/TextAppearance.Small"
android:textColor="?android:attr/textColorSecondary"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RelativeLayout>
<TextView android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="@style/TextAppearance.TileTitle"
android:ellipsize="marquee"
android:fadingEdge="horizontal" />
<TextView android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/title"
android:layout_alignStart="@android:id/title"
android:textAppearance="@style/TextAppearance.Small"
android:textColor="?android:attr/textColorSecondary" />
</RelativeLayout>
</LinearLayout>
<View android:id="@+id/tile_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?android:attr/dividerVertical" />
</LinearLayout>
</LinearLayout>

11
res/layout/search_panel.xml
View File

@@ -18,8 +18,8 @@
android:id="@+id/dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="@dimen/search_results_padding_start"
android:paddingEnd="@dimen/search_results_padding_end"
android:paddingStart="@dimen/search_panel_padding_start"
android:paddingEnd="@dimen/search_panel_padding_end"
android:background="@color/dashboard_background_color">
<LinearLayout android:layout_width="match_parent"
@@ -31,11 +31,14 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
android:orientation="vertical"
android:elevation="@dimen/search_panel_elevation">
<ListView android:id="@+id/list_suggestions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:headerDividersEnabled="false"
/>
</LinearLayout>
@@ -50,6 +53,8 @@
<ListView android:id="@+id/list_results"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:headerDividersEnabled="false"
/>
</LinearLayout>

2
res/layout/search_panel_results_header.xml
View File

@@ -15,7 +15,7 @@
-->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_width="match_parent"
android:layout_height="@dimen/dashboard_category_title_height"
android:paddingStart="@dimen/search_title_padding_start"
android:singleLine="true"

2
res/layout/search_panel_suggestions_header.xml
View File

@@ -15,7 +15,7 @@
-->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_width="match_parent"
android:layout_height="@dimen/dashboard_category_title_height"
android:paddingStart="@dimen/search_title_padding_start"
android:singleLine="true"

2
res/layout/search_suggestion_item.xml
View File

@@ -28,7 +28,7 @@
<TextView android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="@dimen/search_title_padding_start"
android:layout_marginStart="@dimen/search_title_padding_start"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium"
android:ellipsize="marquee"

5
res/layout/settings_main.xml
View File

@@ -32,7 +32,8 @@
android:layout_height="?android:attr/actionBarSize"
android:layout_width="match_parent"
android:background="@drawable/switchbar_background"
android:theme="@android:style/Theme.Material" />
android:theme="@android:style/Theme.Material"
/>
<FrameLayout
android:id="@+id/prefs"
@@ -76,7 +77,9 @@
android:layout_margin="5dip"
android:text="@*android:string/next_button_label"
/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>

20
res/values-land/dimens.xml
View File

@@ -25,7 +25,27 @@
<dimen name="captioning_preview_height">100dp</dimen>
<!-- Dashboard margins between each tiles within the layout -->
<dimen name="dashboard_cell_gap_x">8dp</dimen>
<dimen name="dashboard_cell_gap_y">0dp</dimen>
<!-- Dashboard padding in its container -->
<dimen name="dashboard_padding_start">4dp</dimen>
<dimen name="dashboard_padding_end">4dp</dimen>
<dimen name="dashboard_padding_top">4dp</dimen>
<dimen name="dashboard_padding_bottom">0dp</dimen>
<!-- Dashboard category title margin start -->
<dimen name="dashboard_category_title_margin_start">12dp</dimen>
<!-- Dashboard tile minimum height -->
<dimen name="dashboard_tile_minimum_height">64dp</dimen>
<!-- Dashboard tile image margin start / end -->
<dimen name="dashboard_tile_image_margin_start">12dp</dimen>
<!-- Search Results padding in its container -->
<dimen name="search_panel_padding_start">4dp</dimen>
<dimen name="search_panel_padding_end">4dp</dimen>
</resources>

32
res/values/dimens.xml
View File

@@ -94,19 +94,24 @@
<dimen name="actionbar_contentInsetStart">16dp</dimen>
<dimen name="actionbar_subsettings_contentInsetStart">72dp</dimen>
<!-- Dashboard padding between each tiles within the layout -->
<dimen name="dashboard_cell_gap">1dp</dimen>
<!-- Dashboard margins between each tiles within the layout -->
<dimen name="dashboard_cell_gap_x">0dp</dimen>
<dimen name="dashboard_cell_gap_y">0dp</dimen>
<!-- Dashboard padding in its container -->
<dimen name="dashboard_padding_start">1dp</dimen>
<dimen name="dashboard_padding_end">1dp</dimen>
<dimen name="dashboard_padding_bottom">1dp</dimen>
<dimen name="dashboard_padding_start">4dp</dimen>
<dimen name="dashboard_padding_end">4dp</dimen>
<dimen name="dashboard_padding_top">4dp</dimen>
<dimen name="dashboard_padding_bottom">0dp</dimen>
<!-- Dashboard category panel elevation -->
<dimen name="dashboard_category_elevation">4dp</dimen>
<!-- Dashboard category title layout height -->
<dimen name="dashboard_category_title_height">48dp</dimen>
<!-- Dashboard category title margin start -->
<dimen name="dashboard_category_title_margin_start">15dp</dimen>
<dimen name="dashboard_category_title_margin_start">12dp</dimen>
<!-- Dashboard tile minimum height -->
<dimen name="dashboard_tile_minimum_height">72dp</dimen>
@@ -115,7 +120,7 @@
<dimen name="dashboard_tile_image_size">24dp</dimen>
<!-- Dashboard tile image margin start / end -->
<dimen name="dashboard_tile_image_margin_start">16dp</dimen>
<dimen name="dashboard_tile_image_margin_start">12dp</dimen>
<dimen name="dashboard_tile_image_margin_end">32dp</dimen>
<!-- SwitchBar margin start / end -->
@@ -126,18 +131,21 @@
<dimen name="switchbar_subsettings_margin_start">72dp</dimen>
<dimen name="switchbar_subsettings_margin_end">16dp</dimen>
<!-- Search Results padding in its container -->
<dimen name="search_results_padding_start">1dp</dimen>
<dimen name="search_results_padding_end">1dp</dimen>
<!-- Search Panel elevation -->
<dimen name="search_panel_elevation">4dp</dimen>
<!-- Search Panel padding in its container -->
<dimen name="search_panel_padding_start">4dp</dimen>
<dimen name="search_panel_padding_end">4dp</dimen>
<!-- Search title (recent / results) padding start -->
<dimen name="search_title_padding_start">16dp</dimen>
<dimen name="search_title_padding_start">12dp</dimen>
<!-- Result item image size -->
<dimen name="search_result_item_image_size">24dp</dimen>
<!-- Result item image margin start / end -->
<dimen name="search_result_item_image_margin_start">16dp</dimen>
<dimen name="search_result_item_image_margin_start">12dp</dimen>
<dimen name="search_result_item_image_margin_end">32dp</dimen>
<!-- Suggestion item image size -->

1
res/values/styles.xml
View File

@@ -266,6 +266,7 @@
<style name="TextAppearance.CategoryTitle" parent="@android:style/TextAppearance.Material.Small">
<item name="android:textColor">@color/theme_accent</item>
<item name="android:textStyle">bold</item>
</style>
<style name="TextAppearance.TileTitle" parent="@android:style/TextAppearance.Material.Medium">

26
src/com/android/settings/dashboard/DashboardContainerView.java
View File

@@ -25,14 +25,18 @@ import com.android.settings.R;
public class DashboardContainerView extends ViewGroup {
private float mCellGapX;
private float mCellGapY;
private int mNumRows;
private int mNumColumns;
private float mCellGap;
public DashboardContainerView(Context context, AttributeSet attrs) {
super(context, attrs);
final Resources res = context.getResources();
mCellGap = res.getDimension(R.dimen.dashboard_cell_gap);
mCellGapX = res.getDimension(R.dimen.dashboard_cell_gap_x);
mCellGapY = res.getDimension(R.dimen.dashboard_cell_gap_y);
mNumColumns = res.getInteger(R.integer.dashboard_num_columns);
}
@@ -40,7 +44,7 @@ public class DashboardContainerView extends ViewGroup {
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final int width = MeasureSpec.getSize(widthMeasureSpec);
final int availableWidth = (int) (width - getPaddingLeft() - getPaddingRight() -
(mNumColumns - 1) * mCellGap);
(mNumColumns - 1) * mCellGapX);
float cellWidth = (float) Math.ceil(((float) availableWidth) / mNumColumns);
final int N = getChildCount();
@@ -55,7 +59,7 @@ public class DashboardContainerView extends ViewGroup {
ViewGroup.LayoutParams lp = v.getLayoutParams();
int colSpan = v.getColumnSpan();
lp.width = (int) ((colSpan * cellWidth) + (colSpan - 1) * mCellGap);
lp.width = (int) ((colSpan * cellWidth) + (colSpan - 1) * mCellGapX);
// Measure the child
int newWidthSpec = getChildMeasureSpec(widthMeasureSpec, 0, lp.width);
@@ -72,8 +76,8 @@ public class DashboardContainerView extends ViewGroup {
cursor += colSpan;
}
final int numRows = (int) Math.ceil((float) cursor / mNumColumns);
final int newHeight = (int) ((numRows * cellHeight) + ((numRows - 1) * mCellGap)) +
mNumRows = (int) Math.ceil((float) cursor / mNumColumns);
final int newHeight = (int) ((mNumRows * cellHeight) + ((mNumRows - 1) * mCellGapY)) +
getPaddingTop() + getPaddingBottom();
setMeasuredDimension(width, newHeight);
@@ -104,10 +108,14 @@ public class DashboardContainerView extends ViewGroup {
int row = cursor / mNumColumns;
if (row == mNumRows - 1) {
child.setDividerVisibility(false);
}
// Push the item to the next row if it can't fit on this one
if ((col + colSpan) > mNumColumns) {
x = getPaddingStart();
y += childHeight + mCellGap;
y += childHeight + mCellGapY;
row++;
}
@@ -124,10 +132,10 @@ public class DashboardContainerView extends ViewGroup {
// reach the end of the row
cursor += child.getColumnSpan();
if (cursor < (((row + 1) * mNumColumns))) {
x += childWidth + mCellGap;
x += childWidth + mCellGapX;
} else {
x = getPaddingStart();
y += childHeight + mCellGap;
y += childHeight + mCellGapY;
}
}
}

4
src/com/android/settings/dashboard/DashboardSummary.java
View File

@@ -44,7 +44,6 @@ public class DashboardSummary extends Fragment implements OnAccountsUpdateListen
private static final String LOG_TAG = "DashboardSummary";
private LayoutInflater mLayoutInflater;
private ViewGroup mContainer;
private ViewGroup mDashboard;
private AuthenticatorHelper mAuthHelper;
private boolean mAccountListenerAdded;
@@ -69,7 +68,6 @@ public class DashboardSummary extends Fragment implements OnAccountsUpdateListen
final Context context = getActivity();
mLayoutInflater = inflater;
mContainer = container;
final View rootView = inflater.inflate(R.layout.dashboard, container, false);
mDashboard = (ViewGroup) rootView.findViewById(R.id.dashboard_container);
@@ -98,7 +96,7 @@ public class DashboardSummary extends Fragment implements OnAccountsUpdateListen
for (int n = 0; n < count; n++) {
DashboardCategory category = categories.get(n);
View categoryView = mLayoutInflater.inflate(R.layout.dashboard_category, mContainer,
View categoryView = mLayoutInflater.inflate(R.layout.dashboard_category, mDashboard,
false);
TextView categoryLabel = (TextView) categoryView.findViewById(R.id.category_title);

6
src/com/android/settings/dashboard/DashboardTileView.java
View File

@@ -34,6 +34,7 @@ public class DashboardTileView extends FrameLayout implements View.OnClickListen
private ImageView mImageView;
private TextView mTitleTextView;
private TextView mStatusTextView;
private View mDivider;
private int mColSpan = DEFAULT_COL_SPAN;
@@ -51,6 +52,7 @@ public class DashboardTileView extends FrameLayout implements View.OnClickListen
mImageView = (ImageView) view.findViewById(R.id.icon);
mTitleTextView = (TextView) view.findViewById(R.id.title);
mStatusTextView = (TextView) view.findViewById(R.id.status);
mDivider = view.findViewById(R.id.tile_divider);
setOnClickListener(this);
setBackgroundResource(R.drawable.dashboard_tile_background);
@@ -73,6 +75,10 @@ public class DashboardTileView extends FrameLayout implements View.OnClickListen
mTile = tile;
}
public void setDividerVisibility(boolean visible) {
mDivider.setVisibility(visible ? View.VISIBLE : View.GONE);
}
void setColumnSpan(int span) {
mColSpan = span;
}

6
src/com/android/settings/dashboard/SearchResultsSummary.java
View File

@@ -207,7 +207,8 @@ public class SearchResultsSummary extends Fragment {
});
mResultsListView.addHeaderView(
LayoutInflater.from(getActivity()).inflate(
R.layout.search_panel_results_header, mResultsListView, false));
R.layout.search_panel_results_header, mResultsListView, false),
null, false);
mSuggestionsListView = (ListView) view.findViewById(R.id.list_suggestions);
mSuggestionsListView.setAdapter(mSuggestionsAdapter);
@@ -231,7 +232,8 @@ public class SearchResultsSummary extends Fragment {
});
mSuggestionsListView.addHeaderView(
LayoutInflater.from(getActivity()).inflate(
R.layout.search_panel_suggestions_header, mSuggestionsListView, false));
R.layout.search_panel_suggestions_header, mSuggestionsListView, false),
null, false);
return view;
}