Completely rewrite about activity

21 files changed, 379 insertions, 79 deletions

diff --git a/library/src/main/kotlin/ca/allanwang/kau/about/AboutActivityBase.kt b/library/src/main/kotlin/ca/allanwang/kau/about/AboutActivityBase.kt
index c518ca6..143e92a 100644
--- a/library/src/main/kotlin/ca/allanwang/kau/about/AboutActivityBase.kt
+++ b/library/src/main/kotlin/ca/allanwang/kau/about/AboutActivityBase.kt
@@ -1,26 +1,24 @@
 package ca.allanwang.kau.about
 
+import android.graphics.drawable.Drawable
 import android.os.Bundle
 import android.support.v4.view.PagerAdapter
 import android.support.v4.view.ViewPager
 import android.support.v7.app.AppCompatActivity
-import android.support.v7.widget.LinearLayoutManager
 import android.support.v7.widget.RecyclerView
 import android.transition.TransitionInflater
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import android.widget.FrameLayout
-import android.widget.TextView
 import ca.allanwang.kau.R
-import ca.allanwang.kau.utils.bindView
-import ca.allanwang.kau.utils.dimenPixelSize
-import ca.allanwang.kau.utils.string
-import ca.allanwang.kau.views.CutoutTextView
+import ca.allanwang.kau.iitems.CutoutIItem
+import ca.allanwang.kau.iitems.LibraryIItem
+import ca.allanwang.kau.utils.*
 import ca.allanwang.kau.widgets.ElasticDragDismissFrameLayout
 import ca.allanwang.kau.widgets.InkPageIndicator
 import com.mikepenz.aboutlibraries.Libs
 import com.mikepenz.aboutlibraries.entity.Library
+import com.mikepenz.fastadapter.IItem
 import com.mikepenz.fastadapter.commons.adapters.FastItemAdapter
 import org.jetbrains.anko.doAsync
 import org.jetbrains.anko.uiThread
