seekbarを使い画像の色を調整できるようにしたい

前提・実現したいこと

発生している問題・エラーメッセージ

まず、背景の色を変えるseekbarと
画像の色を変えるcolorFilterを実装してみましたが、
それらをどう組み合わせていけばよいのかがわかっておりません。

該当のソースコード

MainActivity
1import android.content.Context
2import android.graphics.*
3import android.graphics.drawable.BitmapDrawable
4import android.graphics.drawable.Drawable
5import android.os.Build
6import android.os.Bundle
7import android.widget.SeekBar
8import androidx.appcompat.app.AppCompatActivity
9import androidx.core.graphics.ColorUtils
10import kotlinx.android.synthetic.main.activity_main.*
11
12
13class MainActivity : AppCompatActivity() {
14
15    override fun onCreate(savedInstanceState: Bundle?) {
16        super.onCreate(savedInstanceState)
17        setContentView(R.layout.activity_main)
18
19        // set original bitmap to first image view
20        BitmapFactory.decodeResource(resources,R.drawable.img_2)?.apply {
21            imageView.setImageBitmap(this)
22        }
23
24        // set color filtered bitmap to second image view
25        colorFilterBitmap()?.apply {
26            imageView2.setImageBitmap(this)
27
28            seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
29                override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
30                    val startColor = Color.RED
31                    val endColor = Color.BLUE
32                    val ratio = progress.toFloat() / seekBar.max.toFloat()
33                    val blended = ColorUtils.blendARGB(startColor, endColor, ratio)
34                    seekBar.setBackgroundColor(blended)
35                }
36
37                override fun onStartTrackingTouch(seekBar: SeekBar?) {
38
39                }
40
41                override fun onStopTrackingTouch(seekBar: SeekBar?) {
42
43                }
44            })
45        }
46    }
47}
48
49
50// method to color filter bitmap
51fun Context.colorFilterBitmap():Bitmap?{
52    val bitmap:Bitmap? = BitmapFactory.decodeResource(resources,R.drawable.img_2)
53    bitmap?.apply {
54        BitmapDrawable(resources,this).apply {
55            mutate()
56
57            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q){
58                colorFilter = BlendModeColorFilter(
59                    Color.parseColor("#FBEC5D"),
60                    BlendMode.MULTIPLY
61                )
62            }else{
63                setColorFilter(
64                    Color.parseColor("#CF54AB"),
65                    PorterDuff.Mode.MULTIPLY
66                )
67            }
68            return convertToBitmap(this)
69        }
70    }
71    return null
72}
73
74
75// method to convert drawable to bitmap
76fun convertToBitmap(drawable: Drawable): Bitmap? {
77    val mutableBitmap:Bitmap? = Bitmap.createBitmap(
78        drawable.intrinsicWidth,
79        drawable.intrinsicHeight,
80        Bitmap.Config.ARGB_8888
81    )
82    mutableBitmap?.apply {
83        val canvas = Canvas(this)
84        drawable.setBounds(
85            0,
86            0,
87            drawable.intrinsicWidth,
88            drawable.intrinsicHeight
89        )
90        drawable.draw(canvas)
91        return this
92    }
93    return null
94}

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    xmlns:tools="http://schemas.android.com/tools"
6    android:id="@+id/constraintLayout"
7    android:layout_width="match_parent"
8    android:layout_height="match_parent"
9    tools:context=".MainActivity">
10
11    <ImageView
12        android:id="@+id/imageView"
13        android:layout_width="0dp"
14        android:layout_height="250dp"
15        android:layout_marginTop="8dp"
16        app:layout_constraintEnd_toEndOf="parent"
17        app:layout_constraintStart_toStartOf="parent"
18        app:layout_constraintTop_toTopOf="parent"
19        tools:srcCompat="@tools:sample/avatars" />
20
21    <TextView
22        android:id="@+id/textView"
23        android:layout_width="wrap_content"
24        android:layout_height="wrap_content"
25        android:layout_marginTop="8dp"
26        android:text="Original Bitmap"
27        app:layout_constraintEnd_toEndOf="parent"
28        app:layout_constraintStart_toStartOf="@+id/imageView"
29        app:layout_constraintTop_toBottomOf="@+id/imageView" />
30
31    <ImageView
32        android:id="@+id/imageView2"
33        android:layout_width="0dp"
34        android:layout_height="250dp"
35        android:layout_marginTop="24dp"
36        app:layout_constraintEnd_toEndOf="parent"
37        app:layout_constraintStart_toStartOf="parent"
38        app:layout_constraintTop_toBottomOf="@+id/textView"
39        tools:srcCompat="@tools:sample/avatars" />
40
41    <TextView
42        android:id="@+id/textView2"
43        android:layout_width="wrap_content"
44        android:layout_height="wrap_content"
45        android:layout_marginTop="8dp"
46        android:text="Color Filtered Bitmap"
47        app:layout_constraintEnd_toEndOf="@+id/imageView2"
48        app:layout_constraintHorizontal_bias="0.501"
49        app:layout_constraintStart_toStartOf="@+id/imageView2"
50        app:layout_constraintTop_toBottomOf="@+id/imageView2" />
51
52    <SeekBar
53        android:id="@+id/seekBar"
54        android:layout_width="match_parent"
55        android:layout_height="wrap_content"
56        android:max="255"
57        app:layout_constraintBottom_toBottomOf="parent"
58        app:layout_constraintLeft_toLeftOf="parent"
59        app:layout_constraintRight_toRightOf="parent"
60        app:layout_constraintTop_toTopOf="parent" />
61
62</androidx.constraintlayout.widget.ConstraintLayout>
63

試したこと

colorFilterがあるonCreateにseekbarも入れればよいかと思い試してみましたが、
setBackgroundColorとしているためか、やはりうまくいきませんでした。
これを画像と結び付けるにはどうしたらよいかご教示お願いします。
画像はdrawbleに入っております。

行動規範の内容に同意します

回答1件

自己解決

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

        seekR.max = 255
        seekG.max = 255
        seekB.max = 255
        var renkR: Int = seekR.progress
        var renkG: Int = seekG.progress
        var renkB: Int = seekB.progress

        val imageView = findViewById<ImageView>(R.id.imageView)
        imageView.setColorFilter(Color.rgb(renkR, renkG, renkB))

        seekR.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(p0: SeekBar?, proggres: Int, p2: Boolean) {
                renkR = proggres
                imageView.setColorFilter(Color.rgb(renkR, renkG, renkB))
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {

            }

            override fun onStopTrackingTouch(p0: SeekBar?) {

            }
        })

        seekG.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(p0: SeekBar?, proggres: Int, p2: Boolean) {
                renkG = proggres
                imageView.setColorFilter(Color.rgb(renkR, renkG, renkB))

            }

            override fun onStartTrackingTouch(p0: SeekBar?) {

            }

            override fun onStopTrackingTouch(p0: SeekBar?) {

            }
        })

        seekB.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(p0: SeekBar?, proggres: Int, p2: Boolean) {
                renkB = proggres
                imageView.setColorFilter(Color.rgb(renkR, renkG, renkB))

            }

            override fun onStartTrackingTouch(p0: SeekBar?) {

            }

            override fun onStopTrackingTouch(p0: SeekBar?) {

            }
        })
    }
}

ほとんど原型はありませんが、seekBarとimageviewをcolorFilterで結びつける？イメージで考えていったらできました。

投稿2020/06/26 08:02

yu9718s

総合スコア9