Make the grid layout look nicer and add touch feedback

joshfriend · Sep 26, 2018 · 0f436f8 · 0f436f8
1 parent 8b3fe2d
commit 0f436f8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 43 deletions.
diff --git a/bunnies/src/main/java/com/fueledbycaffeine/bunnypedia/ui/card/CardGridViewHolder.kt b/bunnies/src/main/java/com/fueledbycaffeine/bunnypedia/ui/card/CardGridViewHolder.kt
@@ -20,14 +20,17 @@ class CardGridViewHolder(override val containerView: View): CardViewHolder(conta
 
   override fun bind(card: Card) {
     val chipColor = ContextCompat.getColor(itemView.context, card.deck.color)
-    title.setBackgroundColor(chipColor)
+    titleBackground.setBackgroundColor(chipColor)
     title.setTextColor(ColorUtil.contrastColor(chipColor))
     title.text = card.title
   }
 
   override fun clear() {
     title.text = ""
-    title.setBackgroundColor(
+    title.setTextColor(
+      ContextCompat.getColor(itemView.context, R.color.white)
+    )
+    titleBackground.setBackgroundColor(
       ContextCompat.getColor(itemView.context, R.color.deck_blue)
     )
     image.setImageDrawable(null)

diff --git a/bunnies/src/main/res/layout/card_view_grid_item.xml b/bunnies/src/main/res/layout/card_view_grid_item.xml
@@ -1,57 +1,65 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout
+<androidx.cardview.widget.CardView
     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:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_margin="4dp"
+    android:layout_gravity="center"
+    app:cardCornerRadius="10dp"
+    android:foreground="?attr/selectableItemBackground"
+    android:clickable="true"
+    android:focusable="true"
     >
 
-    <androidx.cardview.widget.CardView
-        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"
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_margin="4dp"
-        android:layout_gravity="center"
         >
 
-        <androidx.constraintlayout.widget.ConstraintLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            >
+        <ImageView
+            android:id="@+id/image"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:scaleType="centerCrop"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintDimensionRatio="3:4"
+            tools:src="@drawable/card_0048"
+            tools:ignore="ContentDescription"
+            />
 
-            <ImageView
-                android:id="@+id/image"
-                android:layout_width="0dp"
-                android:layout_height="0dp"
-                android:scaleType="centerCrop"
-                app:layout_constraintBottom_toBottomOf="parent"
-                app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toTopOf="parent"
-                app:layout_constraintDimensionRatio="3:4"
-                tools:src="@drawable/card_0048"
-                tools:ignore="ContentDescription"
-                />
+        <View
+            android:id="@+id/titleBackground"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            tools:background="@color/black"
+            app:layout_constraintHeight_percent="0.2"
+            app:layout_constraintBottom_toBottomOf="@+id/image"
+            app:layout_constraintEnd_toEndOf="@+id/image"
+            app:layout_constraintStart_toStartOf="@+id/image"
+            />
 
-            <TextView
-                android:id="@+id/title"
-                android:layout_width="0dp"
-                android:layout_height="wrap_content"
-                android:background="@color/black"
-                android:textColor="@color/white"
-                android:padding="8dp"
-                android:maxLines="2"
-                app:layout_constraintBottom_toBottomOf="@+id/image"
-                app:layout_constraintEnd_toEndOf="@+id/image"
-                app:layout_constraintStart_toStartOf="@+id/image"
-                tools:text="Nuclear Warhead"
-                />
+        <TextView
+            android:id="@+id/title"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:textColor="@color/white"
+            android:layout_margin="8dp"
+            android:ellipsize="end"
+            android:maxLines="2"
+            android:gravity="center_vertical"
+            app:layout_constraintHeight_percent="0.2"
+            app:layout_constraintBottom_toBottomOf="@id/titleBackground"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="@id/titleBackground"
+            tools:text="@string/placeholder_darth_plagueis2"
+            />
 
-        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
 
-    </androidx.cardview.widget.CardView>
-
-</FrameLayout>
+</androidx.cardview.widget.CardView>