basic drawing functionality

app/src/main/java/chat/rocket/android/widget/CustomDrawView.kt

-package chat.rocket.android.widget
-
-import android.content.Context
-import android.graphics.*
-import android.util.AttributeSet
-import android.view.MotionEvent
-import android.view.View
-
-class CustomDrawView: View {
-
-    val strokeWidth = 4f
-    private var mX: Float = 0f
-    private var mY:Float = 0f
-    private lateinit var path: Path
-    private lateinit var paint: Paint
-    private val TOLERANCE = 5f
-    private lateinit var mBitmap: Bitmap
-    private lateinit var mCanvas: Canvas
-
-    fun init(){
-        path = Path()
-        paint = Paint()
-        paint.isAntiAlias = true
-        paint.color = Color.BLACK
-        paint.style = Paint.Style.STROKE
-        paint.strokeJoin = Paint.Join.ROUND
-        paint.strokeWidth = strokeWidth
-        this.isDrawingCacheEnabled = true
-    }
-    constructor(context: Context?) : super(context){ init() }
-    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs){ init() }
-    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr){ init() }
-
-    override fun onDraw(canvas: Canvas?) {
-        super.onDraw(canvas)
-
-        canvas?.drawPath(path,paint)
-    }
-
-    private fun startTouch(x: Float,y: Float){
-        path.moveTo(x,y)
-        mX = x
-        mY = y
-    }
-
-    private fun moveTouch(x: Float,y: Float){
-        val dx: Float = Math.abs(x-mX)
-        val dy: Float = Math.abs(y-mY)
-        if (dx >= TOLERANCE || dy >= TOLERANCE){
-            path.quadTo(mX,mY,(x+mX)/2,(y+mY)/2)
-            mX = x
-            mY = y
-        }
-    }
-
-    private fun upTouch(){
-        path.lineTo(mX,mY)
-    }
-
-    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
-        super.onSizeChanged(w, h, oldw, oldh)
-        mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
-        mCanvas = Canvas(mBitmap)
-    }
-
-    override fun onTouchEvent(event: MotionEvent?): Boolean {
-        val x: Float = event!!.x
-        val y: Float = event.y
-
-        when(event.action){
-            MotionEvent.ACTION_DOWN -> {
-                startTouch(x,y)
-                invalidate()
-            }
-            MotionEvent.ACTION_MOVE -> {
-                moveTouch(x,y)
-                invalidate()
-            }
-            MotionEvent.ACTION_UP -> {
-                upTouch()
-                invalidate()
-            }
-        }
-        return true
-    }
-
-    fun getBitmap(): Bitmap {
-        return this.drawingCache
-    }
-}
\ No newline at end of file

app/src/main/java/chat/rocket/android/widget/draw/Action.kt

+package chat.rocket.android.widget.draw
+
+import android.graphics.Path
+import java.io.Serializable
+import java.io.Writer
+
+interface Action : Serializable {
+    fun perform(path: Path)
+
+    fun perform(writer: Writer)
+}

app/src/main/java/chat/rocket/android/widget/draw/CustomDrawView.kt

