Android Studio (Kotlin), Painting app - When I change thickness of paint, it changes the thickness of the paint I've already drew

Question

I'm currently creating an app that has a whiteboard/sketching functionality, and when I change the thickness of the paint/pen I'm using, it changes the thickness of the paint already on the board, which I don't want. I only want it to change the the thickness of the paint that is about to be used.

Hope someone could help me situation here!

Here is some of my code:

This is the whiteboard app code. Ignore the dialog, sharedPreferences, and that stuff, since I've been fiddling around. I'm new to Android Studio.

package com.example.savedtrial

import android.app.Dialog
import android.content.Context
import android.content.Intent
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.graphics.drawable.ColorDrawable
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Window
import android.widget.ImageButton
import android.widget.ImageView
import android.widget.SeekBar
import android.widget.Toast
import androidx.core.content.withStyledAttributes
import com.example.savedtrial.PaintView.Companion.colorList
import com.example.savedtrial.PaintView.Companion.currentBrush
import com.example.savedtrial.PaintView.Companion.pathList
import kotlinx.coroutines.processNextEventInCurrentThread
import kotlin.math.nextTowards

class Collab : AppCompatActivity() {

    companion object{
        var path = Path()
        var paintBrush = Paint()


    }




    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_collab)

        val actionBar = supportActionBar

        actionBar!!.title = "Whiteboard"

        actionBar.setDisplayHomeAsUpEnabled(true)

        saveData()


        val redBtn = findViewById<ImageButton>(R.id.redColour)
        val blackBtn = findViewById<ImageButton>(R.id.blackColour)
        val eraser = findViewById<ImageView>(R.id.eraser)
        val colourPicker = findViewById<ImageView>(R.id.colourPicker)
        val clearBoard = findViewById<ImageView>(R.id.clearBoard)
        val sharedPref = getSharedPreferences("myPref", Context.MODE_PRIVATE)
        val editor = sharedPref.edit()


        redBtn.setOnClickListener{
            Toast.makeText(this, "Red Colour Chosen", Toast.LENGTH_SHORT).show()
            paintBrush.color = Color.RED
            currentColor(paintBrush.color)
        }

            eraser.setOnClickListener{
            Toast.makeText(this, "Eraser Chosen", Toast.LENGTH_SHORT).show()
            paintBrush.color = Color.WHITE
            currentColor(paintBrush.color)

            }




        val thicknessSeekbar = findViewById<SeekBar>(R.id.thicknessSeekbar)

        thicknessSeekbar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{


            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                paintBrush.strokeWidth = progress.toFloat()
                saveData()



            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {

            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                saveData()


            }


        })








        colourPicker.setOnClickListener{
            loadData()
            val intent = Intent(this, ColourPicker::class.java)
            startActivity(intent)
            loadData()
            //Leads to activity where you can pick from a wider variety of colours

        }

        blackBtn.setOnClickListener{

            Toast.makeText(this, "Black Colour Chosen", Toast.LENGTH_SHORT).show()
            paintBrush.color = Color.BLACK
            currentColor(paintBrush.color)

        }

        clearBoard.setOnClickListener {
            Toast.makeText(this, "Board Cleared", Toast.LENGTH_SHORT).show()
            pathList.clear()
            colorList.clear()
            path.reset()
        }













    }

    private fun showCustomDialogBox() {

        val dialog = Dialog(this)
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
        dialog.setCancelable(false)
        dialog.setContentView(R.layout.pick_a_colour_attempt_popup)
        dialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

    }


    private fun currentColor(color: Int){
        currentBrush = color
        path = Path()
    }


    private fun saveData(){
        val strokePref = paintBrush.strokeWidth.toFloat()
        //redBtn.Button = strokePref
        //blackBtn = strokePref


        val sharedPreferences = getSharedPreferences("sharedPrefs", Context.MODE_PRIVATE)
        val editor = sharedPreferences.edit()
        editor.apply {
            putFloat("STROKE_PREF", strokePref)
        }.apply()
    }


    private fun loadData() {
        val sharedPreferences = getSharedPreferences("sharedPrefs", MODE_PRIVATE)
        val savedFloat = sharedPreferences.getFloat("STROKE_PREF", 8f)

        paintBrush.strokeWidth = savedFloat


    }

}

