Category images and colours added.

Note that the category images are not scaled for each drawable
directory (would like to move to vectors).

app/src/main/java/org/fdroid/fdroid/views/apps/CategorySpan.java

@@ -107,7 +107,7 @@ public class CategorySpan extends ReplacementSpan {
 
         // The background which goes behind the text.
         Paint backgroundPaint = new Paint();
-        backgroundPaint.setColor(CategoryController.getBackgroundColour(categoryName.toString()));
+        backgroundPaint.setColor(CategoryController.getBackgroundColour(context, categoryName.toString()));
         backgroundPaint.setAntiAlias(true);
         canvas.drawRoundRect(backgroundRect, cornerRadius, cornerRadius, backgroundPaint);
 

app/src/main/java/org/fdroid/fdroid/views/categories/CategoryController.java

@@ -9,6 +9,7 @@ import android.graphics.Rect;
 import android.os.Bundle;
 import android.support.annotation.NonNull;
 import android.support.v4.app.LoaderManager;
+import android.support.v4.content.ContextCompat;
 import android.support.v4.content.CursorLoader;
 import android.support.v4.content.Loader;
 import android.support.v4.view.ViewCompat;
@@ -16,6 +17,7 @@ import android.support.v7.widget.RecyclerView;
 import android.view.View;
 import android.widget.Button;
 import android.widget.FrameLayout;
+import android.widget.ImageView;
 import android.widget.TextView;
 
 import org.fdroid.fdroid.R;
@@ -28,6 +30,7 @@ import java.util.Random;
 public class CategoryController extends RecyclerView.ViewHolder implements LoaderManager.LoaderCallbacks<Cursor> {
     private final Button viewAll;
     private final TextView heading;
+    private final ImageView image;
     private final AppPreviewAdapter appCardsAdapter;
     private final FrameLayout background;
 
@@ -48,7 +51,7 @@ public class CategoryController extends RecyclerView.ViewHolder implements Loade
         viewAll.setOnClickListener(onViewAll);
 
         heading = (TextView) itemView.findViewById(R.id.name);
-
+        image = (ImageView) itemView.findViewById(R.id.category_image);
         background = (FrameLayout) itemView.findViewById(R.id.category_background);
 
         RecyclerView appCards = (RecyclerView) itemView.findViewById(R.id.app_cards);
@@ -58,25 +61,47 @@ public class CategoryController extends RecyclerView.ViewHolder implements Loade
 
     void bindModel(@NonNull String categoryName) {
         currentCategory = categoryName;
-        heading.setText(translateCategory(categoryName));
+
+        int categoryNameId = getCategoryResource(activity, categoryName, "string", false);
+        String translatedName = categoryNameId == 0 ? categoryName : activity.getString(categoryNameId);
+        heading.setText(translatedName);
+
         viewAll.setVisibility(View.INVISIBLE);
+
         loaderManager.initLoader(currentCategory.hashCode(), null, this);
         loaderManager.initLoader(currentCategory.hashCode() + 1, null, this);
 
-        background.setBackgroundColor(getBackgroundColour(categoryName));
+        background.setBackgroundColor(getBackgroundColour(activity, categoryName));
+
+        int categoryImageId = getCategoryResource(activity, categoryName, "drawable", true);
+        if (categoryImageId == 0) {
+            image.setVisibility(View.GONE);
+        } else {
+            image.setVisibility(View.VISIBLE);
+            image.setImageDrawable(ContextCompat.getDrawable(activity, categoryImageId));
+        }
     }
 
     /**
-     * Attempt to translate category name with fallback to default name if no translation available
+     * @param requiresLowerCaseId Previously categories were translated using strings such as "category_Reading" for
+     *                            the "Reading" category. Now we also need to have drawable resources such as
+     *                            "category_reading". Note how drawables must have only lower case letters, whereas
+     *                            we already have upper case letters in strings.xml. Hence this flag.
      */
-    private String translateCategory(@NonNull String categoryName) {
-        String resId = categoryName.replace(" & ", "_").replace(" ", "_").replace("'", "");
-        int id = activity.getResources().getIdentifier("category_" + resId, "string", activity.getPackageName());
-        return id == 0 ? categoryName : activity.getString(id);
-
+    private static int getCategoryResource(Context context, @NonNull String categoryName, String resourceType, boolean requiresLowerCaseId) {
+        String suffix = categoryName.replace(" & ", "_").replace(" ", "_").replace("'", "");
+        if (requiresLowerCaseId) {
+            suffix = suffix.toLowerCase();
+        }
+        return context.getResources().getIdentifier("category_" + suffix, resourceType, context.getPackageName());
     }
 
-    public static int getBackgroundColour(@NonNull String categoryName) {
+    public static int getBackgroundColour(Context context, @NonNull String categoryName) {
+        int colourId = getCategoryResource(context, categoryName, "color", false);
+        if (colourId > 0) {
+            return ContextCompat.getColor(context, colourId);
+        }
+
         // Seed based on the categoryName, so that each time we try to choose a colour for the same
         // category it will look the same for each different user, and each different session.
         Random random = new Random(categoryName.toLowerCase().hashCode());

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

@@ -50,14 +50,19 @@
         app:layout_constraintBottom_toBottomOf="@+id/app_cards"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        tools:background="#ffffbbbb"/>
+        tools:background="#ffffbbbb" />
 
     <ImageView
         android:id="@+id/category_image"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/button"
-        android:layout_width="100dp"
-        android:layout_height="100dp"
+        app:layout_constraintStart_toStartOf="@+id/category_background"
+        app:layout_constraintEnd_toEndOf="@+id/category_background"
+        app:layout_constraintTop_toTopOf="@+id/category_background"
+        app:layout_constraintBottom_toBottomOf="@+id/category_background"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        tools:src="@drawable/category_graphics"
+        android:scaleType="fitStart"
+        android:importantForAccessibility="no"
         tools:ignore="ContentDescription" />
 
     <android.support.v7.widget.RecyclerView
@@ -76,6 +81,8 @@
         android:paddingBottom="@dimen/category_preview__app_list__padding__vertical"
         android:clipToPadding="false"
         android:layout_marginLeft="8dp"
-        android:layout_marginRight="8dp"/>
+        android:layout_marginRight="8dp"
+        android:layout_marginStart="8dp"
+        android:layout_marginEnd="8dp" />
 
 </android.support.constraint.ConstraintLayout>

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

@@ -5,6 +5,24 @@
     <color name="unverified">#ff999999</color>
     <color name="red">#ffdd2c00</color>
 
+    <color name="category_connectivity">#CBEFEC</color>
+    <color name="category_development">#E2D6BC</color>
+    <color name="category_games">#6D6862</color>
+    <color name="category_graphics">#F25050</color>
+    <color name="category_internet">#DBDDC9</color>
+    <color name="category_money">#DDDDD0</color>
+    <color name="category_multimedia">#FF7F66</color>
+    <color name="category_navigation">#94D6FD</color>
+    <color name="category_phone_sms">#F3CFC0</color>
+    <color name="category_reading">#D6A07A</color>
+    <color name="category_science_education">#F4F4EC</color>
+    <color name="category_security">#6D6862</color>
+    <color name="category_sports_health">#72C7EA</color>
+    <color name="category_system">#D3DB77</color>
+    <color name="category_theming">#DEEFE9</color>
+    <color name="category_time">#FF7043</color>
+    <color name="category_writing">#F2E9CE</color>
+
     <color name="fdroid_blue">#ff1976d2</color>
     <color name="fdroid_blue_dark">#ff0d47a1</color>
     <color name="fdroid_blue_darkest">#ff042570</color>