+package chat.rocket.android.widget.draw
+
+import android.content.Context
+import android.graphics.*
+import android.util.AttributeSet
+import android.view.MotionEvent
+import android.view.View
+import java.util.*
+import android.support.v4.graphics.ColorUtils
+import android.support.annotation.ColorInt
+
+
+
+class CustomDrawView(context: Context, attrs: AttributeSet) : View(context, attrs) {
+    var mPaths = LinkedHashMap<MyPath, PaintOptions>()
+
+    private var mLastPaths = LinkedHashMap<MyPath, PaintOptions>()
+    private var mUndonePaths = LinkedHashMap<MyPath, PaintOptions>()
+
+    private var mPaint = Paint()
+    private var mPath = MyPath()
+    private var mPaintOptions = PaintOptions()
+
+    private var mCurX = 0f
+    private var mCurY = 0f
+    private var mStartX = 0f
+    private var mStartY = 0f
+    private var mIsSaving = false
+    private var mIsStrokeWidthBarEnabled = false
+
+    init {
+        mPaint.apply {
+            color = mPaintOptions.color
+            style = Paint.Style.STROKE
+            strokeJoin = Paint.Join.ROUND
+            strokeCap = Paint.Cap.ROUND
+            strokeWidth = mPaintOptions.strokeWidth
+            isAntiAlias = true
+        }
+    }
+
+    fun undo() {
+        if (mPaths.isEmpty() && mLastPaths.isNotEmpty()) {
+            mPaths = mLastPaths.clone() as LinkedHashMap<MyPath, PaintOptions>
+            mLastPaths.clear()
+            invalidate()
+            return
+        }
+        if (mPaths.isEmpty()) {
+            return
+        }
+        val lastPath = mPaths.values.lastOrNull()
+        val lastKey = mPaths.keys.lastOrNull()
+
+        mPaths.remove(lastKey)
+        if (lastPath != null && lastKey != null) {
+            mUndonePaths[lastKey] = lastPath
+        }
+        invalidate()
+    }
+
+    fun redo() {
+        if (mUndonePaths.keys.isEmpty()) {
+            return
+        }
+
+        val lastKey = mUndonePaths.keys.last()
+        addPath(lastKey, mUndonePaths.values.last())
+        mUndonePaths.remove(lastKey)
+        if (mUndonePaths.isEmpty()) {
+        }
+        invalidate()
+    }
+
+    fun setColor(newColor: Int) {
+        @ColorInt
+        val alphaColor = ColorUtils.setAlphaComponent(newColor, mPaintOptions.alpha)
+        mPaintOptions.color = alphaColor
+        if (mIsStrokeWidthBarEnabled) {
+            invalidate()
+        }
+    }
+
+    fun setAlpha(newAlpha: Int) {
+        val alpha = (newAlpha*255)/100
+        mPaintOptions.alpha = alpha
+        setColor(mPaintOptions.color)
+    }
+
+    fun setStrokeWidth(newStrokeWidth: Float) {
+        mPaintOptions.strokeWidth = newStrokeWidth
+        if (mIsStrokeWidthBarEnabled) {
+            invalidate()
+        }
+    }
+
+    fun getBitmap(): Bitmap {
+        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
+        val canvas = Canvas(bitmap)
+        canvas.drawColor(Color.WHITE)
+        mIsSaving = true
+        draw(canvas)
+        mIsSaving = false
+        return bitmap
+    }
+
+    fun addPath(path: MyPath, options: PaintOptions) {
+        mPaths[path] = options
+    }
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+
+        for ((key, value) in mPaths) {
+            changePaint(value)
+            canvas.drawPath(key, mPaint)
+        }
+
+        changePaint(mPaintOptions)
+        canvas.drawPath(mPath, mPaint)
+    }
+
+    private fun changePaint(paintOptions: PaintOptions) {
+        mPaint.color = paintOptions.color
+        mPaint.strokeWidth = paintOptions.strokeWidth
+    }
+
+    fun clearCanvas() {
+        mLastPaths = mPaths.clone() as LinkedHashMap<MyPath, PaintOptions>
+        mPath.reset()
+        mPaths.clear()
+        invalidate()
+    }
+
+    private fun actionDown(x: Float, y: Float) {
+        mPath.reset()
+        mPath.moveTo(x, y)
+        mCurX = x
+        mCurY = y
+    }
+
+    private fun actionMove(x: Float, y: Float) {
+        mPath.quadTo(mCurX, mCurY, (x + mCurX) / 2, (y + mCurY) / 2)
+        mCurX = x
+        mCurY = y
+    }
+
+    private fun actionUp() {
+        mPath.lineTo(mCurX, mCurY)
+
+        // draw a dot on click
+        if (mStartX == mCurX && mStartY == mCurY) {
+            mPath.lineTo(mCurX, mCurY + 2)
+            mPath.lineTo(mCurX + 1, mCurY + 2)
+            mPath.lineTo(mCurX + 1, mCurY)
+        }
+
+        mPaths.put(mPath, mPaintOptions)
+        mPath = MyPath()
+        mPaintOptions = PaintOptions(mPaintOptions.color, mPaintOptions.strokeWidth, mPaintOptions.alpha)
+    }
+
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+        val x = event.x
+        val y = event.y
+
+        when (event.action) {
+            MotionEvent.ACTION_DOWN -> {
+                mStartX = x
+                mStartY = y
+                actionDown(x, y)
+                mUndonePaths.clear()
+            }
+            MotionEvent.ACTION_MOVE -> actionMove(x, y)
+            MotionEvent.ACTION_UP -> actionUp()
+        }
+
+        invalidate()
+        return true
+    }
+}