This is the layout for the whiteboard app:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".Collab">

    <LinearLayout
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@drawable/toolbar_background"
        android:gravity="center"
        tools:ignore="MissingConstraints">

        <ImageButton
            android:id="@+id/blackColour"
            android:layout_width="50dp"
            android:layout_margin="10dp"
            android:layout_height="50dp"
            android:background="@drawable/black_background"
            android:contentDescription="Black"/>

        <ImageButton
            android:id="@+id/redColour"
            android:layout_width="50dp"
            android:layout_margin="10dp"
            android:layout_height="50dp"
            android:background="@drawable/red_background"
            android:contentDescription="Red"/>

        <ImageView
            android:id="@+id/colourPicker"
            android:layout_width="50dp"
            android:layout_margin="10dp"
            android:layout_height="50dp"
            android:src="@drawable/img_2"/>

        <ImageView
            android:id="@+id/eraser"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="30dp"
            app:srcCompat="@drawable/eraser_useless" />

        <ImageView
            android:id="@+id/clearBoard"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/img_5"
            android:layout_marginLeft="10dp"/>


    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"
        tools:ignore="UnknownId">

        <include layout="@layout/paint_view"/>


    </RelativeLayout>

    <SeekBar
        android:id="@+id/thicknessSeekbar"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_below="@+id/toolbar"
        android:layout_marginTop="20dp"
        android:backgroundTint="@color/darkRED"
        android:background="@drawable/toolbar_background"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="50dp"/>

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/draw"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="5dp"
        android:layout_below="@+id/toolbar"/>


</RelativeLayout>

Here is an activity called 'PaintView'. I'm pretty sure that this is the actual whiteboard (Canvas to draw on)

package com.example.savedtrial

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import com.example.savedtrial.Collab.Companion.paintBrush
import com.example.savedtrial.Collab.Companion.path

class PaintView: View {

    var params : ViewGroup.LayoutParams? = null

    companion object{
        var pathList = ArrayList<Path>()
        var colorList = ArrayList<Int>()
        var currentBrush = Color.BLACK;
        var oldPaint = paintBrush
    }

    constructor(context: Context) : this(context, null){
        init()
    }
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0){
        init()
    }

    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        init()
    }



    private fun init(){
        paintBrush.isAntiAlias = true
        paintBrush.color = currentBrush
        paintBrush.style = Paint.Style.STROKE
        paintBrush.strokeJoin = Paint.Join.ROUND
        if (paintBrush.strokeWidth == 8f) {
            true
        } else {
            true
        }

        params = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)

    }

    override fun onTouchEvent(event: MotionEvent?): Boolean {
        var x = event!!.x
        var y = event.y

        when(event.action){
            MotionEvent.ACTION_DOWN -> {
                path.moveTo(x,y)
                return true
            }
            MotionEvent.ACTION_MOVE ->{
                path.lineTo(x,y)
                pathList.add(path)
                colorList.add(currentBrush)
            }
            else -> return false
        }
        postInvalidate()
        return false

    }

    override fun onDraw(canvas: Canvas) {

        for(i in pathList.indices){
            paintBrush.setColor(colorList[i])
            canvas.drawPath(pathList[i], paintBrush)
            drawableStateChanged()
            invalidate()
        }

    }




}

This is the layout for it:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.savedtrial.PaintView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

This is the code for another activity called 'ColourPicker', which is basically an activity where you can pick from more colours, rather than the two shown on the main whiteboard page.

package com.example.savedtrial

import android.content.Intent
import android.graphics.Color
import android.graphics.Path
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageButton
import android.widget.Toast
import com.example.savedtrial.PaintView.Companion.currentBrush

