unknown os platform
Android code: How to Flip an Image vertically programmatically | Whats-online.info
whats-online-info

Android code: How to Flip an Image vertically programmatically


Android
2017:03:02 / Science and Tutorials

Android Tutorial: - Learn how to flip a bitmap image vertically programmatically. See an example





Flip bitmap Image vertically in android programmatically


Whats-online.info blog loves sharing complete source codes to their site visitors. We like our site visitor ask or leave a comment either on satisfaction or on unsatisfaction of the solution we have provided or problem we have solved.



For this Android tutorial, I would like to discuss how to flip an image vertically programmatically. 

Download source code at the end of this tutorial

First and foremost, you need to understand what is a canvas and how to draw shapes on a canvas. Our tutorial is based on canvas topic.

Our project files.
-MainActivity.java
-  activity_main.XML

We will use only the default MainActivity.java and activity_main.XML to demonstrate this tutorial.

  activity_main.XML 

Contains the ImageView widget to set our returned flipped bitmap image.

activity_main.XML Source code

<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"         tools:context=".MainActivity">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/imgView"/> </RelativeLayout>

MainActivity.java

On our MainActivity.java, copy and paste the code below .

package info.whats_online.verticalflip; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Matrix; import android.os.Bundle; import android.widget.ImageView; public class MainActivity extends Activity {    private ImageView imgView;     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         Bitmap originalImage = BitmapFactory.decodeResource(getResources(), R.drawable.bf);         imgView=(ImageView) findViewById(R.id.imgView);         imgView.setImageBitmap(FlipVertically(originalImage));     }     public Bitmap FlipVertically(Bitmap originalImage) {         // The gap we want between the flipped image and the original image         final int flipGap = 4;         int width = originalImage.getWidth();         int height = originalImage.getHeight();         // This will not scale but will flip on the Y axis         Matrix matrix = new Matrix();         matrix.preScale(1, -1);         // Create a Bitmap with the flip matrix applied to it.         // We only want the bottom half of the image         Bitmap flipImage = Bitmap.createBitmap(originalImage, 0,0 , width, height, matrix, true);         // Create a new bitmap with same width but taller to fit reflection         Bitmap bitmapWithFlip = Bitmap.createBitmap(width, height+height+flipGap, Bitmap.Config.ARGB_8888);         // Create a new Canvas with the bitmap that's big enough for         Canvas canvas = new Canvas(bitmapWithFlip);         //Draw original image         canvas.drawBitmap(originalImage, 0, height+flipGap, null);         //Draw the Flipped Image         canvas.drawBitmap(flipImage, 0, 0, null);         return bitmapWithFlip;     } }


Explanation.
We will get our bitmap image from drawable and pass it to our function.
We have created a function called 'FlipVertically()'. The function creates a canvas with two images. The original image and the vertically flipped image set side by side as illustrated by the image above. 

How to draw the canvas?
We need to get the dimensions of our original bitmap image. Our canvas will have the width of the original image and double the height of the original to accommodate both the pictures and a flipGap to create a point of separation of the two images. We will draw our images as follows.

// Create a new Canvas with the bitmap that's big enough for         Canvas canvas = new Canvas(bitmapWithFlip);         //Draw original image         canvas.drawBitmap(originalImage, 0, height+flipGap, null);         //Draw the Flipped Image         canvas.drawBitmap(flipImage, 0, 0, null);

The original image is drawn from points (0, height+ flipGap) and the flipped image from points width of the original image (0,0) on canvas.

Finally, the function returns a bitmap image for which is set as our ImageView on app launch.


Thanks for your time. We love when our site visitor leaves a comment and likes us on Facebook below. Subscribe to our newsletter to receive more related tutorials directly to your mailbox.

Download source code example












You may also like:


Leave a comment












Subscribe to get replies direct to your mailbox

Submit comment