Photo Editor | Android Studio | Kotlin

-

Image Editor | Android Studio | Kotlin

Android allows us to apply many kinds of effects on images. In this tutorial, we will apply some effects to an Image in the ImageView. We will apply the following effects to the image.
  1. Gray
  2. Bright
  3. Dark
  4. Red/Gama
  5. Green
  6. Blue

Step 1: Create a new project OR Open your existing project

Step 2: Place image in the drawable folder

Place any image (to apply the effects to it) in the drawable folder.
Photo Editor | Android Studio | Kotlin


Step 3: Code

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="10dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/label1Tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Image Effects"
        android:textColor="#000"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/label2Tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/label1Tv"
        android:layout_centerHorizontal="true"
        android:text="Devofandroid.blogspot.com"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp" />

    <ImageView
        android:id="@+id/bannerIv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:adjustViewBounds="true"
        android:src="@drawable/sample_image" />

    <Button
        android:id="@+id/resetBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/brightBtn"
        android:layout_centerHorizontal="true"
        android:onClick="resetClicked"
        android:text="Reset" />

    <Button
        android:id="@+id/grayBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/redBtn"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:onClick="grayClicked"
        android:text="Gray" />

    <Button
        android:id="@+id/brightBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/greenBtn"
        android:layout_centerHorizontal="true"
        android:onClick="brightClicked"
        android:text="Bright" />

    <Button
        android:id="@+id/darkBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/blueBtn"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:onClick="darkClicked"
        android:text="Dark" />

    <Button
        android:id="@+id/redBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:onClick="gamaClicked"
        android:text="Red" />

    <Button
        android:id="@+id/greenBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@+id/brightBtn"
        android:layout_alignLeft="@+id/brightBtn"
        android:layout_alignTop="@+id/redBtn"
        android:layout_alignParentBottom="true"
        android:onClick="greenClicked"
        android:text="Green" />

    <Button
        android:id="@+id/blueBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:onClick="blueClicked"
        android:text="Blue" />

</RelativeLayout>

MainActivity.kt
package com.blogspot.atifsoftwares.imageeffects

import android.graphics.Bitmap
import android.graphics.Color
import android.graphics.drawable.BitmapDrawable
import android.os.Bundle
import android.view.View
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    private lateinit var bitmapOriginal: Bitmap
    private lateinit var bitmapConverted: Bitmap

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

        val bitmapDrawable = bannerIv?.drawable as BitmapDrawable
        bitmapOriginal = bitmapDrawable.bitmap

    }

    fun resetClicked(view: View?) {
        bannerIv!!.setImageBitmap(bitmapOriginal)
    }

    fun grayClicked(view: View?) {
        bitmapConverted = Bitmap.createBitmap(bitmapOriginal.width, bitmapOriginal.height, bitmapOriginal.config)
        val red = 0.33
        val green = 0.59
        val blue = 0.11
        for (i in 0 until bitmapOriginal.width) {
            for (j in 0 until bitmapOriginal.height) {
                val p = bitmapOriginal.getPixel(i, j)
                var r = Color.red(p)
                var g = Color.green(p)
                var b = Color.blue(p)
                r = red.toInt() * r
                g = green.toInt() * g
                b = blue.toInt() * b
                bitmapConverted.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b))
            }
        }
        bannerIv!!.setImageBitmap(bitmapConverted)
    }

    fun brightClicked(view: View?) {
        bitmapConverted = Bitmap.createBitmap(bitmapOriginal.width, bitmapOriginal.height, bitmapOriginal.config)
        for (i in 0 until bitmapOriginal.width) {
            for (j in 0 until bitmapOriginal.height) {
                val p = bitmapOriginal.getPixel(i, j)
                var r = Color.red(p)
                var g = Color.green(p)
                var b = Color.blue(p)
                var alpha = Color.alpha(p)
                r = 100 + r
                g = 100 + g
                b = 100 + b
                alpha = 100 + alpha
                bitmapConverted.setPixel(i, j, Color.argb(alpha, r, g, b))
            }
        }
        bannerIv!!.setImageBitmap(bitmapConverted)
    }

    fun darkClicked(view: View?) {
        bitmapConverted = Bitmap.createBitmap(bitmapOriginal.width, bitmapOriginal.height, bitmapOriginal.config)
        for (i in 0 until bitmapOriginal.width) {
            for (j in 0 until bitmapOriginal.height) {
                val p = bitmapOriginal.getPixel(i, j)
                var r = Color.red(p)
                var g = Color.green(p)
                var b = Color.blue(p)
                var alpha = Color.alpha(p)
                r = r - 50
                g = g - 50
                b = b - 50
                alpha = alpha - 50
                bitmapConverted.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b))
            }
        }
        bannerIv!!.setImageBitmap(bitmapConverted)
    }

    fun gamaClicked(view: View?) {
        bitmapConverted = Bitmap.createBitmap(bitmapOriginal.width, bitmapOriginal.height, bitmapOriginal.config)
        for (i in 0 until bitmapOriginal.width) {
            for (j in 0 until bitmapOriginal.height) {
                val p = bitmapOriginal.getPixel(i, j)
                var r = Color.red(p)
                var g = Color.green(p)
                var b = Color.blue(p)
                var alpha = Color.alpha(p)
                r = r + 150
                g = 0
                b = 0
                alpha = 0
                bitmapConverted.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b))
            }
        }
        bannerIv!!.setImageBitmap(bitmapConverted)
    }

    fun greenClicked(view: View?) {
        bitmapConverted = Bitmap.createBitmap(bitmapOriginal.width, bitmapOriginal.height, bitmapOriginal.config)
        for (i in 0 until bitmapOriginal.width) {
            for (j in 0 until bitmapOriginal.height) {
                val p = bitmapOriginal.getPixel(i, j)
                var r = Color.red(p)
                var g = Color.green(p)
                var b = Color.blue(p)
                var alpha = Color.alpha(p)
                r = 0
                g = g + 150
                b = 0
                alpha = 0
                bitmapConverted.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b))
            }
        }
        bannerIv!!.setImageBitmap(bitmapConverted)
    }

    fun blueClicked(view: View?) {
        bitmapConverted = Bitmap.createBitmap(bitmapOriginal.width, bitmapOriginal.height, bitmapOriginal.config)
        for (i in 0 until bitmapOriginal.width) {
            for (j in 0 until bitmapOriginal.height) {
                val p = bitmapOriginal.getPixel(i, j)
                var r = Color.red(p)
                var g = Color.green(p)
                var b = Color.blue(p)
                var alpha = Color.alpha(p)
                r = 0
                g = 0
                b = b + 150
                alpha = 0
                bitmapConverted.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b))
            }
        }
        bannerIv!!.setImageBitmap(bitmapConverted)
    }
}

