CODEWITHSUNDEEP
androidimageimageview
user1022105
user1022105

Reputation: 101

Remove extra spaces from imageView using .png image in android

I am using a .png image in imageView but the square transparent background still appears. I want to remove all the extra spaces from imageView. Even by using the .png image in imageView the extra spaces between the character still exist. I want to color the image so don't want the extra spaces to be there. In the image attached the click event in the white spaces inside "3" works which I don't want. I just want the click event to work on the "3".

Here is my XML. There is nothing much in it. Also The square around the "3" in figure is drawn using paint not by code, just to clarify mu problem. The imageView has a square border and I want to match it right according to "3"

<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="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/image"
        android:id="@+id/test_image"
        android:scaleType="matrix"
        android:background="@null"
        android:text="@string/hello_world" />

</RelativeLayout>

enter image description here

I tried ramaral's solution. It works a bit closer to what is required but not very accurate. It works somehow good if I color very slowly but if I start moving my finger a bit faster then the empty areas get colored too.Here is the code I am using 

  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    imageView = (ImageView) this.findViewById(R.id.test_image);
    BitmapFactory.Options decode_options = new BitmapFactory.Options();
    decode_options.inMutable = true;
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image,decode_options);
    canvas = new Canvas(bitmap);
    paint = new Paint();
    transparentPaint = new Paint();
    transparentPaint.setColorFilter(new PorterDuffColorFilter(android.graphics.Color.TRANSPARENT, PorterDuff.Mode.SRC_ATOP));
    transparentPaint.setStrokeWidth(5);

    paint.setColorFilter(new PorterDuffColorFilter(android.graphics.Color.GREEN, PorterDuff.Mode.SRC_ATOP));
    paint.setStrokeWidth(5);
    imageView.setScaleType(ScaleType.MATRIX);
    imageView.setImageBitmap(bitmap);
    imageView.setOnTouchListener(this);

  }

  public boolean onTouch(View v, MotionEvent event) {
    int action = event.getAction();
    switch (action) {
    case MotionEvent.ACTION_DOWN:
      downx = event.getX();
      downy = event.getY();
      break;
    case MotionEvent.ACTION_MOVE:
      upx = event.getX();
      upy = event.getY();

      Drawable imgDrawable = ((ImageView)v).getDrawable();
      Bitmap bitmap = ((BitmapDrawable)imgDrawable).getBitmap();

      int color = bitmap.getPixel((int)upx, (int)upy);
      if ((color & 0xff000000) == 0x0){//pixel is TRANSPARENT
          canvas.drawLine(downx, downy, upx, upy, transparentPaint);
          imageView.invalidate();
          downx = upx;
          downy = upy;
          return true; 
      }else {
          canvas.drawLine(downx, downy, upx, upy, paint);
          imageView.invalidate();
          downx = upx;
          downy = upy;
          return true;
      }
    case MotionEvent.ACTION_UP:
      upx = event.getX();
      upy = event.getY();
      break;
    case MotionEvent.ACTION_CANCEL:
      break;
    default:
      break;
    }
    return true;
  }

and here is the output of this code. The image I am using in code is simple "3", a .png image with areas except 3 as transparent. enter image description here

Upvotes: 2

Views: 3588

Answers (3)

Miraj
Miraj

Reputation: 61

This will solve your problem.

Just add this property in xml file in imageview :

android:adjustViewBounds="true"

http://simplifiedandroiddeveloper.blogspot.in/2017/01/remove-empty-space-above-and-below.html

Upvotes: 5

ramaral
ramaral

Reputation: 6179

If I understand your question, You don't want the click event fired if user click around the 3, only on the "inked" part.

To do that declare a OnTouchListener() get the toutched point coordinates and verify the color of that point. 

image = (ImageView)findViewById(R.id.test_image);
image.setOnTouchListener(new OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event) {

        int x = event.getX();
        int y = event.getY();

        Drawable imgDrawable = ((ImageView)view).getDrawable();
        Bitmap bitmap = ((BitmapDrawable)imgDrawable).getBitmap();

        int color = bitmap.getPixel(x, y);
        if ((color & 0xff000000) == 0x0)
            return false; //pixel is TRANSPARENT
        else {
            //code to execute
            return true;
        }
    }
});

This only works if image was not scaled:

For a more complete example see this post

Upvotes: 0

TheIT
TheIT

Reputation: 12219

The only solution to your problem is to remove the extra unwanted space from the PNG or to set a negative margin on the ImageView, though this is highly unrecommended.

Upvotes: 0

Related Questions