I have a big image with transparent circle in the center. I want to overlap this over a MapView so that you get to see the map in a circle. The image is bigger than any possible device screen so that it will look basically the same on all sizes. The rounded corners in the image are complex and that's why I need to do this.
How can I position the ImageView so that parts of it are offscreen?
Make the transparent circle a ninepatch, for example: http://i.imgur.com/8wmrQ.png
Save it into res/drawable-hdpi/mask.9.png
Than you can use it as
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
RelativeLayout rl = new RelativeLayout(this);
MapView mapView = new MapView(this, "apikey");
mapView.setClickable(true);
rl.addView(mapView);
ImageView imageView = new ImageView(this);
imageView.setImageResource(R.drawable.mask);
imageView.setScaleType(ScaleType.FIT_XY);
rl.addView(imageView, RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
setContentView(rl);
}
I suspect that what you want to achive is not exactly what you describe. However, if that is the case the solution posted by #Daniel Fekete is the best approach. To that solution, I just add, that you can also define the ImageView in the same layout file where you are defining the MapView, instead of adding the view programmatically. Of course the ImageView should be defined after the MapView to have it being drawn over the map.
If you need a more flexible solution, where the ImageView can move aligned with the map, or having it covering the map, but not covering other overlays items that you add to the map, then you can use the the following approach:
Create an overlay that mask (cover) the part of the map that you want to cover. In the onDraw() of this oevrlay just draw something that achive your mask requirements (shapes, colors and opacity).
If you want to have other overlay items visible, you need to add the overlay with these items after you add the overlay that mask map to the mapView.getOverlays.add().
Enjoy it.
Related
I want to draw a custom button with red bounds, where lines are out of bounds of the button like the image below.
If it is appropriate you can draw a picture (like one attached to your question) and use it.
You can use picture as a sourse for ImageView element. Then use this ImageView as a button (set onClickListener to it).
You can also try to create layout (FrameLayout or RelativeLayout) and use your picture as a background for that layout. Then put a Button element inside that layout. Try different width, height, margin, padding properties for Button and layout to place Button inside red rectangle made with red lines.
I have a frameLayout in xml:
<FrameLayout
android:layout_width="150px"
android:layout_height="200px"
android:id="#+id/preview">
</FrameLayout>
This preview is for displaying camera view:
mPreview = new CameraSurfacePreview(MainActivity.this, cameraObj,...);
preview.addView(mPreview2);
....
It successfully displaying face from the front camera. And I have the face rectangle x and y coordinates. How can I display a bounding box of face on the frameLayout?
Thank you.
well, you could use a ShapeDrawable, and set it's layout parameters to be the size and location you need, and add it to the FrameLayout along with your CameraSurfacePreview.
It's not all the difficult. First create a ShapeDrawable with the properties you want. Then set it as the background of a standard View object, and add the view with the layout parameters to size it how you want. So if you want the
ShapeDrawable sd = new ShapeDrawable(new RectShape());
sd.getPaint().setColor(0xFFFFFFFF);
sd.getPaint().setStyle(Paint.Style.STROKE);
sd.getPaint().setStrokeWidth(1);
View shapeView = new View(context);
shapeView.setBackground(sd);
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(100, 100);
params.setMargins(left, top, 0, 0);
frameLayout.addView(shapeView, params);
In this particular case, i've made it a 100x100 view, so the shape will auto size to the view. and i've set it up so that it's offset from the top corner by the values left and top.
There's lots of ways to do this, but this seems the simplest. Of course you could do all this in XML too. There's lots of tutorials out there on how to do this.
I have a transparent layout in android, and behind the layout there is an image. how to make the linear blur ? I found examples to make the image itself blur but I don't want to make whole image blue, just only the part that is behind the linear layout.
Set a semitransparent Blur image to the linear layout or simplest set a color to linear layout and set it to semitransparent by defining alpha
edited solution
do this...
1.) create a blur copy of the image u have on background.
2.) clip the image by using
Bitmap croppedBmp = Bitmap.createBitmap(originalBmp, startX, startY, widthLayout , heightOfLayout);
3.) set this image in the Linear Layout using an image-view with height and width attribute as fill-parent.
I have pretty complex solution, so there won't be any code. So, here is idea, step by step:
Let's assume that your layout have just single custom LinearLayout. No ImageView as a background.
What we going to do, is draw background drawable of LinearLayout by our own, so it will first draw full image and then draw blurred square from the same image on top. Content of LinearLayout might be moved to desired position using paddings.
So, create something like MyLinearLayout and put it to your layout resource. Provide required constructors.
Override onAttachedToWindow() and onDetachedFromWindow() methods. Inside them we should load our background Bitmap and recycle it accordingly. Let's name it mBackground
Override draw() method. Inside it we're going to first draw our mBackground.
Then, you can use Canvas#clipRect() method to crop drawing area of Canvas to some specified rectangle. In your case, this rectangle should be the area below your content. You can figure it out using View#getPadding*() methods. Don't forget to call canvas#save() before clipping drawing area.
Now you can draw your bitmap once again with blur (I don't know which method exactly you're using, so let's assume that you know how to do it... but you still can share it with us :) ). Cool thing is that you can just draw the same Bitmap once again in full scale - since we had called clipRect before, it will be drawn only within this area. Don't forget to call canvas#restore() after drawing background.
Call super.draw() to draw rest of the stuff, that your LinearLayout contains.
I've created my own View (in which I draw on Canvas), and I want to make another Layer (with buttons etc.) on top of it. How can I do this?
Create a FrameLayout and add the views you want there - the FrameLayout allows for Overlaying of controls.
Just be sure that the top one has some opacity set, otherwise you won't see the controls below it - also be careful of the order you add the Views.
FrameLayout layers = new FrameLayout(this);
CustomViewBottom bottom = new CustomViewBottom(this);
CustomViewOverlay overlay = new CustomViewOverlay(this);
//the overlay class must set the ALPHA property
//of the PAINT object that it uses to draw
layers.addView(bottom);
layers.addView(overlay);
this.setContentView(layers);
How to draw an overlay on a SurfaceView used by Camera on Android?
I have a LinearLayout [Horizontal Orientation] in which I have several ImageView objects side by side. I need to be able to drag the ImageView objects side to side.
I can drag them, but I need to be able to draw them ontop of each other as I am dragging.
So, if I have
(imageA)(imageB) side by side, and I am dragging imageA in the direction of imageB, I need imageA to draw on top of imageB and viceversa.
So far, I can get the dragging done no problem [by extending ImageView, capturing onTouchEvent, overwriting the onDraw method, and translating the canvas] however, as soon as the ImageView is moved, it is clipped because of its bounds. I try setting new bounds for the drawable of the ImageView but that doesn't work either.
How do I draw one ImageView on top of another ImageView [without using FrameLayout] ?
Thanks,