@@ -66,7 +64,9 @@ abstract class AboutActivityBase(val rClass: Class<*>, val configBuilder: Config
 
     inner class Configs {
         var cutoutTextRes: Int = -1
-        val cutoutText: String? = "KAU" //todo make null
+        var cutoutText: String? = null
+        var cutoutDrawableRes: Int = -1
+        var cutoutDrawable: Drawable? = null
         var mainPageTitleRes: Int = -1
         var mainPageTitle: String = "Kau test"
         var libPageTitleRes: Int = -1
@@ -78,6 +78,11 @@ abstract class AboutActivityBase(val rClass: Class<*>, val configBuilder: Config
 
     open val pageCount: Int = 2
 
+    /**
+     * Gets the view associated with the given page position
+     * Keep in mind that when inflating, do NOT add the view to the viewgroup
+     * Use layoutInflater.inflate(id, parent, false)
+     */
     open fun getPage(position: Int, layoutInflater: LayoutInflater, parent: ViewGroup): View {
         return when (position) {
             0 -> inflateMainPage(layoutInflater, parent)
@@ -86,43 +91,35 @@ abstract class AboutActivityBase(val rClass: Class<*>, val configBuilder: Config
         }
     }
 
-    fun inflateMainPage(layoutInflater: LayoutInflater, parent: ViewGroup): View {
-        val v = layoutInflater.inflate(R.layout.kau_about_section_main, parent, false)
-        postInflateMainPage(
-                v.findViewById<CutoutTextView>(R.id.about_main_cutout),
-                v.findViewById<FrameLayout>(R.id.about_main_bottom_container),
-                v.findViewById<TextView>(R.id.about_main_bottom_text)
-        )
-        return v
-    }
-
-    open fun postInflateMainPage(cutout: CutoutTextView, bottomContainer: FrameLayout, bottomText: TextView) {
-        with (configs) {
-            cutout.text = string(cutoutTextRes, cutoutText)
-            bottomText.text = string(mainPageTitleRes, mainPageTitle)
+    open fun inflateMainPage(layoutInflater: LayoutInflater, parent: ViewGroup): View {
+        val fastAdapter = FastItemAdapter<IItem<*, *>>()
+        val recycler = fullLinearRecycler {
+            adapter = fastAdapter
         }
+        fastAdapter.add(CutoutIItem {
+            with(configs) {
+                text = string(cutoutTextRes, cutoutText)
+                drawable = drawable(cutoutDrawableRes, cutoutDrawable)
+            }
+        })
+        return recycler
     }
 
-    fun inflateLibPage(layoutInflater: LayoutInflater, parent: ViewGroup): View {
-        val v = layoutInflater.inflate(R.layout.kau_about_section_libraries, parent, false)
-        postInflateLibPage(
-                v.findViewById<TextView>(R.id.about_library_title),
-                v.findViewById<RecyclerView>(R.id.about_library_recycler)
-        )
-        return v
-    }
 
-    open fun postInflateLibPage(title: TextView, recycler: RecyclerView) {
-        title.text = string(configs.libPageTitleRes, configs.libPageTitle)
-        val libAdapter = FastItemAdapter<LibraryItem>()
-        with(recycler) {
-            layoutManager = LinearLayoutManager(this@AboutActivityBase)
-            adapter = libAdapter
-        }
+    open fun inflateLibPage(layoutInflater: LayoutInflater, parent: ViewGroup): View {
+        val v = layoutInflater.inflate(R.layout.kau_recycler_detached_background, parent, false)
+        val fastAdapter = FastItemAdapter<IItem<*, *>>()
+        val recycler = v.findViewById<RecyclerView>(R.id.kau_recycler_detached)
+        recycler.adapter = fastAdapter
+        val background = v.findViewById<View>(R.id.kau_recycler_detached_background)
         doAsync {
-            val libs = getLibraries(Libs(this@AboutActivityBase, Libs.toStringArray(rClass.fields))).map { LibraryItem(it) }
-            uiThread { libAdapter.add(libs) }
+            val libs = getLibraries(Libs(this@AboutActivityBase, Libs.toStringArray(rClass.fields))).map { LibraryIItem(it) }
+            uiThread {
+                recycler.transitionDelayed(R.transition.kau_enter_slide_top) //TODO fix this
+                fastAdapter.add(libs)
+            }
         }
+        return v
     }
 
     inner class AboutPagerAdapter : PagerAdapter() {
diff --git a/library/src/main/kotlin/ca/allanwang/kau/iitems/CardIItem.kt b/library/src/main/kotlin/ca/allanwang/kau/iitems/CardIItem.kt
new file mode 100644
index 0000000..36e7ef8
--- /dev/null
+++ b/library/src/main/kotlin/ca/allanwang/kau/iitems/CardIItem.kt
@@ -0,0 +1,116 @@
+package ca.allanwang.kau.iitems
+
+import android.graphics.Color
+import android.graphics.drawable.Drawable
+import android.support.v7.widget.CardView
+import android.support.v7.widget.RecyclerView
+import android.view.View
+import android.widget.Button
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+import ca.allanwang.kau.R
+import ca.allanwang.kau.utils.*
+import com.mikepenz.fastadapter.FastAdapter
+import com.mikepenz.fastadapter.items.AbstractItem
+import com.mikepenz.fastadapter.listeners.ClickEventHook
+import com.mikepenz.iconics.typeface.IIcon
+
+/**
+ * Created by Allan Wang on 2017-06-28.
+ *
+ * Simple generic card item with an icon, title, description and button
+ * The icon and button are hidden by default unless values are given
+ */
+class CardIItem(val builder: Config.() -> Unit = {}) : AbstractItem<CardIItem, CardIItem.ViewHolder>() {
+
+
+    companion object {
+        fun bindClickEvents(fastAdapter: FastAdapter<CardIItem>) {
+            fastAdapter.withEventHook(object : ClickEventHook<CardIItem>() {
+                override fun onBindMany(viewHolder: RecyclerView.ViewHolder): List<View>? {
+                    return if (viewHolder is ViewHolder) listOf(viewHolder.card, viewHolder.button) else null
+                }
+
+                override fun onClick(v: View, position: Int, adapter: FastAdapter<CardIItem>, item: CardIItem) {
+                    with(item.configs) {
+                        when (v.id) {
+                            R.id.kau_card_container -> cardClick?.onClick(v)
+                            R.id.kau_card_button -> buttonClick?.onClick(v)
+                            else -> {
+                            }
+                        }
+                    }
+                }
+            })
+        }
+    }
+
+    val configs = Config().apply { builder() }
+
+    class Config {
+        var title: String? = null
+        var titleRes: Int = -1
+        var desc: String? = null
+        var descRes: Int = -1
+        var button: String? = null
+        var buttonRes: Int = -1
+        var buttonClick: View.OnClickListener? = null
+        var cardClick: View.OnClickListener? = null
+        var image: Drawable? = null
+        var imageIIcon: IIcon? = null
+        var imageIIconColor: Int = Color.WHITE
+        var imageRes: Int = -1
+    }
+
+
+    override fun getType(): Int = R.id.kau_item_card
+
+    override fun getLayoutRes(): Int = R.layout.kau_iitem_card
+
+    override fun bindView(holder: ViewHolder, payloads: MutableList<Any>?) {
+        super.bindView(holder, payloads)
+        with(holder.itemView.context) context@ {
+            with(configs) {
+                holder.title.text = string(titleRes, title)
+                holder.description.text = string(descRes, desc)
+                val buttonText = string(buttonRes, button)
+                if (buttonText != null) {
+                    holder.bottomRow.visible()
+                    holder.button.text = buttonText
+                    holder.button.setOnClickListener(buttonClick)
+                }
+                holder.icon.setImageDrawable(
+                        if (imageRes > 0) drawable(imageRes)
+                        else if (imageIIcon != null) imageIIcon!!.toDrawable(this@context, sizeDp = 40, color = imageIIconColor)
+                        else image
+                )
+                holder.card.setOnClickListener(cardClick)
+            }
+        }
+    }
+
+    override fun unbindView(holder: ViewHolder) {
+        super.unbindView(holder)
+        with(holder) {
+            icon.gone().setImageDrawable(null)
+            title.text = null
+            description.text = null
+            bottomRow.gone()
+            button.setOnClickListener(null)
+            card.setOnClickListener(null)
+        }
+    }
+
+    override fun getViewHolder(v: View): ViewHolder = ViewHolder(v)
+
+    class ViewHolder(v: View) : RecyclerView.ViewHolder(v) {
+        val card: CardView by bindView(R.id.kau_card_container)
+        val icon: ImageView by bindView(R.id.kau_card_image)
+        val title: TextView by bindView(R.id.kau_card_title)
+        val description: TextView by bindView(R.id.kau_card_description)
+        val bottomRow: LinearLayout by bindView(R.id.kau_card_bottom_row)
+        val button: Button by bindView(R.id.kau_card_button)
+    }
+
+}
\ No newline at end of file
diff --git a/library/src/main/kotlin/ca/allanwang/kau/iitems/CutoutIItem.kt b/library/src/main/kotlin/ca/allanwang/kau/iitems/CutoutIItem.kt
new file mode 100644
index 0000000..d138917
--- /dev/null
+++ b/library/src/main/kotlin/ca/allanwang/kau/iitems/CutoutIItem.kt
@@ -0,0 +1,44 @@
+package ca.allanwang.kau.iitems
+
+import android.support.v7.widget.RecyclerView
+import android.view.View
+import ca.allanwang.kau.R
+import ca.allanwang.kau.utils.bindView
+import ca.allanwang.kau.views.CutoutView
+import com.mikepenz.fastadapter.items.AbstractItem
+
+/**
+ * Created by Allan Wang on 2017-06-28.
+ *
+ * Just a cutout item with some defaults in [R.layout.kau_iitem_cutout]
+ */
+class CutoutIItem(val config: CutoutView.() -> Unit = {}) : AbstractItem<CutoutIItem, CutoutIItem.ViewHolder>() {
+
+    override fun getType(): Int = R.id.kau_item_cutout
+
+    override fun getLayoutRes(): Int = R.layout.kau_iitem_cutout
+
+    override fun isSelectable(): Boolean = false
+
+    override fun bindView(holder: ViewHolder, payloads: MutableList<Any>?) {
+        super.bindView(holder, payloads)
+        with(holder) {
+            cutout.config()
+        }
+    }
+
+    override fun unbindView(holder: ViewHolder) {
+        super.unbindView(holder)
+        with(holder) {
+            cutout.drawable = null
+            cutout.text = "Text" //back to default
+        }
+    }
+
+    override fun getViewHolder(v: View): ViewHolder = ViewHolder(v)
+
+    class ViewHolder(v: View) : RecyclerView.ViewHolder(v) {
+        val cutout: CutoutView by bindView(R.id.kau_cutout)
+    }
+
+}
\ No newline at end of file
diff --git a/library/src/main/kotlin/ca/allanwang/kau/about/LibraryItem.kt b/library/src/main/kotlin/ca/allanwang/kau/iitems/LibraryIItem.kt
index c3bfb5a..e617aaa 100644
--- a/library/src/main/kotlin/ca/allanwang/kau/about/LibraryItem.kt
+++ b/library/src/main/kotlin/ca/allanwang/kau/iitems/LibraryIItem.kt
@@ -1,4 +1,4 @@
-package ca.allanwang.kau.about
+package ca.allanwang.kau.iitems
 
 /**
  * Created by Allan Wang on 2017-06-27.
@@ -22,11 +22,11 @@ import com.mikepenz.fastadapter.items.AbstractItem
 /**
  * Created by mikepenz on 28.12.15.
  */
-class LibraryItem(val lib: Library) : AbstractItem<LibraryItem, LibraryItem.ViewHolder>() {
+class LibraryIItem(val lib: Library) : AbstractItem<LibraryIItem, LibraryIItem.ViewHolder>() {
 
     override fun getType(): Int = R.id.kau_item_about_library
 
-    override fun getLayoutRes(): Int = R.layout.kau_about_item_library
+    override fun getLayoutRes(): Int = R.layout.kau_about_iitem_library
 
     override fun isSelectable(): Boolean = false
 
diff --git a/library/src/main/kotlin/ca/allanwang/kau/searchview/SearchItem.kt b/library/src/main/kotlin/ca/allanwang/kau/searchview/SearchItem.kt
index a672e8a..60727a5 100644
--- a/library/src/main/kotlin/ca/allanwang/kau/searchview/SearchItem.kt
+++ b/library/src/main/kotlin/ca/allanwang/kau/searchview/SearchItem.kt
@@ -47,7 +47,7 @@ class SearchItem(val key: String,
         styledContent!!.setSpan(StyleSpan(Typeface.BOLD), index, index + subText.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
     }
 
-    override fun getLayoutRes(): Int = R.layout.kau_search_item
+    override fun getLayoutRes(): Int = R.layout.kau_search_iitem
 
     override fun getType(): Int = R.id.kau_item_search
 
diff --git a/library/src/main/kotlin/ca/allanwang/kau/utils/ContextUtils.kt b/library/src/main/kotlin/ca/allanwang/kau/utils/ContextUtils.kt
index 876f634..2a929a2 100644
--- a/library/src/main/kotlin/ca/allanwang/kau/utils/ContextUtils.kt
+++ b/library/src/main/kotlin/ca/allanwang/kau/utils/ContextUtils.kt
@@ -82,6 +82,7 @@ fun Context.integer(@IntegerRes id: Int): Int = resources.getInteger(id)
 fun Context.dimen(@DimenRes id: Int): Float = resources.getDimension(id)
 fun Context.dimenPixelSize(@DimenRes id: Int): Int = resources.getDimensionPixelSize(id)
 fun Context.drawable(@DrawableRes id: Int): Drawable = ContextCompat.getDrawable(this, id)
+fun Context.drawable(@DrawableRes id: Int, fallback: Drawable?): Drawable? = if (id > 0) drawable(id) else fallback
 
 //Attr retrievers
 fun Context.resolveColor(@AttrRes attr: Int, fallback: Int = 0): Int {
diff --git a/library/src/main/kotlin/ca/allanwang/kau/utils/Utils.kt b/library/src/main/kotlin/ca/allanwang/kau/utils/Utils.kt
index 6c1b6a1..55fb9ea 100644
--- a/library/src/main/kotlin/ca/allanwang/kau/utils/Utils.kt
+++ b/library/src/main/kotlin/ca/allanwang/kau/utils/Utils.kt
@@ -60,7 +60,11 @@ annotation class KauUtils
     return formatter.format(this)
 }
 
-@KauUtils fun Drawable.toBitmap(scaling: Float = 1f): Bitmap {
+/**
+ * Extracts the bitmap of a drawable, and applies a scale if given
+ * For solid colors, a 1 x 1 pixel will be generated
+ */
+@KauUtils fun Drawable.toBitmap(scaling: Float = 1f, config: Bitmap.Config = Bitmap.Config.ARGB_8888): Bitmap {
     if (this is BitmapDrawable && bitmap != null) {
         if (scaling == 1f) return bitmap
         val width = (bitmap.width * scaling).toInt()
@@ -68,9 +72,9 @@ annotation class KauUtils
         return Bitmap.createScaledBitmap(bitmap, width, height, false)
     }
     val bitmap = if (intrinsicWidth <= 0 || intrinsicHeight <= 0)
-        Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888) // Single color bitmap will be created of 1x1 pixel
+        Bitmap.createBitmap(1, 1, config)
     else
-        Bitmap.createBitmap((intrinsicWidth * scaling).toInt(), (intrinsicHeight * scaling).toInt(), Bitmap.Config.ARGB_8888)
+        Bitmap.createBitmap((intrinsicWidth * scaling).toInt(), (intrinsicHeight * scaling).toInt(), config)
     val canvas = Canvas(bitmap)
     setBounds(0, 0, canvas.width, canvas.height)
     draw(canvas)
diff --git a/library/src/main/kotlin/ca/allanwang/kau/utils/ViewUtils.kt b/library/src/main/kotlin/ca/allanwang/kau/utils/ViewUtils.kt
index 0f070d1..3fb8f27 100644
--- a/library/src/main/kotlin/ca/allanwang/kau/utils/ViewUtils.kt
+++ b/library/src/main/kotlin/ca/allanwang/kau/utils/ViewUtils.kt
@@ -6,9 +6,14 @@ import android.graphics.Outline
 import android.graphics.Rect
 import android.support.annotation.ColorInt
 import android.support.annotation.StringRes
+import android.support.annotation.TransitionRes
 import android.support.design.widget.Snackbar
 import android.support.transition.AutoTransition
+import android.support.transition.Transition
+import android.support.transition.TransitionInflater
 import android.support.transition.TransitionManager
+import android.support.v7.widget.LinearLayoutManager
+import android.support.v7.widget.RecyclerView
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewOutlineProvider
@@ -77,6 +82,12 @@ fun View.snackbar(@StringRes textId: Int, duration: Int = Snackbar.LENGTH_LONG,
     TransitionManager.beginDelayedTransition(this, transition)
 }
 
+@KauUtils fun ViewGroup.transitionDelayed(@TransitionRes id: Int, builder: Transition.() -> Unit = {}) {
+    val transition = TransitionInflater.from(context).inflateTransition(id)
+    transition.builder()
+    TransitionManager.beginDelayedTransition(this, transition)
+}
+
 @KauUtils fun View.setRippleBackground(@ColorInt foregroundColor: Int, @ColorInt backgroundColor: Int) {
     background = createSimpleRippleDrawable(foregroundColor, backgroundColor)
 }
@@ -99,4 +110,15 @@ val CIRCULAR_OUTLINE: ViewOutlineProvider = object : ViewOutlineProvider() {
                 view.width - view.paddingRight,
                 view.height - view.paddingBottom)
     }
+}
+
+/**
+ * Generates a recycler view with match parent and a linearlayoutmanager, since it's so commonly used
+ */
+fun Context.fullLinearRecycler(configs: RecyclerView.() -> Unit = {}): RecyclerView {
+    return RecyclerView(this).apply {
+        layoutManager = LinearLayoutManager(this@fullLinearRecycler)
+        layoutParams = RecyclerView.LayoutParams(RecyclerView.LayoutParams.MATCH_PARENT, RecyclerView.LayoutParams.MATCH_PARENT)
+        configs()
+    }
 }
\ No newline at end of file
diff --git a/library/src/main/kotlin/ca/allanwang/kau/views/CutoutTextView.kt b/library/src/main/kotlin/ca/allanwang/kau/views/CutoutView.kt
index 83ed6dd..023bdb4 100644
--- a/library/src/main/kotlin/ca/allanwang/kau/views/CutoutTextView.kt
+++ b/library/src/main/kotlin/ca/allanwang/kau/views/CutoutView.kt
@@ -33,7 +33,7 @@ import ca.allanwang.kau.utils.toBitmap
 /**
  * A view which punches out some text from an opaque color block, allowing you to see through it.
  */
-class CutoutTextView @JvmOverloads constructor(
+class CutoutView @JvmOverloads constructor(
         context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
 ) : View(context, attrs, defStyleAttr) {
 
@@ -43,8 +43,7 @@ class CutoutTextView @JvmOverloads constructor(
         const val TYPE_DRAWABLE = 101
     }
 
-    private val textPaint: TextPaint = TextPaint(Paint.ANTI_ALIAS_FLAG)
-    private val bitmapPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG)
+    private val paint: TextPaint = TextPaint(Paint.ANTI_ALIAS_FLAG)
     private var bitmapScaling: Float = 1f
     private var cutout: Bitmap? = null
     var foregroundColor = Color.MAGENTA
@@ -58,7 +57,7 @@ class CutoutTextView @JvmOverloads constructor(
     private var textSize: Float = 0f
     private var cutoutY: Float = 0f
     private var cutoutX: Float = 0f
-    private var drawable: Drawable? = null
+    var drawable: Drawable? = null
         set(value) {
             field = value
             if (value != null) cutoutType = TYPE_DRAWABLE
@@ -70,13 +69,13 @@ class CutoutTextView @JvmOverloads constructor(
 
     init {
         if (attrs != null) {
-            val a = context.obtainStyledAttributes(attrs, R.styleable.CutoutTextView, 0, 0)
-            if (a.hasValue(R.styleable.CutoutTextView_font))
-                textPaint.typeface = context.getFont(a.getString(R.styleable.CutoutTextView_font))
-            foregroundColor = a.getColor(R.styleable.CutoutTextView_foregroundColor, foregroundColor)
-            text = a.getString(R.styleable.CutoutTextView_android_text) ?: text
-            minHeight = a.getDimension(R.styleable.CutoutTextView_android_minHeight, minHeight)
-            heightPercentage = a.getFloat(R.styleable.CutoutTextView_heightPercentageToScreen, heightPercentage)
+            val a = context.obtainStyledAttributes(attrs, R.styleable.CutoutView, 0, 0)
+            if (a.hasValue(R.styleable.CutoutView_font))
+                paint.typeface = context.getFont(a.getString(R.styleable.CutoutView_font))
+            foregroundColor = a.getColor(R.styleable.CutoutView_foregroundColor, foregroundColor)
+            text = a.getString(R.styleable.CutoutView_android_text) ?: text
+            minHeight = a.getDimension(R.styleable.CutoutView_android_minHeight, minHeight)
+            heightPercentage = a.getFloat(R.styleable.CutoutView_heightPercentageToScreen, heightPercentage)
             a.recycle()
         }
         maxTextSize = context.dimenPixelSize(R.dimen.kau_display_4_text_size).toFloat()
@@ -97,14 +96,14 @@ class CutoutTextView @JvmOverloads constructor(
 
     private fun calculateTextPosition() {
         val targetWidth = width / PHI
-        textSize = getSingleLineTextSize(text!!, textPaint, targetWidth, 0f, maxTextSize,
+        textSize = getSingleLineTextSize(text!!, paint, targetWidth, 0f, maxTextSize,
                 0.5f, resources.displayMetrics)
-        textPaint.textSize = textSize
+        paint.textSize = textSize
 
         // measuring text is fun :] see: https://chris.banes.me/2014/03/27/measuring-text/
-        cutoutX = (width - textPaint.measureText(text)) / 2
+        cutoutX = (width - paint.measureText(text)) / 2
         val textBounds = Rect()
-        textPaint.getTextBounds(text, 0, text!!.length, textBounds)
+        paint.getTextBounds(text, 0, text!!.length, textBounds)
         val textHeight = textBounds.height().toFloat()
         cutoutY = (height + textHeight) / 2
     }
@@ -146,15 +145,10 @@ class CutoutTextView @JvmOverloads constructor(
         paint.textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, mid, metrics)
         val maxLineWidth = paint.measureText(text)
 
-        if (high - low < precision) {
-            return low
-        } else if (maxLineWidth > targetWidth) {
-            return getSingleLineTextSize(text, paint, targetWidth, low, mid, precision, metrics)
-        } else if (maxLineWidth < targetWidth) {
-            return getSingleLineTextSize(text, paint, targetWidth, mid, high, precision, metrics)
-        } else {
-            return mid
-        }
+        return if (high - low < precision) low
+        else if (maxLineWidth > targetWidth) getSingleLineTextSize(text, paint, targetWidth, low, mid, precision, metrics)
+        else if (maxLineWidth < targetWidth) getSingleLineTextSize(text, paint, targetWidth, mid, high, precision, metrics)
+        else mid
     }
 
     private fun createBitmap() {
@@ -165,16 +159,16 @@ class CutoutTextView @JvmOverloads constructor(
         cutout!!.setHasAlpha(true)
         val cutoutCanvas = Canvas(cutout!!)
         cutoutCanvas.drawColor(foregroundColor)
+        paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
 
         when (cutoutType) {
             TYPE_TEXT -> {
                 // this is the magic – Clear mode punches out the bitmap
-                textPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
-                cutoutCanvas.drawText(text, cutoutX, cutoutY, textPaint)
+                paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
+                cutoutCanvas.drawText(text, cutoutX, cutoutY, paint)
             }
             TYPE_DRAWABLE -> {
-                bitmapPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
-                cutoutCanvas.drawBitmap(drawable!!.toBitmap(bitmapScaling), cutoutX, cutoutY, bitmapPaint)
+                cutoutCanvas.drawBitmap(drawable!!.toBitmap(bitmapScaling, Bitmap.Config.ALPHA_8), cutoutX, cutoutY, paint)
             }
 
         }
diff --git a/library/src/main/res/layout/kau_about_item_library.xml b/library/src/main/res/layout/kau_about_iitem_library.xml
index 0129512..0129512 100644
--- a/library/src/main/res/layout/kau_about_item_library.xml
+++ b/library/src/main/res/layout/kau_about_iitem_library.xml
diff --git a/library/src/main/res/layout/kau_about_section_main.xml b/library/src/main/res/layout/kau_about_section_main.xml
index aa338ee..40d8dfb 100644
--- a/library/src/main/res/layout/kau_about_section_main.xml
+++ b/library/src/main/res/layout/kau_about_section_main.xml
@@ -11,7 +11,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
 
-        <ca.allanwang.kau.views.CutoutTextView
+        <ca.allanwang.kau.views.CutoutView
             android:id="@+id/about_main_cutout"
             android:layout_width="0dp"
             android:layout_height="@dimen/kau_about_header_height"
diff --git a/library/src/main/res/layout/kau_iitem_card.xml b/library/src/main/res/layout/kau_iitem_card.xml
new file mode 100644
index 0000000..4967a2e
--- /dev/null
+++ b/library/src/main/res/layout/kau_iitem_card.xml
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+    Generic card with an imageview, title, description, and button
+  -->
+
+<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/kau_card_container"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginBottom="@dimen/kau_padding_normal"
+    android:foreground="?android:selectableItemBackground"
+    android:minHeight="?android:listPreferredItemHeight"
+    android:paddingBottom="@dimen/kau_padding_normal"
+    android:paddingEnd="@dimen/kau_padding_normal"
+    android:paddingTop="@dimen/kau_padding_normal">
+
+    <android.support.constraint.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <ImageView
+            android:id="@+id/kau_card_image"
+            android:layout_width="@dimen/kau_avatar_bounds"
+            android:layout_height="@dimen/kau_avatar_bounds"
+            android:layout_marginEnd="@dimen/kau_avatar_margin"
+            android:layout_marginStart="@dimen/kau_avatar_margin"
+            android:padding="@dimen/kau_avatar_padding"
+            android:visibility="gone"
+            android:scaleType="fitCenter"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/kau_card_title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@id/kau_card_image"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/kau_card_description"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@id/kau_card_image"
+            app:layout_constraintTop_toBottomOf="@id/kau_card_title" />
+
+        <LinearLayout
+            android:id="@+id/kau_card_bottom_row"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            android:visibility="gone"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@id/kau_card_image"
+            app:layout_constraintTop_toBottomOf="@id/kau_card_description">
+
+            <Button
+                android:id="@+id/kau_card_button"
+                style="?android:borderlessButtonStyle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="@dimen/kau_spacing_normal"
+                android:textColor="?attr/colorAccent" />
+
+        </LinearLayout>
+
+    </android.support.constraint.ConstraintLayout>
+
+</android.support.v7.widget.CardView>
diff --git a/library/src/main/res/layout/kau_iitem_cutout.xml b/library/src/main/res/layout/kau_iitem_cutout.xml
new file mode 100644
index 0000000..a4b17ac
--- /dev/null
+++ b/library/src/main/res/layout/kau_iitem_cutout.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ca.allanwang.kau.views.CutoutView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/kau_cutout"
+    android:layout_width="match_parent"
+    android:layout_height="@dimen/kau_about_header_height"
+    android:minHeight="@dimen/kau_about_header_height"
+    app:foregroundColor="?android:colorAccent"
+    app:heightPercentageToScreen="0.5" />
\ No newline at end of file
diff --git a/library/src/main/res/layout/kau_recycler_detached_background.xml b/library/src/main/res/layout/kau_recycler_detached_background.xml
new file mode 100644
index 0000000..7295d66
--- /dev/null
+++ b/library/src/main/res/layout/kau_recycler_detached_background.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <!-- we use a parallel view for the background rather than just setting a background on the
+         recycler view for a nicer return transition. i.e. we want the background to fade and the
+         list to slide out separately -->
+    <View
+        android:id="@+id/kau_recycler_detached_background"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="?android:colorBackground" />
+
+    <!--defaults to a LinearLayoutManager-->
+
+    <android.support.v7.widget.RecyclerView
+        android:id="@+id/kau_recycler_detached"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:clipToPadding="false"
+        android:paddingBottom="@dimen/kau_spacing_normal"
+        android:scrollbars="vertical"
+        app:layoutManager="android.support.v7.widget.LinearLayoutManager" />
+
+</FrameLayout>
diff --git a/library/src/main/res/layout/kau_search_item.xml b/library/src/main/res/layout/kau_search_iitem.xml
index efd7260..efd7260 100644
--- a/library/src/main/res/layout/kau_search_item.xml
+++ b/library/src/main/res/layout/kau_search_iitem.xml
diff --git a/library/src/main/res/transition/kau_about_enter.xml b/library/src/main/res/transition/kau_enter_slide_top.xml
index 0089b84..0089b84 100644
--- a/library/src/main/res/transition/kau_about_enter.xml
+++ b/library/src/main/res/transition/kau_enter_slide_top.xml
diff --git a/library/src/main/res/values/attr.xml b/library/src/main/res/values/attr.xml
index daeb5e3..49be8d9 100644
--- a/library/src/main/res/values/attr.xml
+++ b/library/src/main/res/values/attr.xml
@@ -29,9 +29,10 @@
         <attr name="dragElasticity" format="float" />
     </declare-styleable>
 
-    <declare-styleable name="CutoutTextView">
+    <declare-styleable name="CutoutView">
         <attr name="foregroundColor" format="color" />
         <attr name="android:text" />
+        <attr name="android:drawable" />
         <attr name="android:minHeight" />
         <attr name="heightPercentageToScreen" format="float" />
         <attr name="font"/>
diff --git a/library/src/main/res/values/dimens.xml b/library/src/main/res/values/dimens.xml
index d45643e..5bf6da4 100644
--- a/library/src/main/res/values/dimens.xml
+++ b/library/src/main/res/values/dimens.xml
@@ -28,5 +28,10 @@
 
     <dimen name="kau_about_header_height">224dp</dimen>
 
-
+    <!-- avatar should be a 40dp asset in a 48dp touch target & optically aligned with standard padding -->
+    <dimen name="kau_avatar_size">40dp</dimen>
+    <dimen name="kau_avatar_bounds">48dp</dimen>
+    <dimen name="kau_avatar_padding">4dp</dimen> <!-- (avatar_bounds - avatar_size) / 2 -->
+    <dimen name="kau_avatar_margin">12dp</dimen> <!-- padding_normal - avatar_padding -->
+    <dimen name="kau_avatar_ripple_radius">20dp</dimen> <!-- avatar_size / 2 -->
 </resources>
diff --git a/library/src/main/res/values/ids.xml b/library/src/main/res/values/ids.xml
index a21175a..fe0d411 100644
--- a/library/src/main/res/values/ids.xml
+++ b/library/src/main/res/values/ids.xml
@@ -8,6 +8,8 @@
     <item name="kau_item_pref_sub_item" type="id" />
     <item name="kau_item_pref_plain_text" type="id" />
     <item name="kau_item_search" type="id" />
+    <item name="kau_item_cutout" type="id" />
+    <item name="kau_item_card" type="id" />
     <item name="kau_item_about_library" type="id" />
     <item name="kau_item_about_main" type="id" />
 </resources>
\ No newline at end of file
diff --git a/library/src/main/res/values/styles.xml b/library/src/main/res/values/styles.xml
index 6f5e3c1..2067c6d 100644
--- a/library/src/main/res/values/styles.xml
+++ b/library/src/main/res/values/styles.xml
@@ -14,7 +14,7 @@
     </style>
 
     <style name="Kau.Translucent.About">
-        <item name="android:windowEnterTransition">@transition/kau_about_enter</item>
+        <item name="android:windowEnterTransition">@transition/kau_enter_slide_top</item>
         <item name="android:windowReturnTransition">@transition/kau_about_return_upwards</item>
     </style>
 
diff --git a/sample/src/main/kotlin/ca/allanwang/kau/sample/AboutActivity.kt b/sample/src/main/kotlin/ca/allanwang/kau/sample/AboutActivity.kt
index e97c530..5597819 100644
--- a/sample/src/main/kotlin/ca/allanwang/kau/sample/AboutActivity.kt
+++ b/sample/src/main/kotlin/ca/allanwang/kau/sample/AboutActivity.kt
@@ -5,6 +5,8 @@ import ca.allanwang.kau.about.AboutActivityBase
 /**
  * Created by Allan Wang on 2017-06-27.
  */
-class AboutActivity : AboutActivityBase(R.string::class.java) {
+class AboutActivity : AboutActivityBase(R.string::class.java, {
+    cutoutText = "KAU"
+}) {
 
 }
\ No newline at end of file