Layout Con Diseño de mapa

[edgar macas]

Saludos a todos y espero me sepan ayudar en el siguiente tema:

Deseo crear un diseño con botones que contengan la imagen de un mapa, son 3 en total pero deseo que el diseño quede semejante a esta iamgen:

Hay alguna forma de hacer que cada  boton se ajuste a la imagen y que estas imagenes esten acopladas, o la unica solucion es tener esas imagenes por separado cada una dentro de un Layout, espero me haya hecho entender y agradesco cualquier sugerencia o ayuda.

[Martin]

Hola, hay varias formas de hacer eso pero son algo complejas de elaborar: te doy una idea que puede ser la mas "simple" de hacer a mi punto de vista, supongamos que te sirve la imagen del mapa y que la podes usar asi como esta ahora y solo necesitas detectar clics en cada una de la divisiones del mapa y que los colores de las zonas no se repiten; si es asi entonces dibujas el mapa ya sea en un ImageView o un CustomView o incluso en el mismo activity si este tuviera espacio, pero mejor seria en un ImageView o hacer un custom view, asi solo restaria poner un listener para tomar la posicion donde se toca y el color del pixel que hay alli, compararlo para buscar si coincide con el color de alguna de las zonas y si es asi realizar la accion correspondiente

// un ImageView para cargar la imagen del mapa
ImageView mImageMap;


// en el onCreate (o cualquier metodo de inicializacion) ponemos un listener para 
// detectar cuando se toca en el ImageView y tomar el color del pixel en esa posicion, 
// luego se compara contra una lista de colores posibles (que representan cada zona del mapa) 
// y cuando concida el color se realizara la accion necesaria dentro del switch case.

mImageMap.setOnTouchListener(new View.OnTouchListener()
{
    @Override
    public boolean onTouch(View v, MotionEvent event)
    {

        if(event.getAction() == MotionEvent.ACTION_DOWN)
        {
            // se obtienen las coordenadas del pixel donde se toca
            int x = event.getX();
            int y = event.getY();
            // a partir de ahi se obtiene el color del pixel como un int
            ImageView imageView = ((ImageView)v);
            Bitmap bitmap = ((BitmapDrawable)imageView.getDrawable()).getBitmap();
            int colorPixel = bitmap.getPixel(x,y);
           
            // colores a buscar
            int colorZona1 = Color.rgb(255, 0, 0); // rojo
            int colorZona2 = Color.rgb(0, 255, 0); // verde
            /// y asi con los demas colores a buscar
       
            switch(colorPixel)
            {
                case colorZona1:
                    // accion para la zona 1 del mapa
                    return true;

                case colorZona2:
                    // acccion para la zona 2 del mapa
                    return true;
            }

            return false;
        }
    }
});

tambien se podrian explorar otras opciones como usar poligonos, paths, canvas o svg, pero ahi ya se complicaria con el tema de obtener el trazado del mapa, si el mapa es simple y no necesitas efectos podrias usar algo como lo que indique en el ejempo de codigo, saludos!

PD: hay algunas alternativas para mapas interesantes pero son basadas en javascript y en ese caso son validas para usarse en aplicaciones phonegap/cordova o para usar dentro de un WebView:

Leaflet
jQueryMapael
Openlayers

eso por citar algunas pero hay muchas mas.

[edgar macas]

muchas gracias por la ayuda y de momento voy a implementar la solucion que me promone que me parece la mas rapida para implementar, gracias