How to change the marker bubble using OSMDROID/OSMBonusPack

Question

teI'm trying to replace google map in my application by OSM map. I've been trying to use this by following their how to install and imported the project using Jitpack. It works fine. On tap of marker default info bubbles(some light gray colored ones) are shown. What should I do if I want to modify the background of the marker bubble?I'm not using any kind of onClick method in my code

 import android.app.Fragment;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import org.osmdroid.api.IMapController;
import org.osmdroid.tileprovider.tilesource.TileSourceFactory;
import org.osmdroid.util.GeoPoint;
import org.osmdroid.views.MapView;
import org.osmdroid.views.overlay.Marker;
import org.osmdroid.views.overlay.ScaleBarOverlay;
import java.util.ArrayList;
import java.util.List;
import demo.exe.exe.R;
import demo.exe.exe.model.Education.EducationServiceProviderItem;
import demo.exe.exe.utils.AppConstants;


public class MapFragmentOSM extends Fragment implements View.OnClickListener {

    private ArrayList<EducationServiceProviderItem> educationServiceProvider=null;
MapView mapView;
    int subcategotyId;
    View rootView;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        double latDouble,longDouble;
        int i=0;
        super.onCreate(savedInstanceState);
        rootView = inflater.inflate(R.layout.fragment_map, container,
                false);

        mapView = (MapView) rootView.findViewById(R.id.mapview);
        mapView.setClickable(true);
        mapView.setBuiltInZoomControls(true);
        mapView.setMultiTouchControls(true);
        mapView.setUseDataConnection(true);

;
        mapView.setTileSource(TileSourceFactory.MAPQUESTOSM);

        IMapController mapViewController = mapView.getController();



        if(locationNameId==1) {

            mapViewController.setZoom(18);
            mapViewController.setCenter(AppConstants.BAUNIA1);
        }
        else if(locationNameId==2)
        {
            mapViewController.setZoom(17);
            mapViewController.setCenter(AppConstants.PARIS1);
        }
        switch (categoryId)
        {
            case AppConstants.EDUCATION:
                if(educationServiceProvider!=null) {
                    for (EducationServiceProviderItem et : educationServiceProvider) {
                    //    LatLng location = new LatLng(Double.parseDouble(et.getLatitude()), Double.parseDouble(et.getLongitude()));
                        subcategotyId = et.getEduSubCategoryId();
                        latDouble=Double.parseDouble(et.getLatitude());
                        longDouble=Double.parseDouble(et.getLongitude());
                      GeoPoint point=  new GeoPoint(latDouble,longDouble);
                        drawMarkerEdu(point, et.getEduNameEng(),et.getAddress(), et.getEduSubCategoryId());
                    }
                }
                break;


            default:
                break;

        }

        //Add Scale Bar
        ScaleBarOverlay myScaleBarOverlay = new ScaleBarOverlay(mapView);
        mapView.getOverlays().add(myScaleBarOverlay);


        return rootView;
    }
    private void drawMarkerEdu(GeoPoint point,String title,String address,int subcategotyId) {
        Marker marker = new Marker(mapView);
        marker.setPosition(point);
        marker.setAnchor(Marker.ANCHOR_CENTER, Marker.ANCHOR_BOTTOM);


        if (subcategotyId >= 1 && subcategotyId <= 12)
            marker.setIcon(this.getResources().getDrawable(R.drawable.pin_feroza));
        else if (subcategotyId >= 13 && subcategotyId <= 17)
            marker.setIcon(this.getResources().getDrawable(R.drawable.pin_blue));
        else if (subcategotyId >= 18 && subcategotyId <= 19)
            marker.setIcon(this.getResources().getDrawable(R.drawable.pin_pink));
        else if (subcategotyId >= 20 && subcategotyId <= 21)
            marker.setIcon(this.getResources().getDrawable(R.drawable.pin_green));
        else if (subcategotyId >= 22 && subcategotyId <= 26)
            marker.setIcon(this.getResources().getDrawable(R.drawable.pin_yellow));
        marker.setSnippet(title);
        marker.setSubDescription(address);
        mapView.getOverlays().add(marker);


    }
    @Override
    public void onClick(View v) {

    }
}

Any suggestion will be highly appreciated!

Answer 1

This tutorial shows exactly what you want. Basically you override the InfoWindow class and give it your own layout.