app/src/main/java/chat/rocket/android/widget/draw/Line.kt

+package chat.rocket.android.widget.draw
+
+import android.graphics.Path
+import java.io.Writer
+import java.security.InvalidParameterException
+
+class Line : Action {
+
+    val x: Float
+    val y: Float
+
+    constructor(data: String) {
+        if (!data.startsWith("L"))
+            throw InvalidParameterException("The Line data should start with 'L'.")
+
+        try {
+            val xy = data.substring(1).split(",".toRegex()).dropLastWhile(String::isEmpty).toTypedArray()
+            x = xy[0].trim().toFloat()
+            y = xy[1].trim().toFloat()
+        } catch (ignored: Exception) {
+            throw InvalidParameterException("Error parsing the given Line data.")
+        }
+    }
+
+    constructor(x: Float, y: Float) {
+        this.x = x
+        this.y = y
+    }
+
+    override fun perform(path: Path) {
+        path.lineTo(x, y)
+    }
+
+    override fun perform(writer: Writer) {
+        writer.write("L$x,$y")
+    }
+}

app/src/main/java/chat/rocket/android/widget/draw/Move.kt

+package chat.rocket.android.widget.draw
+
+import android.graphics.Path
+import java.io.Writer
+import java.security.InvalidParameterException
+
+class Move : Action {
+
+    val x: Float
+    val y: Float
+
+    constructor(x: Float, y: Float) {
+        this.x = x
+        this.y = y
+    }
+
+    override fun perform(path: Path) {
+        path.moveTo(x, y)
+    }
+
+    override fun perform(writer: Writer) {
+        writer.write("M$x,$y")
+    }
+}

app/src/main/java/chat/rocket/android/widget/draw/MyPath.kt

+package chat.rocket.android.widget.draw
+
+import android.graphics.Path
+import java.io.ObjectInputStream
+import java.io.Serializable
+import java.util.*
+
+class MyPath : Path(), Serializable {
+    val actions = LinkedList<Action>()
+
+    private fun readObject(inputStream: ObjectInputStream) {
+        inputStream.defaultReadObject()
+
+        val copiedActions = actions.map { it }
+        copiedActions.forEach {
+            it.perform(this)
+        }
+    }
+
+    override fun reset() {
+        actions.clear()
+        super.reset()
+    }
+
+    override fun moveTo(x: Float, y: Float) {
+        actions.add(Move(x, y))
+        super.moveTo(x, y)
+    }
+
+    override fun lineTo(x: Float, y: Float) {
+        actions.add(Line(x, y))
+        super.lineTo(x, y)
+    }
+
+    override fun quadTo(x1: Float, y1: Float, x2: Float, y2: Float) {
+        actions.add(Quad(x1, y1, x2, y2))
+        super.quadTo(x1, y1, x2, y2)
+    }
+}

app/src/main/java/chat/rocket/android/widget/draw/PaintOptions.kt

+package chat.rocket.android.widget.draw
+
+import android.graphics.Color
+
+data class PaintOptions(var color: Int = Color.BLACK, var strokeWidth: Float = 8f, var alpha: Int = 255) {
+}

app/src/main/java/chat/rocket/android/widget/draw/Quad.kt

+package chat.rocket.android.widget.draw
+
+import android.graphics.Path
+import java.io.Writer
+
+class Quad : Action {
+
+    val x1: Float
+    val y1: Float
+    val x2: Float
+    val y2: Float
+
+    constructor(x1: Float, y1: Float, x2: Float, y2: Float) {
+        this.x1 = x1
+        this.y1 = y1
+        this.x2 = x2
+        this.y2 = y2
+    }
+
+    override fun perform(path: Path) {
+        path.quadTo(x1, y1, x2, y2)
+    }
+
+    override fun perform(writer: Writer) {
+        writer.write("Q$x1,$y1 $x2,$y2")
+    }
+}

app/src/main/res/drawable/circle_black.xml

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <solid android:color="@color/black" />
+    <corners android:radius="50dp" />
+
+</shape>
\ No newline at end of file

app/src/main/res/drawable/circle_blue.xml

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <solid android:color="@color/color_blue" />
+    <corners android:radius="50dp" />
+
+</shape>
\ No newline at end of file

