Show google maps polyline only on specific part of device screen - java

Good day to you all, I am creating a ride app and I was asking for some assistance in the following problem I am facing.
So, On the image below the grey background represents a google map fragment and above it sits two views(black) I wanted to know if it were possible to only show a polyline and markers between the black views only in the red area and have the rest of the map showing in the background as well.
If it helps I have managed to get the LatLng's of the corners of the red box using:
googleMap.getProjection().fromScreenLocation();
Thank you in advance!

Yes, it is possible. Several ways. For example, the red area of your figure can be View (e.g. custom view) with transparent background and you can draw your polylines on it (you need to take into account position of transparent "red" view on map view for correction of fromScreenLocation()/toScreenLocation() methods results). Also, probably, you can use two MapViews one over another and synchronize its scrolling and zooming, but IMHO best way is to to implement custom view component based on MapVew (or MapFragment) an override onDraw() for MapVew-based (or dispatchDraw() for MapFragment-based) method like in this or that answers:
..
#Override
public void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
canvas.save();
drawPolylinesInRegion(canvas);
canvas.restore();
}
...
In drawPolylinesInRegion(canvas); method you should draw your polylines and markers "manually" converting coordinates of them via method opposite you mentioned: toScreenLocation() and taking into account size of "gray regions" of you example figure.

Related

how can I create a custom clickable shape on an image in android?

I want to create a clickable image, my image has some different clickable parts in it, like this one:
I want to draw a custom shape like :
A,B,C,D,E,F
and make sure when user click on of this something happen.
the problem is I don't have any kind of idea to, how create shapes like the shapes in the image make sure it just fix on the image and in different screen size don't see a massed up thing.
Will there be more than many of such images?
If no I suggest you to create mask image for each region where black part of image represents the region and white part excludes rest.
To draw image:
create custom View
in constructor don't forget to use setWillNotDraw to true so you can do custom drawing
override View.onDraw method where you can draw main image and all others with some filters via setColorFilter.
To handle click events:
override onTouchEvent method
get touch position
compare touch position with point color in mask image
To optimise:
create mask image downscaled by some scale factor
during comparison divide touch position by scale factor
This is not ideal, but solution with vectors is non trivial I think
Take it as image and setOnclickListner for that image

Android: How to create a loading bar with text half one colour and half another

I've been trying to create a bar chart/ loading bar where the text is half one colour and half one another and have been struggling to come up with a simple way to tackle this. My ideas thus far have revolved around creating both bars in their complete state and then having a pair of 'selective transparency' views which would show the respective halves to create the effect.
I've been unable to find how to do this selective transparency/ opacity view. Is this possible? Is there some other blindingly obvious way to achieve this effect?
Here's a quick drawing of what I'm trying to achieve.
For anyone stumbling across this, I managed to solve this by using setClipBounds. I did it by creating two textviews of the full size, one with a coloured number and transparent background and the second with a white number and coloured background. Then setClipBounds is applied to the coloured textview as follows -
textview.setClipBounds( new Rect(0, originalHeight*(1 - progress), originalWidth, originalHeight);
Here, the variable progress has a value between 0 and 1. The Rect has to be defined relative to the view, not relative to the screen.
This exact setup achieves an effect something like this, but it could easily be changed to a horizontal bar or whatever else is required.
Somehow misinterpreted the question. The best way to achieve this would be to create the images and set as background to an imageview instead of a textview.
You could just use a LinearGradient
With the parameters colors and positions you can indicate the loading progress.
You can use the gradient when you override the onDraw Custom Drawing

Select Content inside ImageView - Android

I have an Activity containing an ImageView and I'd like to allow the User to select part of it's content with the touch (or mouse click) capabilities.
I'd like to write a procedure able to achieve two things:
Draw a highlighted window over the selected parts of the image
Return an object containing the coordinates of the selected (highlighted) pixels.
For better understanding you can check the little mock up I've created:
The User should touch the screen over some part of the image and it should get highlighted. When pressing the back button I'd like to obtain via Java the coordinates of the pixels that were highlighted.
Can you help me understand how to do?
In particular I'd like to find out the following:
should I access pixel level information of the image?
which classes are needed to implement this functionality?
some idea of pseudo code?
Thks for any kind of help!
I would subclass ImageView then you can capture the touch events by overriding onTouchEvent(...)
When you get to the onDraw(...) method you can call super to draw the image as normal, then add your own code to draw a highlight over the top.
EDIT
Well instead of using ImageView you can extend it and write your own class, all this class has to do is override onTouchEvent(...) so you know when the view is being touched and can save the location on screen of the touch events. Next you edit the drawing methods:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas); // So the image you want is drawn as normal
myMethodForDrawingAFancyHighlight(Canvas canvas); // add your special effects on top of the image
}

dynamically position views (similar to markers in Google Maps) on top of large scrollable + zoomable imageview

i have an imageview containing a bitmap that can be zoomed into and scrolled. i've used the setImageBitmap() method instead of setting the image on a canvas. the imageview acts as a map which the user can browse through. now, my application is supposed to allow the user to marker points of interest with push-pins as done in Google Maps on a point selected on the imageview by the user. i've gotten the ability to pick up which point on the original bitmap was selected using a modified implementation of the OnTouch() method to work so i know where exactly the marker has to be placed.
i want to set a marker to this location and pass a string into a database to store information about the location so that when the marker is tapped, this information is shown in a bubble/toast notification.
as of now, i can scroll the image, sense a longTouch event on the imageview, save point of tap, move to new activity to collect information to add in the database. i can't seem to find a way to set up my markers on the original imageview.
also, i'm guessing i'd have to use an ArrayList implementation here to get markers with individual IDs that could be correlated to the ID in the database fields but i don't understand how to implement that.
i looked around the Internet for a solution or an idea and i've tried many things before posting here but nothing seems to work.
using a canvas' draw functions wouldn't allow for onTap functions to show info notifications. the drawn bitmaps also lose scale and quality while zooming. i tried making a custom class extending RelativeLayout to act an an invisible layer on my imageview but i don't know how to place markers in exact locations and also make the custom RelativeLayout easier. i tried placing a false transparent canvas of the same dimensions as my bitmap to get scaling to work and allow me to place markers at absolute locations but it didn't work. plus, using onTouch events on the custom RelativeLayout class meant i couldn't use the onTouch events on the lower imageview class.
i can't seem to come up with any solutions that can help me implement the mechanism as i want to, so i'm open to any sorta idea that can be thrown at me. i'd appreciate some help.

JXMapViewer change orientation to Heading Up

I am trying to use JXMapViewer (from swingx-ws) with Open Street Maps. I was wondering if it would be possible to display the map tiles in the JXMapViewer based on heading up, rather than on North up. For example, the normal car GPS navigation systems let you do that.
I've looked through the documentation and there doesn't seem to be a straightforward way to do this. Is there something else that accomplish this, besides JXMapViewer?
Nevermind, I found a solution. Here is how I did it(if anybody is interested) :
I subclassed JXMapViewer, and overrode the paint method.
In the paint method contents of the JPanel are converted to a BufferedImage which is then rotated according to an angle and then painted on top of the panel.
so super.paint()-> BufferedImage-> apply an affineTransformation to it-> draw the new Image.
Of course, you would also need to override the convertGeoPositionToPoint and convertPointToGeoPosition methods taking into account the fact that the image is rotated.

Categories

Resources