Apply material design guidelines to categories

app/src/main/java/eu/kanade/tachiyomi/ui/category/CategoryActivity.kt

@@ -27,7 +27,9 @@ import nucleus.factory.RequiresPresenter
  * UI related actions should be called from here.
  */
 @RequiresPresenter(CategoryPresenter::class)
-class CategoryActivity : BaseRxActivity<CategoryPresenter>(), ActionMode.Callback, FlexibleViewHolder.OnListItemClickListener, OnStartDragListener {
+class CategoryActivity :
+        BaseRxActivity<CategoryPresenter>(),
+        ActionMode.Callback, FlexibleViewHolder.OnListItemClickListener, OnStartDragListener {
 
     /**
      * Object used to show actionMode toolbar.

app/src/main/java/eu/kanade/tachiyomi/ui/category/CategoryAdapter.kt

@@ -1,7 +1,6 @@
 package eu.kanade.tachiyomi.ui.category
 
 import android.view.ViewGroup
-import com.amulyakhare.textdrawable.util.ColorGenerator
 import eu.davidea.flexibleadapter.FlexibleAdapter
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.data.database.models.Category
@@ -17,18 +16,10 @@ import java.util.*
  * @param activity activity that created adapter
  * @constructor Creates a CategoryAdapter object
  */
-class CategoryAdapter(private val activity: CategoryActivity) : FlexibleAdapter<CategoryHolder, Category>(), ItemTouchHelperAdapter {
-
-    /**
-     * Generator used to generate circle letter icons
-     */
-    private val generator: ColorGenerator
+class CategoryAdapter(private val activity: CategoryActivity) :
+        FlexibleAdapter<CategoryHolder, Category>(), ItemTouchHelperAdapter {
 
     init {
-        // Let generator use Material Design colors.
-        // Material design is love, material design is live!
-        generator = ColorGenerator.MATERIAL
-
         // Set unique id's
         setHasStableIds(true)
     }
@@ -54,7 +45,7 @@ class CategoryAdapter(private val activity: CategoryActivity) : FlexibleAdapter<
     override fun onBindViewHolder(holder: CategoryHolder, position: Int) {
         // Update holder values.
         val category = getItem(position)
-        holder.onSetValues(category, generator)
+        holder.onSetValues(category)
 
         //When user scrolls this bind the correct selection status
         holder.itemView.isActivated = isSelected(position)

app/src/main/java/eu/kanade/tachiyomi/ui/category/CategoryHolder.kt

@@ -24,7 +24,12 @@ import kotlinx.android.synthetic.main.item_edit_categories.view.*
  *
  * @constructor Create CategoryHolder object
  */
-class CategoryHolder(view: View, adapter: CategoryAdapter, listener: FlexibleViewHolder.OnListItemClickListener, dragListener: OnStartDragListener) : FlexibleViewHolder(view, adapter, listener) {
+class CategoryHolder(
+        view: View,
+        adapter: CategoryAdapter,
+        listener: FlexibleViewHolder.OnListItemClickListener,
+        dragListener: OnStartDragListener
+) : FlexibleViewHolder(view, adapter, listener) {
 
     init {
         // Create round letter image onclick to simulate long click
@@ -46,29 +51,31 @@ class CategoryHolder(view: View, adapter: CategoryAdapter, listener: FlexibleVie
      * Update category item values.
      *
      * @param category category of item.
-     * @param generator generator used to generate circle letter icons.
      */
-    fun onSetValues(category: Category, generator: ColorGenerator) {
+    fun onSetValues(category: Category) {
         // Set capitalized title.
         itemView.title.text = category.name.capitalize()
 
         // Update circle letter image.
-        itemView.image.setImageDrawable(getRound(category.name.substring(0, 1).toUpperCase(), generator))
+        itemView.post {
+            itemView.image.setImageDrawable(getRound(category.name.take(1).toUpperCase()))
+        }
     }
 
     /**
      * Returns circle letter image
      *
      * @param text first letter of string
-     * @param generator the generator used to generate circle letter image
      */
-    private fun getRound(text: String, generator: ColorGenerator): TextDrawable {
+    private fun getRound(text: String): TextDrawable {
+        val size = Math.min(itemView.image.width, itemView.image.height)
         return TextDrawable.builder()
                 .beginConfig()
+                .width(size)
+                .height(size)
                 .textColor(Color.WHITE)
                 .useFont(Typeface.DEFAULT)
-                .toUpperCase()
                 .endConfig()
-                .buildRound(text, generator.getColor(text))
+                .buildRound(text, ColorGenerator.MATERIAL.getColor(text))
     }
 }

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

@@ -1,53 +1,43 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-                xmlns:tools="http://schemas.android.com/tools"
-                xmlns:app="http://schemas.android.com/apk/res-auto"
-                android:layout_width="match_parent"
-                android:layout_height="?android:attr/listPreferredItemHeightLarge"
-                android:paddingTop="8dp"
-                android:paddingBottom="8dp"
-                android:background="?attr/selectable_list_drawable"
-                >
+<FrameLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="@dimen/material_component_lists_single_line_with_avatar_height"
+    android:background="?attr/selectable_list_drawable">
+
     <ImageView
         android:id="@+id/image"
-        android:layout_width="50dp"
-        android:layout_height="50dp"
-        android:layout_alignParentLeft="true"
-        android:layout_alignParentStart="true"
-        android:layout_centerInParent="true"
+        android:layout_width="@dimen/material_component_lists_single_line_with_avatar_height"
+        android:layout_height="@dimen/material_component_lists_single_line_with_avatar_height"
         android:clickable="true"
-        android:layout_marginLeft="@dimen/margin_left"
-        android:layout_marginStart="@dimen/margin_left"
-        android:layout_marginRight="@dimen/margin_right"
-        android:layout_marginEnd="@dimen/margin_right"/>
-
-    <android.support.v7.widget.AppCompatImageView
-        android:id="@+id/reorder"
-        android:layout_width="50dp"
-        android:layout_height="50dp"
-        android:layout_marginLeft="@dimen/margin_left"
-        android:layout_marginStart="@dimen/margin_left"
-        android:layout_marginRight="@dimen/margin_right"
-        android:layout_marginEnd="@dimen/margin_right"
-        android:scaleType="center"
-        android:layout_centerInParent="true"
-        android:layout_alignParentRight="true"
-        android:layout_alignParentEnd="true"
-        app:srcCompat="@drawable/ic_reorder_grey_24dp"
-        android:tint="?android:attr/textColorPrimary"/>
+        android:paddingLeft="@dimen/material_component_lists_icon_left_padding"
+        android:paddingStart="@dimen/material_component_lists_icon_left_padding"
+        android:paddingRight="0dp"
+        android:paddingEnd="0dp"/>
 
     <TextView
         android:id="@+id/title"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_toRightOf="@id/image"
-        android:layout_toEndOf="@id/image"
-        android:layout_toLeftOf="@id/reorder"
-        android:layout_toStartOf="@id/reorder"
-        android:layout_centerInParent="true"
+        android:layout_marginLeft="@dimen/material_component_lists_text_left_padding"
+        android:layout_marginStart="@dimen/material_component_lists_text_left_padding"
+        android:layout_marginRight="@dimen/material_component_lists_single_line_with_avatar_height"
+        android:layout_marginEnd="@dimen/material_component_lists_single_line_with_avatar_height"
         android:ellipsize="end"
         android:maxLines="1"
+        android:layout_gravity="center_vertical"
         android:textAppearance="@style/TextAppearance.Regular.SubHeading"
         tools:text="Title"/>
 
-</RelativeLayout>
+    <ImageView
+        android:id="@+id/reorder"
+        android:layout_width="@dimen/material_component_lists_single_line_with_avatar_height"
+        android:layout_height="@dimen/material_component_lists_single_line_with_avatar_height"
+        android:scaleType="center"
+        android:layout_gravity="end"
+        app:srcCompat="@drawable/ic_reorder_grey_24dp"
+        android:tint="?android:attr/textColorPrimary"/>
+
+</FrameLayout>