app/src/main/res/drawable/circle_brown.xml

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <solid android:color="@color/color_brown" />
+    <corners android:radius="50dp" />
+
+</shape>
\ No newline at end of file

app/src/main/res/drawable/circle_green.xml

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <solid android:color="@color/color_green" />
+    <corners android:radius="50dp" />
+
+</shape>
\ No newline at end of file

app/src/main/res/drawable/circle_pink.xml

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <solid android:color="@color/color_pink" />
+    <corners android:radius="50dp" />
+
+</shape>
\ No newline at end of file

app/src/main/res/drawable/circle_red.xml

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <solid android:color="@color/color_red" />
+    <corners android:radius="50dp" />
+
+</shape>
\ No newline at end of file

app/src/main/res/drawable/circle_yellow.xml

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+
+    <solid android:color="@color/color_yellow" />
+    <corners android:radius="50dp" />
+
+</shape>
\ No newline at end of file

app/src/main/res/drawable/ic_adjust_black_24dp.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M12,2C6.49,2 2,6.49 2,12s4.49,10 10,10 10,-4.49 10,-10S17.51,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM15,12c0,1.66 -1.34,3 -3,3s-3,-1.34 -3,-3 1.34,-3 3,-3 3,1.34 3,3z"/>
+</vector>

app/src/main/res/drawable/ic_color_lens_black_24dp.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M12,3c-4.97,0 -9,4.03 -9,9s4.03,9 9,9c0.83,0 1.5,-0.67 1.5,-1.5 0,-0.39 -0.15,-0.74 -0.39,-1.01 -0.23,-0.26 -0.38,-0.61 -0.38,-0.99 0,-0.83 0.67,-1.5 1.5,-1.5L16,16c2.76,0 5,-2.24 5,-5 0,-4.42 -4.03,-8 -9,-8zM6.5,12c-0.83,0 -1.5,-0.67 -1.5,-1.5S5.67,9 6.5,9 8,9.67 8,10.5 7.33,12 6.5,12zM9.5,8C8.67,8 8,7.33 8,6.5S8.67,5 9.5,5s1.5,0.67 1.5,1.5S10.33,8 9.5,8zM14.5,8c-0.83,0 -1.5,-0.67 -1.5,-1.5S13.67,5 14.5,5s1.5,0.67 1.5,1.5S15.33,8 14.5,8zM17.5,12c-0.83,0 -1.5,-0.67 -1.5,-1.5S16.67,9 17.5,9s1.5,0.67 1.5,1.5 -0.67,1.5 -1.5,1.5z"/>
+</vector>

app/src/main/res/drawable/ic_eraser_black_24dp.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M15.14,3C14.63,3 14.12,3.2 13.73,3.59L2.59,14.73C1.81,15.5 1.81,16.77 2.59,17.56L5.03,20H12.69L21.41,11.27C22.2,10.5 22.2,9.23 21.41,8.44L16.56,3.59C16.17,3.2 15.65,3 15.14,3M17,18L15,20H22V18"/>
+</vector>

app/src/main/res/drawable/ic_opacity_black_24dp.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M17.66,8L12,2.35 6.34,8C4.78,9.56 4,11.64 4,13.64s0.78,4.11 2.34,5.67 3.61,2.35 5.66,2.35 4.1,-0.79 5.66,-2.35S20,15.64 20,13.64 19.22,9.56 17.66,8zM6,14c0.01,-2 0.62,-3.27 1.76,-4.4L12,5.27l4.24,4.38C17.38,10.77 17.99,12 18,14H6z"/>
+</vector>

app/src/main/res/drawable/ic_redo_black_24dp.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M18.4,10.6C16.55,8.99 14.15,8 11.5,8c-4.65,0 -8.58,3.03 -9.96,7.22L3.9,16c1.05,-3.19 4.05,-5.5 7.6,-5.5 1.95,0 3.73,0.72 5.12,1.88L13,16h9V7l-3.6,3.6z"/>
+</vector>

app/src/main/res/drawable/ic_undo_black_24dp.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24.0"
+        android:viewportHeight="24.0">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M12.5,8c-2.65,0 -5.05,0.99 -6.9,2.6L2,7v9h9l-3.62,-3.62c1.39,-1.16 3.16,-1.88 5.12,-1.88 3.54,0 6.55,2.31 7.6,5.5l2.37,-0.78C21.08,11.03 17.15,8 12.5,8z"/>
+</vector>

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

