Merge pull request #188 from brarcher/card-list-layout

Improve card list layout

app/src/main/java/protect/card_locker/LetterBitmap.java

@@ -0,0 +1,125 @@
+package protect.card_locker;
+
+import android.content.Context;
+import android.content.res.Resources;
+import android.content.res.TypedArray;
+import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.Rect;
+import android.graphics.Typeface;
+import android.text.TextPaint;
+
+/**
+ * Original from https://github.com/andOTP/andOTP/blob/master/app/src/main/java/org/shadowice/flocke/andotp/Utilities/LetterBitmap.java
+ * which was originally from http://stackoverflow.com/questions/23122088/colored-boxed-with-letters-a-la-gmail
+ * Used to create a {@link Bitmap} that contains a letter used in the English
+ * alphabet or digit, if there is no letter or digit available, a default image
+ * is shown instead.
+ */
+class LetterBitmap
+{
+
+    /**
+     * The number of available tile colors
+     */
+    private static final int NUM_OF_TILE_COLORS = 8;
+
+    /**
+     * The {@link TextPaint} used to draw the letter onto the tile
+     */
+    private final TextPaint mPaint = new TextPaint();
+    /**
+     * The bounds that enclose the letter
+     */
+    private final Rect mBounds = new Rect();
+    /**
+     * The {@link Canvas} to draw on
+     */
+    private final Canvas mCanvas = new Canvas();
+    /**
+     * The first char of the name being displayed
+     */
+    private final char[] mFirstChar = new char[1];
+
+    /**
+     * The background colors of the tile
+     */
+    private final TypedArray mColors;
+    /**
+     * The font size used to display the letter
+     */
+    private final int mTileLetterFontSize;
+    /**
+     * The default image to display
+     */
+    private final Bitmap mDefaultBitmap;
+
+    /**
+     * Constructor for <code>LetterTileProvider</code>
+     *
+     * @param context The {@link Context} to use
+     */
+    public LetterBitmap(Context context)
+    {
+        final Resources res = context.getResources();
+
+        mPaint.setTypeface(Typeface.create("sans-serif-light", Typeface.BOLD));
+        mPaint.setColor(Color.WHITE);
+        mPaint.setTextAlign(Paint.Align.CENTER);
+        mPaint.setAntiAlias(true);
+
+        mColors = res.obtainTypedArray(R.array.letter_tile_colors);
+        mTileLetterFontSize = res.getDimensionPixelSize(R.dimen.tile_letter_font_size);
+
+        mDefaultBitmap = BitmapFactory.decodeResource(res, android.R.drawable.sym_def_app_icon);
+    }
+
+    /**
+     * @param displayName The name used to create the letter for the tile
+     * @param key         The key used to generate the background color for the tile
+     * @param width       The desired width of the tile
+     * @param height      The desired height of the tile
+     * @return A {@link Bitmap} that contains a letter used in the English
+     * alphabet or digit, if there is no letter or digit available, a
+     * default image is shown instead
+     */
+    public Bitmap getLetterTile(String displayName, String key, int width, int height)
+    {
+        final Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
+        String firstChar = displayName.substring(0, 1);
+
+        final Canvas c = mCanvas;
+        c.setBitmap(bitmap);
+        c.drawColor(pickColor(key));
+
+        mFirstChar[0] = firstChar.toUpperCase().charAt(0);
+        mPaint.setTextSize(mTileLetterFontSize);
+        mPaint.getTextBounds(mFirstChar, 0, 1, mBounds);
+        c.drawText(mFirstChar, 0, 1, width / 2.0f, height / 2.0f
+                + (mBounds.bottom - mBounds.top) / 2.0f, mPaint);
+        return bitmap;
+    }
+
+    /**
+     * @param key The key used to generate the tile color
+     * @return A new or previously chosen color for <code>key</code> used as the
+     * tile background color
+     */
+    private int pickColor(String key)
+    {
+        // String.hashCode() is not supposed to change across java versions, so
+        // this should guarantee the same key always maps to the same color
+        final int color = Math.abs(key.hashCode()) % NUM_OF_TILE_COLORS;
+        try
+        {
+            return mColors.getColor(color, Color.BLACK);
+        }
+        finally
+        {
+            mColors.recycle();
+        }
+    }
+}

app/src/main/java/protect/card_locker/LoyaltyCardCursorAdapter.java

@@ -6,6 +6,7 @@ import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.CursorAdapter;
+import android.widget.ImageView;
 import android.widget.TextView;
 
 class LoyaltyCardCursorAdapter extends CursorAdapter
