Implement the new UI design for the category tiles in the wallpaper
picker.
Screenshot: https://screenshot.googleplex.com/OZvuf2bx6bO.png
deck: https://docs.google.com/presentation/d/15JadcGi5k1_0znUN_XdFpU7UxeXwxjK3Y7LxvhW5ETM/edit#slide=id.g7c8f4a82bf_0_154
Bug: 149000013
Change-Id: I687c77eeb02d2df841fbb1b4630309d18da73b10
diff --git a/res/layout/fragment_category_picker.xml b/res/layout/fragment_category_picker.xml
index 3c74180..75eee45 100755
--- a/res/layout/fragment_category_picker.xml
+++ b/res/layout/fragment_category_picker.xml
@@ -23,13 +23,14 @@
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/category_grid"
- android:layout_width="wrap_content"
+ android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:fitsSystemWindows="true"
- android:paddingLeft="@dimen/grid_padding"
+ android:paddingHorizontal="@dimen/grid_edge_space"
android:paddingTop="@dimen/grid_padding"
android:scrollbarSize="@dimen/grid_padding"
+ android:scrollbarStyle="outsideOverlay"
android:scrollbarThumbVertical="@color/scrollbar_thumb_color_dark"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
diff --git a/res/layout/fragment_category_scalable_picker.xml b/res/layout/fragment_category_scalable_picker.xml
index 275af07..a813b0d 100644
--- a/res/layout/fragment_category_scalable_picker.xml
+++ b/res/layout/fragment_category_scalable_picker.xml
@@ -52,18 +52,19 @@
<FrameLayout
android:id="@+id/scalable_content_container"
- android:layout_width="wrap_content"
+ android:layout_width="match_parent"
android:layout_height="@dimen/content_container_maximum_height"
app:behavior_peekHeight="@dimen/content_container_minimum_height"
app:layout_behavior="@string/bottom_sheet_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/category_grid"
- android:layout_width="wrap_content"
+ android:layout_width="match_parent"
android:layout_height="wrap_content"
- android:paddingStart="@dimen/grid_padding"
+ android:paddingHorizontal="@dimen/grid_edge_space"
android:paddingTop="@dimen/grid_padding"
android:scrollbarSize="@dimen/grid_padding"
+ android:scrollbarStyle="outsideOverlay"
android:scrollbarThumbVertical="@color/scrollbar_thumb_color_dark"
android:scrollbars="vertical" />
diff --git a/res/layout/grid_item_category.xml b/res/layout/grid_item_category.xml
index dbff1a1..1f9ec90 100755
--- a/res/layout/grid_item_category.xml
+++ b/res/layout/grid_item_category.xml
@@ -13,22 +13,39 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
+ xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tile"
android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_margin="8dp"
+ android:layout_height="wrap_content"
android:clickable="true"
- android:focusable="true">
+ android:focusable="true"
+ android:orientation="vertical">
+
+ <TextView
+ android:id="@+id/category_title"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_weight="1"
+ android:background="@color/category_title_scrim_color"
+ android:gravity="center_horizontal|bottom"
+ android:paddingTop="@dimen/grid_item_category_label_padding_top"
+ android:paddingBottom="@dimen/grid_item_category_label_padding_bottom"
+ android:textAlignment="center"
+ android:textAppearance="@android:style/TextAppearance.DeviceDefault.Widget.ActionBar.Title"
+ android:textColor="@color/category_title_text_color"
+ android:textSize="@dimen/abc_text_size_subhead_material"
+ tools:text="Wallpaper category" />
+
<androidx.cardview.widget.CardView
+ android:id="@+id/category"
android:layout_width="match_parent"
android:layout_height="match_parent"
- android:layout_above="@+id/category_title"
android:foreground="?attr/selectableItemBackground"
- app:cardElevation="0dp"
- app:cardCornerRadius="?android:dialogCornerRadius">
+ app:cardCornerRadius="?android:dialogCornerRadius"
+ app:cardElevation="0dp">
+
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
@@ -40,21 +57,6 @@
android:id="@+id/overlay_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:layout_marginBottom="@dimen/grid_item_category_overlay_icon_margin_bottom" />
+ android:layout_gravity="center" />
</androidx.cardview.widget.CardView>
- <TextView
- android:id="@+id/category_title"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_alignParentBottom="true"
- android:background="@color/category_title_scrim_color"
- android:gravity="start"
- android:paddingVertical="@dimen/grid_item_category_label_padding"
- android:textColor="@color/category_title_text_color"
- android:textSize="@dimen/abc_text_size_subhead_material"
- android:textAlignment="viewStart"
- android:textAppearance="@android:style/TextAppearance.DeviceDefault.Widget.ActionBar.Title"
- tools:text="Wallpaper category" />
-
-</RelativeLayout>
+</LinearLayout>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 2966254..8bcbb3f 100755
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -22,10 +22,13 @@
<!-- Dimensions for "category" tiles. -->
<dimen name="grid_item_category_label_padding">12dp</dimen>
+ <dimen name="grid_item_category_label_padding_top">12dp</dimen>
+ <dimen name="grid_item_category_label_padding_bottom">4dp</dimen>
<dimen name="grid_item_category_overlay_icon_margin_bottom">24dp</dimen>
<dimen name="grid_item_category_title_height">48dp</dimen>
<dimen name="grid_tile_aspect_height">340dp</dimen>
<dimen name="grid_tile_aspect_width">182dp</dimen>
+ <dimen name="grid_edge_space">8dp</dimen>
<!-- Dimensions for individual wallpaper tiles. -->
<dimen name="grid_item_individual_wallpaper_selected_inset">14dp</dimen>
diff --git a/src/com/android/wallpaper/picker/CategoryFragment.java b/src/com/android/wallpaper/picker/CategoryFragment.java
index 7468f12..9bf71ab 100755
--- a/src/com/android/wallpaper/picker/CategoryFragment.java
+++ b/src/com/android/wallpaper/picker/CategoryFragment.java
@@ -23,6 +23,7 @@
import android.content.pm.PackageManager;
import android.graphics.Point;
import android.graphics.PorterDuff.Mode;
+import android.graphics.Rect;
import android.net.Uri;
import android.os.Build.VERSION;
import android.os.Build.VERSION_CODES;
@@ -40,11 +41,11 @@
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.ProgressBar;
-import android.widget.RelativeLayout;
import android.widget.TextView;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AlertDialog;
+import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.GridLayoutManager.SpanSizeLookup;
import androidx.recyclerview.widget.RecyclerView;
@@ -70,7 +71,6 @@
import com.android.wallpaper.util.DisplayMetricsRetriever;
import com.android.wallpaper.util.ScreenSizeCalculator;
import com.android.wallpaper.util.TileSizeCalculator;
-import com.android.wallpaper.widget.GridMarginDecoration;
import com.bumptech.glide.Glide;
import com.bumptech.glide.MemoryCategory;
@@ -157,7 +157,8 @@
}
mImageGrid = view.findViewById(R.id.category_grid);
- GridMarginDecoration.applyTo(mImageGrid);
+ mImageGrid.addItemDecoration(new GridPaddingDecoration(
+ getResources().getDimensionPixelSize(R.dimen.grid_padding)));
mTileSizePx = TileSizeCalculator.getCategoryTileSize(getActivity());
@@ -877,7 +878,7 @@
*/
private class CategoryHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
private Category mCategory;
- private RelativeLayout mTileLayout;
+ private CardView mCategoryView;
private ImageView mImageView;
private ImageView mOverlayIconView;
private TextView mTitleView;
@@ -886,12 +887,12 @@
super(itemView);
itemView.setOnClickListener(this);
- mTileLayout = itemView.findViewById(R.id.tile);
+ mCategoryView = itemView.findViewById(R.id.category);
mImageView = itemView.findViewById(R.id.image);
mOverlayIconView = itemView.findViewById(R.id.overlay_icon);
mTitleView = itemView.findViewById(R.id.category_title);
- mTileLayout.getLayoutParams().height = mTileSizePx.y;
+ mCategoryView.getLayoutParams().height = mTileSizePx.y;
}
@Override
@@ -1155,4 +1156,23 @@
dialog.show();
}
}
+
+ private class GridPaddingDecoration extends RecyclerView.ItemDecoration {
+
+ private int mPadding;
+
+ GridPaddingDecoration(int padding) {
+ mPadding = padding;
+ }
+
+ @Override
+ public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
+ RecyclerView.State state) {
+ int position = parent.getChildAdapterPosition(view) - NUM_NON_CATEGORY_VIEW_HOLDERS;
+ if (position >= 0) {
+ outRect.left = mPadding;
+ outRect.right = mPadding;
+ }
+ }
+ }
}
diff --git a/src/com/android/wallpaper/util/TileSizeCalculator.java b/src/com/android/wallpaper/util/TileSizeCalculator.java
index 84ecad7..ddeaf57 100755
--- a/src/com/android/wallpaper/util/TileSizeCalculator.java
+++ b/src/com/android/wallpaper/util/TileSizeCalculator.java
@@ -39,7 +39,7 @@
/**
* The number of columns for a "fewer columns" configuration of the category tiles grid.
*/
- private static final int CATEGORY_FEWER_COLUMNS = 2;
+ private static final int CATEGORY_FEWER_COLUMNS = 3;
/**
* The number of columns for a "more columns" configuration of the category tiles grid.
@@ -116,7 +116,7 @@
int windowWidthPx = getActivityWindowWidthPx(activity);
int columnCount = getNumCategoryColumns(activity, windowWidthPx);
- return getTileSize(appContext, columnCount, windowWidthPx);
+ return getSquareTileSize(appContext, columnCount, windowWidthPx);
}
/**
@@ -181,6 +181,24 @@
}
/**
+ * Returns the size of a grid tile with the given "fewer" count and "more" count, on the given
+ * display. The size is determined by these counts with the aspect ratio of 1:1 and is in units
+ * of px.
+ */
+ private static Point getSquareTileSize(Context context, int columnCount, int windowWidthPx) {
+ Resources res = context.getResources();
+ int gridPaddingPx = res.getDimensionPixelSize(R.dimen.grid_padding);
+ int gridEdgeSpacePx = res.getDimensionPixelSize(R.dimen.grid_edge_space);
+
+ int availableWidthPx = windowWidthPx
+ - gridPaddingPx * 2 * columnCount // Item's left and right padding * column count
+ - gridEdgeSpacePx * 2; // Grid view's left and right edge's space
+ int widthPx = Math.round((float) availableWidthPx / columnCount);
+
+ return new Point(widthPx, widthPx);
+ }
+
+ /**
* Returns the available width of the activity window in pixels.
*/
private static int getActivityWindowWidthPx(Activity activity) {
