Creating Simple Image Editor in Android(with Basic Functionality)

If you are interested in android programming and have a creative mind you can create a simple image editor for android for your own personal use:-

1> This program is concentrated on drawing text on a resource image and saving it on sd-card.

2>We can undo all editing at any time if we do not want so.

3>Drawing text can be change any time.

4> #You can 'Try' it your self and change its functionality according to your requirements.

5> Easy to implement and supports all devices. :)



final output:-

it contains one 'Activity' in source(Txt_On_Bmp_Act.java) :-

Txt_On_Bmp_Act.java source code :-


package com.example.text_on_image;

import java.io.File;
import java.io.FileOutputStream;
import java.util.Random;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.os.Environment;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.Window;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

public class Txt_On_Bmp_Act extends Activity {
Bitmap originalBitmap,image;
ImageView iv_ttx;
EditText et_sample;

Paint paint;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_txt__on__bmp);
//image view
iv_ttx = (ImageView) findViewById(R.id.iv_ttx);
//to get screen width and hight
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
//dimentions x,y of device to create a scaled bitmap having similar dimentions to screen size
int height1 = displaymetrics.heightPixels;
int width1 = displaymetrics.widthPixels;
//paint object to define paint properties
paint = new Paint();
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.BLUE);
    paint.setTextSize(25);
//loading bitmap from drawable
    originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.android_wall);
//scaling of bitmap
originalBitmap =Bitmap.createScaledBitmap(originalBitmap, width1, height1, false);
//creating anoter copy of bitmap to be used for editing
image = originalBitmap.copy(Bitmap.Config.RGB_565, true);

et_sample =(EditText) findViewById(R.id.et_txt);

Button btn_save_img = (Button) findViewById(R.id.btn_save_image);
Button btn_clr_all = (Button) findViewById(R.id.btn_clr_all);
btn_clr_all.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
//loading original bitmap again (undoing all editing)
image = originalBitmap.copy(Bitmap.Config.RGB_565, true);
   iv_ttx.setImageBitmap(image);
}
});

btn_save_img.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
//funtion save image is called with bitmap image as parameter
saveImage(image);

}
});



iv_ttx.setOnTouchListener(new OnTouchListener() {

@Override
public boolean onTouch(View arg0, MotionEvent arg1) {
// TODO Auto-generated method stub
String user_text=et_sample.getText().toString();
//gettin x,y cordinates on screen touch
float scr_x=arg1.getRawX();
float scr_y=arg1.getRawY();
//funtion called to perform drawing
createImage(scr_x,scr_y,user_text);
return true;
}
});

}

void saveImage(Bitmap img) {
String RootDir = Environment.getExternalStorageDirectory()
                + File.separator + "txt_imgs";
   File myDir=new File(RootDir);
   myDir.mkdirs();
   Random generator = new Random();
   int n = 10000;
   n = generator.nextInt(n);
   String fname = "Image-"+ n +".jpg";
   File file = new File (myDir, fname);
   if (file.exists ()) file.delete (); 
   try {
       FileOutputStream out = new FileOutputStream(file);

       img.compress(Bitmap.CompressFormat.JPEG, 90, out);
       out.flush();
       out.close();
   } catch (Exception e) {
      e.printStackTrace();
   }
   
   Toast.makeText(Txt_On_Bmp_Act.this, "Image saved to 'txt_imgs' folder",Toast.LENGTH_LONG).show();
}



public Bitmap createImage(float scr_x,float scr_y,String user_text){
 //canvas object with bitmap image as constructor
        Canvas canvas = new Canvas(image);
        int viewTop = getWindow().findViewById(Window.ID_ANDROID_CONTENT).getTop();
//removing title bar hight 
        scr_y=scr_y- viewTop;
//fuction to draw text on image. you can try more drawing funtions like oval,point,rect,etc...
        canvas.drawText(""+user_text, scr_x, scr_y, paint);
        iv_ttx.setImageBitmap(image);
        return image;
    }

}

You have to put a image in drawable folder on which you have to edit. i have used "android_wall.jpg"
or you can edit code a little to load a file from gallary by using INTENT method(it is not Explained here right now. i would update it soon)

snapshot of layout:-

Here is the XML for our layout ("layout_txt_on_bmp.xml"):-


<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=".Txt_On_Bmp_Act" >

    <ImageView
        android:id="@+id/iv_ttx"
        android:layout_width="10px"
        android:layout_height="10px"
        android:scaleType="fitXY"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/et_txt"
        android:src="@drawable/android_wall" />

    <EditText
        android:id="@+id/et_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btn_clr_all"
        android:text="MY TEXT"
        android:textSize="14sp" />

    <Button
        android:id="@+id/btn_save_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/btn_clr_all"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Save Image"
        android:textSize="14sp" />

    <Button
        android:id="@+id/btn_clr_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/et_txt"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Clear All"
        android:textSize="14sp" />



YOU HAVE to add "WRITE_EXTERNAL_STORAGE"user permission to AndroidMainfaist to save image to sd-card.
images would be saved in folder  - '/sd-card/txt_images/'

Posted in android, android app, android program, app editing android, appliction, draw, draw text on image, edit, editor, image, image drawing, image edit, image editor, image view, photo, photo editing, photo editor, picture