How to create a custom drawable pin with image marker

Question

I'm trying to create a custom marker image identical to:

I've created a layout with the background and the CircleImageView inside:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/user_marker_layout"
    android:layout_width="50dp"
    android:background="@drawable/ic_map_person_circle"
    android:layout_height="50dp">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/user_marker_icon"
            android:layout_centerHorizontal="true"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginTop="3dp"
            app:civ_border_color="#fff"
            android:layout_alignParentTop="true"

            android:contentDescription="@null"
            android:src="@drawable/ic_pin_user" />
             />
</RelativeLayout>

Where ic_map_person_circle drawable is:

And by code:

Glide.with(mContext).load(imageUri)
.placeholder(R.drawable.ic_default_user_image)
.error(R.drawable.ic_default_user_image)
.priority(Priority.HIGH)
.into(new SimpleTarget<GlideDrawable>() {
    @Override
    public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
        marker.setIcon(BitmapDescriptorFactory.fromBitmap(BitmapUtil.getMarkerBitmapFromView(resource,mContext)));
    }
});



public static Bitmap getMarkerBitmapFromView(Drawable drawable, Context context) {
    View customMarkerView =
            ((LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)).inflate(R.layout.circle_image_on_map, null);


    CircleImageView markerImage = (CircleImageView) customMarkerView.findViewById(R.id.user_marker_icon);
    customMarkerView.setBackground(context.getResources().getDrawable(R.drawable.ic_map_person_circle));
    markerImage.setImageDrawable(drawable);

    customMarkerView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
    customMarkerView.layout(0, 0, customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight());
    customMarkerView.buildDrawingCache();

    Bitmap returnedBitmap = Bitmap.createBitmap(customMarkerView.getMeasuredWidth(), customMarkerView.getMeasuredHeight(),
            Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(returnedBitmap);


    customMarkerView.draw(canvas);
    return returnedBitmap;

}

But I continue to have the same result, only the circle image:

What could be the problem?

Answer 1

I solved in moving the background image from the external layout to the CircleImageView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/user_marker_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/user_marker_icon"
            android:layout_centerHorizontal="true"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/ic_map_person_circle"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:paddingBottom="12dp"
            app:civ_border_color="#fff"
            android:layout_alignParentTop="true"

            android:contentDescription="@null"
            android:src="@drawable/ic_pin_user" />
             />
</RelativeLayout>