4

I want to set a transparent background. Maybe 20% of gray but i also want to have a small part of the background being completely transparent (a rectangle or a circle in the layout):

enter image description here

Is that possible? later i want the rectangle (or the circle) to be moveable and scaleable.

Mulgard
  • 9,877
  • 34
  • 129
  • 232

1 Answers1

4

This is easily achievable with a custom drawable like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:innerRadius="0dp"
       android:shape="rectangle"
       android:thicknessRatio="1.9"
       android:useLevel="false">

    <solid android:color="@android:color/transparent"/>

    <stroke
        android:width="125dp"
        android:color="#CC000000"/>
</shape>

When you overlay that drawable on top of an image the results would looks something like this:

enter image description here

By creating that drawable dynamically in code you can adjust it at runtime. For example: 

ShapeDrawable drawable = new ShapeDrawable(new RectShape());
drawable.getPaint().setColor(0xCC000000);
drawable.getPaint().setStyle(Paint.Style.STROKE);
drawable.getPaint().setStrokeWidth(dpToPixel(125.0f));
someView.setBackground(drawable);

You can influence the shape of the hole in the middle by combining multiple layers in a LayerDrawable.

You can also influence the general shape of the hole by setting the android:shape tag of the <shape /> element in the custom drawable.

Xaver Kapeller
  • 49,491
  • 11
  • 98
  • 86
  • Its a good solution when you dont want to move the rectangle in the middle. but i later want to be able to move and scale the 100% transparent rectangular area. – Mulgard Feb 28 '15 at 18:04
  • You can move it, scale it, rotate it or whatever you want to do with it by moving, scaling or rotating the whole drawable. – Xaver Kapeller Feb 28 '15 at 18:05
  • And you can change the drawable dynamically at runtime by creating it programmatically. – Xaver Kapeller Feb 28 '15 at 18:06
  • hmmm.. i tired some things now but i really dont know how to implement the shapes programmatically. – Mulgard Feb 28 '15 at 19:52
  • I'll add an example to my answer. – Xaver Kapeller Feb 28 '15 at 19:53
  • Thank you for that and sorry my reply was onclear. I knew how to create a shape programmatically, what i dont know is how to set the with and the height of it dynamically to make it scaleable and also when i want to move the frame later, i dont know how to set left stroke other size than right stroke. – Mulgard Feb 28 '15 at 20:25
  • You know my goal later is to achiev a cropping mechanism for my images and i dont want to use libs because i hate to use code i dont understand and people always making things complicated. – Mulgard Feb 28 '15 at 20:26
  • oh its ok. i got another idea. your solution is perfect for that. i thank you. i will just create a frame like you showed and i will not make the frame move or scaleable. i will make the imageview move and scaleable. thank you – Mulgard Feb 28 '15 at 20:30
  • Is it possible to turn that transparent area into a square? – kevoroid May 08 '18 at 05:59
  • @XaverKapeller how can I make the center transparent area square? – makkhay gurung Mar 11 '20 at 22:25