Whilst browsing through the various examples online with the new ConstraintLayout 2.0, I stumbled upon ImageFilterView. This got my attention immediately and I decided to investigate further.
An ImageFilterView allows you to perform some common image filtering techniques on an ImageView, including saturation, contrast, warmth and crossfade.
If you have tried to implement these image filters before, you may have run into ColorMatrix. If you look at the source of ImageFilterView you will see that these methods have just been nicely wrapped up with simpler API usage.
For example, if you would like to adjust the warmth, contrast or saturation, all you need to do is set a property on the ImageFilterView:
<androidx.constraintlayout.utils.widget.ImageFilterView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/imageView"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:warmth="1.2"
app:contrast="1.0"
app:saturation="2.0"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="16:9"
tools:srcCompat="@tools:sample/avatars"
/>
You can also access this programmatically, so you could add a SeekBar to control these values.
seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
override fun onProgressChanged(seekbar: SeekBar?, progress: Int, p2: Boolean) {
val percentage = (progress / 100.0f)
imageView.saturation = (percentage) + 1
}
override fun onStartTrackingTouch(seekbar: SeekBar?) {
}
override fun onStopTrackingTouch(seekbar: SeekBar?) {
}
})
There is also the ability to crossfade between two different images using the crossfade method defined on ImageFilterView. This allows you to merge two images together.
If you are looking for a quick way to add some basic image effects, ImageFilterView is definitely something to consider. It is fast to use and execute since it is backed by ColorMatrix which uses the GPU (and not the CPU) to process the resultant image.
Here is an example of ImageFilterView in action:
The downside to using this approach is that you are not in full control of the exact pixel values that are going to be used, which could be problematic if you are developing an image editing application.
Overall, I’m really excited about the ImageFilterView class! I hope it is the start of some awesome Image effects offered by the Android Team.
Check out the ConstraintLayout demo repository for the code used in the above example.
Follow me on Twitter for more.