+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="56dp"
+    android:orientation="horizontal">
+
+    <ImageView
+        android:id="@+id/image_color_black"
+        android:layout_width="48dp"
+        android:layout_height="match_parent"
+        android:src="@drawable/circle_black"
+        android:paddingTop="16dp"
+        android:paddingBottom="16dp"
+        android:paddingStart="12dp"
+        android:paddingEnd="12dp"
+        android:scaleY="1.5"
+        android:scaleX="1.5"/>
+
+    <ImageView
+        android:id="@+id/image_color_red"
+        android:layout_width="48dp"
+        android:layout_height="match_parent"
+        android:src="@drawable/circle_red"
+        android:paddingTop="16dp"
+        android:paddingBottom="16dp"
+        android:paddingStart="12dp"
+        android:paddingEnd="12dp" />
+
+    <ImageView
+        android:id="@+id/image_color_yellow"
+        android:layout_width="48dp"
+        android:layout_height="match_parent"
+        android:src="@drawable/circle_yellow"
+        android:paddingTop="16dp"
+        android:paddingBottom="16dp"
+        android:paddingStart="12dp"
+        android:paddingEnd="12dp" />
+
+    <ImageView
+        android:id="@+id/image_color_green"
+        android:layout_width="48dp"
+        android:layout_height="match_parent"
+        android:src="@drawable/circle_green"
+        android:paddingTop="16dp"
+        android:paddingBottom="16dp"
+        android:paddingStart="12dp"
+        android:paddingEnd="12dp" />
+
+    <ImageView
+        android:id="@+id/image_color_blue"
+        android:layout_width="48dp"
+        android:layout_height="match_parent"
+        android:src="@drawable/circle_blue"
+        android:paddingTop="16dp"
+        android:paddingBottom="16dp"
+        android:paddingStart="12dp"
+        android:paddingEnd="12dp" />
+
+    <ImageView
+        android:id="@+id/image_color_pink"
+        android:layout_width="48dp"
+        android:layout_height="match_parent"
+        android:src="@drawable/circle_pink"
+        android:paddingTop="16dp"
+        android:paddingBottom="16dp"
+        android:paddingStart="12dp"
+        android:paddingEnd="12dp" />
+
+    <ImageView
+        android:id="@+id/image_color_brown"
+        android:layout_width="48dp"
+        android:layout_height="match_parent"
+        android:src="@drawable/circle_brown"
+        android:paddingTop="16dp"
+        android:paddingBottom="16dp"
+        android:paddingStart="12dp"
+        android:paddingEnd="12dp" />
+</LinearLayout>
\ No newline at end of file

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

@@ -5,7 +5,7 @@
     android:background="@color/white"
     xmlns:app="http://schemas.android.com/apk/res-auto">
 
-    <chat.rocket.android.widget.CustomDrawView
+    <chat.rocket.android.widget.draw.CustomDrawView
         android:id="@+id/custom_draw_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
@@ -33,4 +33,125 @@
         android:background="@color/white"
         android:foreground="?selectableItemBackground" />
 