class ColourPicker : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_colour_picker)

        val actionBar = supportActionBar

        actionBar!!.title = "Colour Palette"

        actionBar.setDisplayHomeAsUpEnabled(true)

        val lightRed: ImageButton = findViewById(R.id.lightRed)
        val darkRed: ImageButton = findViewById(R.id.darkRed)
        val orange: ImageButton = findViewById(R.id.orange)
        val darkOrange: ImageButton = findViewById(R.id.darkOrange)
        val fluroYellow: ImageButton = findViewById(R.id.fluroYellow)
        val yellow: ImageButton = findViewById(R.id.yellow)
        val gold: ImageButton = findViewById(R.id.gold)
        val lightGreen: ImageButton = findViewById(R.id.lightGreen)
        val mediumGreen: ImageButton = findViewById(R.id.mediumGreen)
        val darkGreen: ImageButton = findViewById(R.id.darkGreen)
        val aqua: ImageButton = findViewById(R.id.aqua)
        val lightBlue: ImageButton = findViewById(R.id.lightBlue)
        val mediumBlue: ImageButton = findViewById(R.id.mediumBlue)
        val darkBlue: ImageButton = findViewById(R.id.darkBlue)
        val navyBlue: ImageButton = findViewById(R.id.navyBlue)
        val purple: ImageButton = findViewById(R.id.purple)
        val lavender: ImageButton = findViewById(R.id.lavender)
        val lightPink: ImageButton = findViewById(R.id.lightPink)
        val darkPink: ImageButton = findViewById(R.id.darkPink)
        val gray: ImageButton = findViewById(R.id.gray)
        val brown: ImageButton = findViewById(R.id.brown)
        val darkBrown: ImageButton = findViewById(R.id.darkBrown)
        val maroon: ImageButton = findViewById(R.id.maroon)
        val black: ImageButton = findViewById(R.id.black)

        lightRed.setOnClickListener{
            Toast.makeText(this, "Light Red Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.RED
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        darkRed.setOnClickListener{
            Toast.makeText(this, "Dark Red Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(217, 33, 33)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        orange.setOnClickListener{
            Toast.makeText(this, "Orange Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(255, 80, 0)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        darkOrange.setOnClickListener{
            Toast.makeText(this, "Dark Orange Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(189, 61, 4)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        fluroYellow.setOnClickListener{
            Toast.makeText(this, "Fluorescent Yellow Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(204, 255, 0)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        yellow.setOnClickListener{
            Toast.makeText(this, "Yellow Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(255, 247, 0)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        gold.setOnClickListener{
            Toast.makeText(this, "Gold Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(212, 175, 55)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        lightGreen.setOnClickListener{
            Toast.makeText(this, "Light Green Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(28, 255, 0)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        mediumGreen.setOnClickListener{
            Toast.makeText(this, "Medium Green Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(20, 162, 2)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        darkGreen.setOnClickListener{
            Toast.makeText(this, "Dark Green Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(10, 94, 0)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        aqua.setOnClickListener{
            Toast.makeText(this, "Aqua Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(0, 255, 242)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        lightBlue.setOnClickListener{
            Toast.makeText(this, "Light Blue Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(0, 198, 255)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        mediumBlue.setOnClickListener{
            Toast.makeText(this, "Medium Blue Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(0, 135, 255)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        darkBlue.setOnClickListener{
            Toast.makeText(this, "Dark Blue Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(0, 46, 255)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        purple.setOnClickListener{
            Toast.makeText(this, "Purple Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(116, 0, 255)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        lavender.setOnClickListener{
            Toast.makeText(this, "Lavender Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(200, 35, 232)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

       lightPink.setOnClickListener{
            Toast.makeText(this, "Bright Pink Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(255, 110, 243)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        darkPink.setOnClickListener{
            Toast.makeText(this, "Magenta Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(255, 2, 205)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        gray.setOnClickListener{
            Toast.makeText(this, "Gray Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(102, 90, 101)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        maroon.setOnClickListener{
            Toast.makeText(this, "Maroon Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(128, 0, 0)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        black.setOnClickListener{
            Toast.makeText(this, "Black Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.BLACK
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        darkBrown.setOnClickListener{
            Toast.makeText(this, "Dark Brown Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(67, 23, 0)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        brown.setOnClickListener{
            Toast.makeText(this, "Brown Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(137, 47, 0)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }

        navyBlue.setOnClickListener{
            Toast.makeText(this, "Navy Blue Colour Chosen", Toast.LENGTH_SHORT).show()
            Collab.paintBrush.color = Color.rgb(0, 0, 51)
            currentColor(Collab.paintBrush.color)
            val intent = Intent(this, Collab::class.java)
            startActivity(intent)
        }




    }

    private fun currentColor(color: Int){
        currentBrush = color
        Collab.path = Path()
    }
}

The layout for 'ColourPicker', is very long, with a lot of repetition for every button, so I won't paste it here, due to character restraints.

Really hope someone can help me. Thanks a lot!

Answer 1

I'm also new, so I can not comment on a post yet, but it would really help if someone could answer this question. I only joined stack overflow so this post could obtain a greater level of attention.

But maybe, once paint is drawn on the board, it needs to be automatically put into a new class/database. Then, you only change the thickness of the original paint (paintBrush).