Android - Image Effects Tutorial

2021-12-07 13:59 Android开发

Android allows you to manipulate images by adding different kinds of effects on the images. You can easily apply image processing techniques to add certain kinds of effects on images. The effects could be brightness,darkness, grayscale conversion e.t.c. Android provides Bitmap class to handle images. This can be found under android.graphics.bitmap. There are many ways through which you can instantiate bitmap. We are creating a bitmap of image from the imageView. <pre class="prettyprint notranslate prettyprinted" > private Bitmap bmp; private ImageView img; img = (ImageView)findViewById(R.id.imageView1); BitmapDrawable abmp = (BitmapDrawable)img.getDrawable();</pre> Now we will create bitmap by calling getBitmap() function of BitmapDrawable class. Its syntax is given below − <pre class="prettyprint notranslate prettyprinted" > bmp = abmp.getBitmap();</pre> An image is nothing but a two dimensional matrix. Same way you will handle a bitmap. An image consist of pixels. So you will get pixels from this bitmap and apply processing to it. Its syntax is as follows − <pre class="prettyprint notranslate prettyprinted" > for(int i=0; i<bmp.getWidth(); i++){ for(int j=0; j<bmp.getHeight(); j++){ int p = bmp.getPixel(i, j); } }</pre> The getWidth() and getHeight() functions returns the height and width of the matrix. The getPixel() method returns the pixel at the specified index. Once you got the pixel, you can easily manipulate it according to your needs. Apart from these methods, there are other methods that helps us manipulate images more better. <table class="table table-bordered" > <tbody > <tr > <th >Sr.No</th> <th >Method & description</th> </tr> <tr > <td >1</td> <td >copy(Bitmap.Config config, boolean isMutable) This method copy this bitmap's pixels into the new bitmap </td> </tr> <tr > <td >2</td> <td >createBitmap(DisplayMetrics display, int width, int height, Bitmap.Config config) Returns a mutable bitmap with the specified width and height </td> </tr> <tr > <td >3</td> <td >createBitmap(int width, int height, Bitmap.Config config) Returns a mutable bitmap with the specified width and height </td> </tr> <tr > <td >4</td> <td >createBitmap(Bitmap src) Returns an immutable bitmap from the source bitmap </td> </tr> <tr > <td >5</td> <td >extractAlpha() Returns a new bitmap that captures the alpha values of the original </td> </tr> <tr > <td >6</td> <td >getConfig() This mehtod eturn that config, otherwise return null </td> </tr> <tr > <td >7</td> <td >getDensity() Returns the density for this bitmap </td> </tr> <tr > <td >8</td> <td >getRowBytes() Return the number of bytes between rows in the bitmap's pixels </td> </tr> <tr > <td >9</td> <td >setPixel(int x, int y, int color) Write the specified Color into the bitmap (assuming it is mutable) at the x,y coordinate </td> </tr> <tr > <td >10</td> <td >setDensity(int density) This method specifies the density for this bitmap </td> </tr> </tbody> </table> <h2 >Example</h2> The below example demonstrates some of the image effects on the bitmap. It crates a basic application that allows you to convert the picture into grayscale and much more. To experiment with this example , you need to run this on an actual device. <table class="table table-bordered" > <tbody > <tr > <th >Steps</th> <th >Description</th> </tr> <tr > <td >1</td> <td >You will use Android studio to create an Android application under a package com.example.sairamkrishna.myapplication. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.</td> </tr> <tr > <td >2</td> <td >Modify src/MainActivity.java file to add necessary code.</td> </tr> <tr > <td >3</td> <td >Modify the res/layout/activity_main to add respective XML components</td> </tr> <tr > <td >4</td> <td >Run the application and choose a running android device and install the application on it and verify the results</td> </tr> </tbody> </table> Following is the content of the modifiedMainActivity.java. <pre class="prettyprint notranslate prettyprinted" > package com.example.sairamkrishna.myapplication; import android.graphics.Bitmap; import android.graphics.Color; import android.graphics.drawable.BitmapDrawable; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.ImageView; public class MainActivity extends ActionBarActivity { Button b1, b2, b3; ImageView im; private Bitmap bmp; private Bitmap operation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); b1 = (Button) findViewById(R.id.button); b2 = (Button) findViewById(R.id.button2); b3 = (Button) findViewById(R.id.button3); im = (ImageView) findViewById(R.id.imageView); BitmapDrawable abmp = (BitmapDrawable) im.getDrawable(); bmp = abmp.getBitmap(); } public void gray(View view) { operation = Bitmap.createBitmap(bmp.getWidth(),bmp.getHeight(), bmp.getConfig()); double red = 0.33; double green = 0.59; double blue = 0.11; for (int i = 0; i < bmp.getWidth(); i++) { for (int j = 0; j < bmp.getHeight(); j++) { int p = bmp.getPixel(i, j); int r = Color.red(p); int g = Color.green(p); int b = Color.blue(p); r = (int) red * r; g = (int) green * g; b = (int) blue * b; operation.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b)); } } im.setImageBitmap(operation); } public void bright(View view){ operation= Bitmap.createBitmap(bmp.getWidth(), bmp.getHeight(),bmp.getConfig()); for(int i=0; i<bmp.getWidth(); i++){ for(int j=0; j<bmp.getHeight(); j++){ int p = bmp.getPixel(i, j); int r = Color.red(p); int g = Color.green(p); int b = Color.blue(p); int alpha = Color.alpha(p); r = 100 + r; g = 100 + g; b = 100 + b; alpha = 100 + alpha; operation.setPixel(i, j, Color.argb(alpha, r, g, b)); } } im.setImageBitmap(operation); } public void dark(View view){ operation= Bitmap.createBitmap(bmp.getWidth(),bmp.getHeight(),bmp.getConfig()); for(int i=0; i<bmp.getWidth(); i++){ for(int j=0; j<bmp.getHeight(); j++){ int p = bmp.getPixel(i, j); int r = Color.red(p); int g = Color.green(p); int b = Color.blue(p); int alpha = Color.alpha(p); r = r - 50; g = g - 50; b = b - 50; alpha = alpha -50; operation.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b)); } } im.setImageBitmap(operation); } public void gama(View view) { operation = Bitmap.createBitmap(bmp.getWidth(),bmp.getHeight(),bmp.getConfig()); for(int i=0; i<bmp.getWidth(); i++){ for(int j=0; j<bmp.getHeight(); j++){ int p = bmp.getPixel(i, j); int r = Color.red(p); int g = Color.green(p); int b = Color.blue(p); int alpha = Color.alpha(p); r = r + 150; g = 0; b = 0; alpha = 0; operation.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b)); } } im.setImageBitmap(operation); } public void green(View view){ operation = Bitmap.createBitmap(bmp.getWidth(),bmp.getHeight(), bmp.getConfig()); for(int i=0; <bmp.getWidth(); i++){ for(int j=0; j<bmp.getHeight(); j++){ int p = bmp.getPixel(i, j); int r = Color.red(p); int g = Color.green(p); int b = Color.blue(p); int alpha = Color.alpha(p); r = 0; g = g+150; b = 0; alpha = 0; operation.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b)); } } im.setImageBitmap(operation); } public void blue(View view){ operation = Bitmap.createBitmap(bmp.getWidth(),bmp.getHeight(), bmp.getConfig()); for(int i=0; i<bmp.getWidth(); i++){ for(int j=0; j<bmp.getHeight(); j++){ int p = bmp.getPixel(i, j); int r = Color.red(p); int g = Color.green(p); int b = Color.blue(p); int alpha = Color.alpha(p); r = 0; g = 0; b = b+150; alpha = 0; operation.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b)); } } im.setImageBitmap(operation); } }</pre> Following is the modified content of the xmlres/layout/activity_main.xml. <pre class="prettyprint notranslate prettyprinted" > <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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:textSize="30dp" android:text="Image Effects" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tutorials Point" android:id="@+id/textView2" android:layout_below="@+id/textView" android:layout_centerHorizontal="true" android:textSize="35dp" android:textColor="#ff16ff01" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView" android:layout_below="@+id/textView2" android:layout_centerHorizontal="true" android:src="@drawable/logo"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Gray" android:onClick="gray" android:id="@+id/button" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginBottom="97dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="dark" android:onClick="dark" android:id="@+id/button2" android:layout_alignBottom="@+id/button" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Bright" android:onClick="bright" android:id="@+id/button3" android:layout_alignTop="@+id/button2" android:layout_centerHorizontal="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Red" android:onClick="gama" android:id="@+id/button4" android:layout_below="@+id/button3" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Green" android:onClick="green" android:id="@+id/button5" android:layout_alignTop="@+id/button4" android:layout_alignLeft="@+id/button3" android:layout_alignStart="@+id/button3" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="blue" android:onClick="blue" android:id="@+id/button6" android:layout_below="@+id/button2" android:layout_toRightOf="@+id/textView" android:layout_toEndOf="@+id/textView" /> </RelativeLayout></pre> Following is the content ofAndroidManifest.xmlfile. <pre class="prettyprint notranslate prettyprinted" > <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.sairamkrishna.myapplication" > <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest></pre> Let's try to run our application we just modified. I assume you had created yourAVDwhile doing environment setup. To run the app from Android studio, open one of your project's activity files and click Run<img alt="Eclipse Run Icon" class="inline" src="http://www.tutorialspoint.com/android/images/eclipse_run.jpg" />icon from the toolbar. Android studio installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window − <img alt="Anroid Image Effects Tutorial" src="http://www.tutorialspoint.com/android/images/effects.jpg" /> Now if you will look at your device screen , you will see the an image of android along with three buttons. Now just select the Gray button that will convert your image into grayscale and will update the UI. It is shown below − <img alt="Anroid Image Effects Tutorial" src="http://www.tutorialspoint.com/android/images/effects1.jpg" /> Now tap on the bright button, that will add some value to each pixel of the image and thus makes an illusion of brightness. It is shown below − <img alt="Anroid Image Effects Tutorial" src="http://www.tutorialspoint.com/android/images/effects2.jpg" /> Now tap on the dark button, that will subtract some value to each pixel of the image and thus makes an illusion of dark. It is shown below − <img alt="Anroid Image Effects Tutorial" src="http://www.tutorialspoint.com/android/images/effects3.jpg" /> Now tap on the red button, that will subtract some value to each pixel of the image and thus makes an illusion of dark. It is shown below − <img alt="Anroid Image Effects Tutorial" src="http://www.tutorialspoint.com/android/images/effects4.jpg" /> Now tap on the green button, that will subtract some value to each pixel of the image and thus makes an illusion of dark. It is shown below − <img alt="Anroid Image Effects Tutorial" src="http://www.tutorialspoint.com/android/images/effects5.jpg" /> Now tap on the blue button, that will subtract some value to each pixel of the image and thus makes an illusion of dark. It is shown below − <img alt="Anroid Image Effects Tutorial" src="http://www.tutorialspoint.com/android/images/effects6.jpg" /> <div></div>