How to select a particular tile when clicked and inflate a bitmap on it in tileview android

Question

I am showing a big image using Tileview using TileView library

Now i want to show a circle in a rect boundary when cliked on particular tiles.

How to get on which tile clicked? and how to show BitMmap above that tile?

public class LargeImageTileViewActivity extends TileViewActivity {
    TileView tileView;
    @Override
    public void onCreate( Bundle savedInstanceState ) {

        super.onCreate( savedInstanceState );

        // multiple references
        tileView = getTileView();

        // by disabling transitions, we won't see a flicker of background color when moving between tile sets
        tileView.setTransitionsEnabled( false );

        // size of original image at 100% scale
        tileView.setSize( 2835, 4289 );

        // detail levels
        tileView.addDetailLevel( 1.000f, "tiles/painting/1000/%col%_%row%.jpg");
        tileView.addDetailLevel( 0.500f, "tiles/painting/500/%col%_%row%.jpg");
        tileView.addDetailLevel( 0.250f, "tiles/painting/250/%col%_%row%.jpg");
        tileView.addDetailLevel( 0.125f, "tiles/painting/125/%col%_%row%.jpg");

        // set scale to 0, but keep scaleToFit true, so it'll be as small as possible but still match the container
        tileView.setScale( 0 );

        // let's use 0-1 positioning...
        tileView.defineRelativeBounds( 0, 0, 1,  1 );

        // frame to center
        frameTo( 0.5, 0.5 );
        tileView.addTileViewEventListener( listener );
    }
    private TileViewEventListenerImplementation listener = new TileViewEventListenerImplementation(){
        public void onTap( int x, int y ) {
            SampleCallout callout = new SampleCallout(LargeImageTileViewActivity.this);


            tileView.slideToAndCenter(x, y);
            //Toast.makeText(mContext, "Center " + tempStore.getCenterX() + " " + tempStore.getCenterY(), Toast.LENGTH_SHORT).show();
            tileView.addCallout(callout, x, y, -0.5f, -1.0f);

            callout.transitionIn();
        }
    };
}

Answer 1

From digging in the library a bit it seems to me that you will not be able to get the tile without modifying the code (you may not need to get the tile though, see more in option 2), that's doable though as it's open source, so you can make your modifications locally and go from there.

First option:

First modification you need:

In https://github.com/moagrius/TileView/blob/master/src/com/qozix/tileview/detail/DetailManager.java

Add the following code:

public DetailLevel getCurrentDetailLevel() {
    return currentDetailLevel;
}

In https://github.com/moagrius/TileView/blob/master/src/com/qozix/tileview/TileView.java

public DetailManager getDetailManager() {
    return detailManager;
}

This exposes the method you need in DetailLevel, e.g.

public LinkedList<Tile> getIntersections()

Which will return the Tiles in your current view port, each tile knows it bounds by left/right and top/bottom, so you can iterate through the tiles and find the one you clicked on.

Second option (recommended if possible):

Since you know the rects for all your things you could simply add HotSpots, in the library it seems that HotSpots are rects that support click listeners.

You can add a HotSpot like this:

HotSpot hotSpot = new HotSpot(left, top, right, bottom);
hotSpot.setHotSpotEventListener(this);
tileView.addHotSpot(hotSpot);

 ....

 public void onHotSpotTap(HotSpot hotSpot, int x, int y){
      Do your gui update using the supplied hotSpot above
 }

More info: https://github.com/moagrius/TileView/blob/master/src/com/qozix/tileview/hotspots/HotSpot.java

Adding the circle

The library supports markers, you can simply add an image view with your circle as the marker, like this

ImageView view = new ImageView (this);
view.setImageResource(circleId);
tileView.addMarker (view, tile.x, tile.y);