@@ -29,6 +30,7 @@ class LoyaltyCardCursorAdapter extends CursorAdapter
     public void bindView(View view, Context context, Cursor cursor)
     {
         // Find fields to populate in inflated template
+        ImageView thumbnail = view.findViewById(R.id.thumbnail);
         TextView storeField = (TextView) view.findViewById(R.id.store);
         TextView cardIdField = (TextView) view.findViewById(R.id.cardId);
 
@@ -49,5 +51,9 @@ class LoyaltyCardCursorAdapter extends CursorAdapter
         String cardIdLabel = view.getResources().getString(R.string.cardId);
         String cardIdText = String.format(cardIdFormat, cardIdLabel, loyaltyCard.cardId);
         cardIdField.setText(cardIdText);
+
+        LetterBitmap letterBitmap = new LetterBitmap(context);
+        int pixelSize = context.getResources().getDimensionPixelSize(R.dimen.cardThumbnailSize);
+        thumbnail.setImageBitmap(letterBitmap.getLetterTile(loyaltyCard.store, loyaltyCard.store, pixelSize, pixelSize));
     }
 }

app/src/main/res/layout/loyalty_card_layout.xml

@@ -1,32 +1,56 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout android:orientation="vertical"
-              android:padding="10.0dp"
-              android:layout_width="fill_parent"
-              android:layout_height="fill_parent"
-              xmlns:android="http://schemas.android.com/apk/res/android">
-    <LinearLayout android:orientation="horizontal"
-                  android:padding="5.0dp"
-                  android:layout_width="fill_parent"
-                  android:layout_height="wrap_content"
-                  android:baselineAligned="true">
-        <TextView android:textSize="20.0sp"
-                  android:id="@+id/store"
-                  android:layout_width="0dp"
-                  android:layout_height="wrap_content"
-                  android:layout_weight="1.0"
-                  android:maxLines="1"/>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="horizontal"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:gravity="center_vertical"
+    android:baselineAligned="false"
+    android:padding="@dimen/activity_margin">
+
+    <ImageView
+        android:id="@+id/thumbnail"
+        android:layout_width="@dimen/cardThumbnailSize"
+        android:layout_height="@dimen/cardThumbnailSize"
+        android:layout_marginEnd="@dimen/activity_margin"
+        android:src="@mipmap/ic_launcher"
+        android:contentDescription="@string/thumbnailDescription"/>
+
+    <LinearLayout
+        android:orientation="vertical"
+        android:layout_width="0dip"
+        android:layout_height="wrap_content"
+        android:layout_weight="1">
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content" >
+
+            <LinearLayout
+                android:id="@+id/valueLayout"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:visibility="visible">
+
+                <TextView
+                    android:id="@+id/store"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textColor="?android:attr/textColorSecondary"
+                    android:textSize="28sp"
+                    android:textStyle="bold"/>
+
+            </LinearLayout>
+
+        </LinearLayout>
+
+        <TextView
+            android:id="@+id/cardId"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:maxLines="1"
+            android:ellipsize="end"
+            android:textSize="18sp"/>
     </LinearLayout>
 
-    <LinearLayout android:orientation="horizontal"
-                  android:padding="5.0dp"
-                  android:layout_width="fill_parent"
-                  android:layout_height="wrap_content"
-                  android:baselineAligned="true">
-        <TextView android:textSize="20.0sp"
-                  android:layout_gravity="start"
-                  android:id="@+id/cardId"
-                  android:layout_width="wrap_content"
-                  android:layout_height="wrap_content" />
-    </LinearLayout>
-
-</LinearLayout>
+</LinearLayout>

app/src/main/res/values/dimens.xml

@@ -16,4 +16,11 @@
     <dimen name="inputPadding">20dip</dimen>
     <dimen name="inputSize">18sp</dimen>
 
+    <dimen name="cardThumbnailSize">46dp</dimen>
+
+    <dimen name="activity_margin_small">8dp</dimen>
+    <dimen name="activity_margin">16dp</dimen>
+
+    <!-- The default letter tile text size -->
+    <dimen name="tile_letter_font_size">33sp</dimen>
 </resources>

app/src/main/res/values/settings.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <array name="letter_tile_colors">
+        <item>#f16364</item>
+        <item>#f58559</item>
+        <item>#f9a43e</item>
+        <item>#e4c62e</item>
+        <item>#67bf74</item>
+        <item>#59a2be</item>
+        <item>#2093cd</item>
+        <item>#ad62a7</item>
+    </array>
+</resources>

app/src/main/res/values/strings.xml

@@ -85,6 +85,8 @@
 
     <string name="copy_to_clipboard_toast">Card ID copied to clipboard</string>
 
+    <string name="thumbnailDescription">Thumbnail for card</string>
+
     <string name="startIntro">Start Intro</string>
     <string name="intro1Title">Welcome to Loyalty Card Keychain\n</string>
     <string name="intro1Description">Manage your barcode-based store/loyalty cards on your phone!\n\n</string>