Highlight an area that maintains its size while zooming about tileview

[moagrius]

It's possible. There are a couple ways you could do it. The easiest would probably to be add your own layer, a new ScalingLayout, sync the scale to the TileView, and add Views to it as you have above. The following is off the top of my head and is not complete, but should get you started.

1. Make a new ScalingLayout class that sync it's scale to the TileView

public class HighlightLayer extends ScalingLayout implements DetailLevelEventListener {

    public HighlightLayer ( Context context, DetailManager detailManager ) {
        super( context );
        detailManager.addDetailLevelEventListener( this );
    }

    @Override
    public void onDetailLevelChanged() {

    }

    @Override
    public void onDetailScaleChanged( double scale ) {
        setScale( scale );
    }

}

1. Add it as a new layer to the TileView

HighlightManager highlightManager = new HighlightManager(this);
tileView.addView(highlightManager);

1. Add Views to it...

ImageView areaPin = new ImageView(this);
int RED_FADE = Color.argb(100, 209, 50, 57);
areaPin.setBackgroundColor(RED_FADE);
areaPin.setMinimumWidth(40);
areaPin.setMinimumHeight(100);
ScalingLayout.LayoutParams lp = new ScalingLayout.LayoutParams(40, 100, 1200, 1225);
highlightManager.addView(areaPin, lp);

You could also achieve what you're trying to do with a combination of a custom path drawing implementation and a hotspot.

Last thing - if you're using the TileViewDemo as the source, it does not have the latest TileView lib - grab the latest jar from the releases page.

HTH, post back if you need more help, or the idea above won't work for you.

[nverbeek]

Thanks so much for responding! Could you elaborate a little more on what I'd need to do inside the Highlight Manager? I have the above implemented, but it results in the area moving around when zoomed. I think this is the right path to go down, I'm just not sure how to proceed. Any details you can provide would be helpful. Thanks!

[moagrius]

I ended up doing it a little differently, so you didn't have to hack the core (and can use the jar and keep up to date with the latest release).

I ran a quick test and it works.

The idea is the same, but we get there a little differently.

All this happens in the Activity containing the TileView instance.

A. Create a reference to a ScalingLayout:

private ScalingLayout highlightManager;

B. Create a listener to pass the scale of the TileView to the ScalingLayout

private TileView.TileViewEventListenerImplementation listener = new TileView.TileViewEventListenerImplementation(){
    @Override
    public void onScaleChanged( double scale ){
        highlightManager.setScale( scale );
    }
};

C. in onCreate, set them up:

// add the listener
tileView.addTileViewEventListener( listener );

// instantiate the ScalingLayout and add it to the view tree
highlightManager = new ScalingLayout(this);      
tileView.addView(highlightManager);

// draw some highlights
ImageView areaPin = new ImageView(this);
int RED_FADE = Color.argb(100, 209, 50, 57);
areaPin.setBackgroundColor(RED_FADE);
areaPin.setMinimumWidth(40);
areaPin.setMinimumHeight(100);
ScalingLayout.LayoutParams lp = new ScalingLayout.LayoutParams(40, 100, 1200, 1225);
highlightManager.addView(areaPin, lp);

That should do it. The dimensions are relative to the map at it's full size.

LMK if that's what you were looking for.

[nverbeek]

Got it! That is what I was looking for. I also added a HotSpot with the same dimensions to gather click events on it, since I don't think there's another way to do that with this implementation.

One further question.. is there any way to make this layer draw beneath the markers?

[moagrius]

I also added a HotSpot with the same dimensions to gather click events on it, since I don't think there's another way to do that with this implementation.

You can add a plain-ol' View.OnClickListener to the ImageView, instead of using a HotSpot (but that will consume TouchEvents, so for example if you touched the highlighted area it wouldn't initiate a drag action - this might be OK or might not, depending on the exact nature of your setup).

is there any way to make this layer draw beneath the markers?

Honestly I don't remember how I did the addView overrides, since all children are routed through a "proxy" view, but you can _try_ to use addView(child, index), so instead of tileView.addView(highlightManager); use tileView.addView(highlightManager, 2); (which, in theory, should put it above the tiles but below paths and markers).

LMK how it goes

[nverbeek]

As for the layering, using tileView.addView(highlightManager, 2); worked exactly as expected. I think I have everything I need for that part now.

You can add a plain-ol' View.OnClickListener to the ImageView, instead of using a HotSpot (but that will consume TouchEvents, so for example if you touched the highlighted area it wouldn't initiate a drag action - this might be OK or might not, depending on the exact nature of your setup).

As for the clicking, I actually tried to add a plain View.OnClickListener to the ImageView and for some reason it wouldn't fire, that's why I resorted to the HotSpot. I'll try it again just in case, otherwise I think the HotSpot will work.

Thanks again for the help.

[moagrius]

NP, sounds good. Close the issue when you've got everything settled.