Step 4: Run Project
Output
Photo Editor | Android Studio | KotlinPhoto Editor | Android Studio | KotlinPhoto Editor | Android Studio | KotlinPhoto Editor | Android Studio | KotlinPhoto Editor | Android Studio | KotlinPhoto Editor | Android Studio | KotlinPhoto Editor | Android Studio | Kotlin

Comments

Post a Comment

Popular posts from this blog

Picture In Picture | Android Studio | Kotlin

-
Image
How to add Picture In Picture Mode in the android app? The Android 8.0 (API level 26) allows activities to launch in the picture-in-picture (PIP) mode. PIP is a special type of multi-window mode mostly used for video playback. It lets the user watch a video in a small window pinned to a corner of the screen while navigating between apps or browsing content on the main screen. The PIP window appears in the top layer of the screen in a corner chosen by the system. >>Check For Java Video: Step 1:  Create a new project   or   open an existing project Step 2: Create another activity named PIPActivity Step 3: Add the following properties to the PIPActivity in AndroidManifest <activity android:name= ".PIPActivity" android:configChanges= "screenSize|smallestScreenSize|screenLayout|orientation" android:launchMode= "singleTask" android:resizeableActivity= "true" android:supportsPictureInPic...
Read more

Manage External Storage Permission | Android Studio | Kotlin

-
Image
Manage External Storage Permission Previously (before Android 11) we only need to request the WRITE_EXTERNAL_STORAGE Permission to perform the storage-related tasks. But, now for Android 11 and above we have to request the MANAGE_EXTERNAL_STORAGE Permission to perform the storage-related tasks. Keep in mind that if you're 100% sure that your app requires this permission to work properly then request this permission otherwise Google will not allow you to publish/update your app. For example, if your app is WhatsApp Status Saver then you won't be allowed to use this permission as your app works with images and videos, not files. After permission is granted, I'll input a name and create a folder with that name just for example. You can do whatever you want instead. >>Check For Java Video Tutorial: Coding: AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android= "http://schemas.android.com/apk/res/android...
Read more

Add a Back Button to Action Bar Android Studio (Kotlin)

-
Image
      DESCRIPTION       In this tutorial we will add a back button in action bar, when it is clicked it will go to previous activity(the app will close if this was launcher activity). We will go from main activity to new activity by clicking button in main activity. In new activity we will add a back button to actionbar when that button is clicked the main activity will appear...       VIDEO             SOURCE CODE       Step 1:  Create a new Project  or  open new project Step 2: Create New Activity File>New>Activity>EmptyActivity Step 3: Code: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" ...
Read more