+    <android.support.constraint.ConstraintLayout
+        android:id="@+id/draw_tools"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        android:background="@color/white"
+        android:elevation="4dp"
+        android:translationY="56dp" >
+
+        <ImageView
+            android:id="@+id/image_draw_eraser"
+            android:layout_width="56dp"
+            android:layout_height="56dp"
+            android:src="@drawable/ic_eraser_black_24dp"
+            android:padding="16dp"
+            android:tint="@color/darkGray"
+            android:foreground="?selectableItemBackground"
+            app:layout_constraintHorizontal_chainStyle="packed"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toStartOf="@id/image_draw_width"
+            app:layout_constraintTop_toTopOf="parent"/>
+
+        <ImageView
+            android:id="@+id/image_draw_width"
+            android:layout_width="56dp"
+            android:layout_height="56dp"
+            android:src="@drawable/ic_adjust_black_24dp"
+            android:padding="16dp"
+            android:tint="@color/darkGray"
+            android:foreground="?selectableItemBackground"
+            app:layout_constraintStart_toEndOf="@id/image_draw_eraser"
+            app:layout_constraintEnd_toStartOf="@id/image_draw_color"
+            app:layout_constraintTop_toTopOf="parent"/>
+
+        <ImageView
+            android:id="@+id/image_draw_color"
+            android:layout_width="56dp"
+            android:layout_height="56dp"
+            android:src="@drawable/ic_color_lens_black_24dp"
+            android:padding="16dp"
+            android:tint="@color/darkGray"
+            android:foreground="?selectableItemBackground"
+            app:layout_constraintStart_toEndOf="@id/image_draw_width"
+            app:layout_constraintEnd_toStartOf="@id/image_draw_opacity"
+            app:layout_constraintTop_toTopOf="parent"/>
+
+        <ImageView
+            android:id="@+id/image_draw_opacity"
+            android:layout_width="56dp"
+            android:layout_height="56dp"
+            android:src="@drawable/ic_opacity_black_24dp"
+            android:padding="16dp"
+            android:tint="@color/darkGray"
+            android:foreground="?selectableItemBackground"
+            app:layout_constraintStart_toEndOf="@id/image_draw_color"
+            app:layout_constraintEnd_toStartOf="@id/image_draw_undo"
+            app:layout_constraintTop_toTopOf="parent"/>
+
+        <ImageView
+            android:id="@+id/image_draw_undo"
+            android:layout_width="56dp"
+            android:layout_height="56dp"
+            android:src="@drawable/ic_undo_black_24dp"
+            android:padding="16dp"
+            android:tint="@color/darkGray"
+            android:foreground="?selectableItemBackground"
+            app:layout_constraintStart_toEndOf="@id/image_draw_opacity"
+            app:layout_constraintEnd_toStartOf="@id/image_draw_redo"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <ImageView
+            android:id="@+id/image_draw_redo"
+            android:layout_width="56dp"
+            android:layout_height="56dp"
+            android:src="@drawable/ic_redo_black_24dp"
+            android:padding="16dp"
+            android:tint="@color/darkGray"
+            android:foreground="?selectableItemBackground"
+            app:layout_constraintStart_toEndOf="@id/image_draw_undo"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <SeekBar
+            android:id="@+id/seekBar_width"
+            android:layout_width="0dp"
+            android:layout_height="56dp"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/image_draw_eraser"
+            android:progressTint="@color/colorAccent"
+            android:thumbTint="@color/colorAccent"
+            android:progress="8"
+            android:paddingStart="16dp"
+            android:paddingEnd="16dp" />
+        
+        <SeekBar
+            android:id="@+id/seekBar_opacity"
+            android:layout_width="0dp"
+            android:layout_height="56dp"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/image_draw_eraser"
+            android:progress="100"
+            android:progressTint="@color/colorAccent"
+            android:thumbTint="@color/colorAccent"
+            android:paddingStart="16dp"
+            android:paddingEnd="16dp" />
+
+        <include
+            android:id="@+id/draw_color_palette"
+            layout="@layout/color_palette_view"
+            android:layout_width="0dp"
+            android:layout_height="56dp"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/image_draw_eraser" />
+
+    </android.support.constraint.ConstraintLayout>
+
 </android.support.constraint.ConstraintLayout>
\ No newline at end of file

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

@@ -130,14 +130,4 @@
         tools:text="connected"
         tools:visibility="visible" />
 
-    <ImageView
-        android:id="@+id/dummy_image"
-        android:layout_width="100dp"
-        android:layout_height="100dp"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        android:minHeight="100dp"
-        android:minWidth="100dp"
-        android:background="@color/white"/>
-
 </android.support.constraint.ConstraintLayout>
\ No newline at end of file

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

@@ -49,4 +49,12 @@
 
     <!-- Default Background Color -->
     <color name="default_background">#FAFAFA</color>
+
+    <!--Color Palettes-->
+    <color name="color_red">#FF5252</color>
+    <color name="color_yellow">#FFEB3B</color>
+    <color name="color_green">#00C853</color>
+    <color name="color_blue">#00B0FF</color>
+    <color name="color_pink">#D500F9</color>
+    <color name="color_brown">#8D6E63</color>
 </resources>

dependencies.gradle

@@ -10,7 +10,7 @@ ext {
 
             // Main dependencies
             support               : '27.1.0',
-            constraintLayout      : '1.0.2',
+            constraintLayout      : '1.1.0',
             androidKtx            : '0.3',
             dagger                : '2.14.1',
             exoPlayer             : '2.6.0',