Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show text in drawable custom marker

I'm trying to create a Custom Marker that displays text with a number equal to the example below:

Example:

enter image description here

But when you run the application the text is not displayed, only the red ellipse appears without a number.

My Code

InicializeMap()##

 private void InicializeMap() 
{
    if (_googleMap == null) 
    {
        _googleMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.mapMapeamento)).getMap();

        LatLng pos = new LatLng(23.4555453556, 11.145315551);

        MapUtils mapUtils = new MapUtils(getApplicationContext());
        Bitmap bitmap = mapUtils.GetBitmapMarker();

        Marker marker = _googleMap.addMarker(new MarkerOptions()
                .position(pos)
                .icon(BitmapDescriptorFactory.fromBitmap(bitmap)));

        // check if map is created successfully or not
        if (_googleMap == null) 
            Toast.makeText(getApplicationContext(), Mensagens.erroCriarMapa, Toast.LENGTH_SHORT).show();
    }
}

My method to create the Bitmap

public Bitmap GetBitmapMarker()
{
    Paint color = new Paint();
    color.setTextSize(35);
    color.setColor(Color.BLACK);

    int px = _mContext.getResources().getDimensionPixelSize(R.dimen.map_dot_marker_size);

    Bitmap mDotMarkerBitmap = Bitmap.createBitmap(px, px, Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(mDotMarkerBitmap);
    canvas.drawText("Hello!", 30, 40, color);

    Drawable shape = _mContext.getResources().getDrawable(R.drawable.shape_marker_red);

    shape.setBounds(0, 0, mDotMarkerBitmap.getWidth(), mDotMarkerBitmap.getHeight());
    shape.draw(canvas);

    return mDotMarkerBitmap;
}

res/drawable/shape_marker_red

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <gradient
        android:angle="90"
        android:endColor="#f58383"
        android:startColor="#ee6464" />
    <stroke
        android:width="1dp"
        android:color="#a13939" />
</shape>
like image 841
Renan Barbosa Avatar asked May 09 '14 19:05

Renan Barbosa


1 Answers

This is what I came up with.

enter image description here

First, declare your marker options to add the marker on the map.

MarkerOptions options = new MarkerOptions()
                        .position(new LatLng(GlobalApp.getInstance().getLoginUserInfo().getLatitude(),
                                GlobalApp.getInstance().getLoginUserInfo().getLongitude()))
                        .draggable(false)
                        .flat(false)
                        .icon(BitmapDescriptorFactory.fromBitmap(createStoreMarker()));
                Marker tempMarker = globalGoogleMap.addMarker(options);

Add a function to inflate a layout of your specification and you can get their reference and add whatever you want.This is the place where the magic happens.

private Bitmap createStoreMarker() {
        View markerLayout = getLayoutInflater().inflate(R.layout.store_marker_layout, null);

        ImageView markerImage = (ImageView) markerLayout.findViewById(R.id.marker_image);
        TextView markerRating = (TextView) markerLayout.findViewById(R.id.marker_text);
        markerImage.setImageResource(R.drawable.ic_home_marker);
        markerRating.setText(GlobalApp.getInstance().getLoginUserInfo().getStoreName());

        markerLayout.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
        markerLayout.layout(0, 0, markerLayout.getMeasuredWidth(), markerLayout.getMeasuredHeight());

        final Bitmap bitmap = Bitmap.createBitmap(markerLayout.getMeasuredWidth(), markerLayout.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        markerLayout.draw(canvas);
        return bitmap;
    }

This is the layout

store_marker_layout.xml I am inflating

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_store_marker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:focusableInTouchMode="true"
    android:orientation="vertical">

    <TextView
        android:id="@+id/marker_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="8dp"
        android:text="dgdfgdfg"
        android:textColor="@android:color/black"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/marker_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/ic_home_marker" />

</LinearLayout>
like image 165
Kamlesh Avatar answered Sep 28 '22 11:09

Kamlesh