Image Opacity - How to change opacity of image programatically using Kotlin

Last updated Dec 21, 2021

In this article, we will see how to change the opacity of image programatically based on seekbar  seek percentage in Android Studio by using Kotlin Language.

Opacity is the extent to which something blocks light. "Opacity" setting that allows you to adjust the transparency of an image. To understand opacity, it is important understand what "opaque" means. An opaque object is completely impervious to light, which means you cannot see through it.

SeekBar: The Android SeekBar is a ProgressBar with a movable thumb. The end user can move the progress of the song, file download, and so on by dragging the thumb left and right.
SeekBar has many attributes:  thumbTint, progressTint, max, id, layout_margin etc....

ImageView: ImageView is a widget which is used to set or show the image in a particular frame by using its attribute (src).


Implementation:

Step 1. Create a new Project in android studio.

Go to File > New > New Project > Empty Activity > Next > Enter Name > Select Language Kotlin > Finish

 

Step 2. Go to activity_main.xml file and add the following code

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:id="@+id/image"
        android:layout_height="350dp"
        android:src="@drawable/home"
        />

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:layout_marginTop="20dp"
        android:thumbTint="@color/black"
        android:progressTint="@color/purple_500"
        android:max="255"
        android:progress="255"
        />

</LinearLayout>

 

You will get the output from above xml code.

Change Image opacity Programatically in android

 

 

Step 3. Open MainActivity.kt file and add the following code below setContentView(R.layout.activity_main).

val seekBar = findViewById(R.id.seekBar)
        val imageView = findViewById(R.id.image)

        seekBar.setOnSeekBarChangeListener(object: SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
                //This is for set the opacity to progress (i.e. opacity(40%))
                imageView.setAlpha(p1)
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {
//          Write your custom code (When you start the track)

            }

            override fun onStopTrackingTouch(p0: SeekBar?) {
//           Write your own custom code on stop of tracking
             }

        })

 

The SeekBar.OnSeekBarChangeListener interface provides methods to perform even handling for seek bar.

OnSeekBarChangeListener has three override methods :

  •  onProgressChanged() - When we slide the seekbar it provides us progress in percentage.
  • onStartTrackingTouch() - It is used when we start click on seekbar.
  •  onStopTrackingTouch() - used when we removed click from seekbar return final progress.

For change and set the opacity on imageView, we used:

imageView.setAlpha(p1) 

 

Step 4. Run the app on emulator or real device, you will get the output as in Video.

OUTPUT:

Android Image Opacity

 


Complete Source Code of Opacity of Image Android Example:

activity_main.xml file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:id="@+id/image"
        android:layout_height="350dp"
        android:src="@drawable/home"
        />

    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:layout_marginTop="20dp"
        android:thumbTint="@color/black"
        android:progressTint="@color/purple_500"
        android:max="255"
        android:progress="255"
        />

</LinearLayout>

 

MainActivity.kt file


import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import android.widget.SeekBar

class OpacityActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val seekBar = findViewById(R.id.seekBar)
        val imageView = findViewById(R.id.image)

        seekBar.setOnSeekBarChangeListener(object: SeekBar.OnSeekBarChangeListener{
            override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
                //This is for set the opacity to progress (i.e. opacity(40%))
                imageView.setAlpha(p1)
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {
//          Write your custom code (When you start the track)

            }

            override fun onStopTrackingTouch(p0: SeekBar?) {
//           Write your own custom code on stop of tracking
             }

        })
    }
}


Conclusion: In this article we have covered how to change the opacity of image dynamically using seekbar in Android Studio by using Kotlin Language.

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

914 Views
Projects By category
Categories