Tuesday, 14 May 2013


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. :)



finaoutput:-









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/'


13 comments:

  1. Hello Suheb,

    It's great tutorial. It helped me alot to create editText over ImageView. I have done that.
    I am facing another problem. I have to draw lines as well on imageView as well as have to write text based on option selected from menu.

    Can you please help me how to achieve this if you have any idea about this.

    ReplyDelete
    Replies
    1. you can download and import this project in your eclipse - Here

      this includes related changes as you mentioned.it will give you a basic idea about that you want to achieve.

      Delete
    2. I have downloaded and run this project in eclipse.

      In this, we can undo all the editing, but what I need is to undo/replace one change(either drawing or text over image) not as whole.

      Delete
  2. How to add clip arts on image view

    ReplyDelete
  3. hello i want image browse from gallery .write code for this

    ReplyDelete
  4. Such a great post to know the creating simple image editing method.Its really great for people.
    Real Estate Image Editing Service | Image Editing Company in Bangalore

    ReplyDelete
  5. how to add undo and redo function

    ReplyDelete
  6. Thanks a lot for sharing the useful information. The content and info in article was awesome. Photo editing companies |Image editing company|Image editing solutions

    ReplyDelete
  7. how to draw circle on the image for inking

    ReplyDelete
  8. We offer qualitative image editing services, image masking, clipping path, image restoration, image manipulation, real estate image editing services
    Image Editing company| Image Editing Services

    ReplyDelete