CODEWITHSUNDEEP
androidgoogle-maps-markers
Sangeetha
Sangeetha

Reputation: 516

How to load image from Network as marker icon in android?

I need to load image for a marker from the URL. Until image gets loaded from the URL I need to show the default image.And my map page will be like below:

enter image description here

Marker background image is white and icon(eg: bag and car) in it will come from network URL.

I have achieved relevant output by creating a marker using BitmapDescriptorFactory.fromBitmap.

 if (isAdded()) {
            marker = googleMap.addMarker(new MarkerOptions().icon(BitmapDescriptorFactory.fromBitmap(createDrawableFromView(setMarkerFromlayout(result, false, false), 200, 200)))
                    .position(pinLocation)
                    .title(parser.mapLocationList.get(pos).location_id)
                    .snippet("")
            );
        }
public static Bitmap createDrawableFromView(View v, int requestedWidth, int requestedHeight) {
    // Because the view is never shown it does not have a size, but if shown don't resize it.
    if (v.getMeasuredHeight() <= 0) {

        // You may want to change these lines according to the behavior you need.
        int specWidth = View.MeasureSpec.makeMeasureSpec(requestedWidth, View.MeasureSpec.AT_MOST);
        int specHeight = View.MeasureSpec.makeMeasureSpec(requestedHeight, View.MeasureSpec.AT_MOST);
        v.measure(specWidth, specHeight);
    }
    Bitmap b = Bitmap.createBitmap(v.getMeasuredWidth(), v.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
    Canvas c = new Canvas(b);
    v.layout(0, 0, v.getMeasuredWidth(), v.getMeasuredHeight());
    v.draw(c);
    return b;
}


private RelativeLayout setMarkerFromlayout(Bitmap resultImage, boolean isClickable, boolean isFirst) {

    LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.layout_map_custom_icon, null);
    RelativeLayout layoutIcon = (RelativeLayout) view.findViewById(R.id.layout_icon);
    ImageView imgBg = (ImageView) view.findViewById(R.id.bg_icon);
    ImageView imgdefault = (ImageView) view.findViewById(R.id.default_icon);

    if (isClickable) {
        layoutIcon.setBackground(ContextCompat.getDrawable(getActivity(), R.drawable.green_round_bg));
    }

    imgBg.setBackground(ContextCompat.getDrawable(getActivity(), R.drawable.map_bg));
    if(isFirst){
        imgdefault.setBackground(ContextCompat.getDrawable(getActivity(), R.drawable.marker_default));
    }
    final ImageView imgMap = (ImageView) view.findViewById(R.id.img_map_icon);

    if (!isFirst) {
        imgMap.setImageBitmap(resultImage);
    }

    RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) imgMap.getLayoutParams();
    layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
    layoutParams.height = BDevice.getPixelFromDp(getActivity(), 30);
    layoutParams.width = BDevice.getPixelFromDp(getActivity(), 30);
    layoutParams.setMargins(BDevice.getPixelFromDp(getActivity(), 10), BDevice.getPixelFromDp(getActivity(), 10), BDevice.getPixelFromDp(getActivity(), 10), BDevice.getPixelFromDp(getActivity(), 20));
    imgMap.setLayoutParams(layoutParams);

    return layoutIcon;
}

layout_map_custom_icon.xml:

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

  >
  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:id="@+id/bg_icon"
/>
  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:id="@+id/default_icon"
      />
  <ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_centerInParent="true"
     android:id="@+id/img_map_icon" />
</RelativeLayout>

But if i use the above method means, marker rendering is somewhat slow and also image is not maintained in cache. So whenever i quit the app each time image is downloaded and sets to the marker. Can we do the above process using any of the Image loading library like Picasso or Fresco or Glide? So that image will be maintained in Cache.

Please advice. Thanks.

Upvotes: 2

Views: 1540

Answers (1)

GuilhermeFGL
GuilhermeFGL

Reputation: 2919

Give a try to Picaso.

That is a library how easy load images and maintenance cache.

Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);

And about:

But if i use the above method means, marker rendering is somewhat slow

That cause may be about image size. Try to compress your image to reduce some bytes. This will make your loader faster.

Online compressor for iamgens

Upvotes: 1

Related Questions