[안드로이드] 구글맵 커스텀 마커를 하는 2가지 방법

제가 이제까지 해온 마커를 커스텀 하는 2가지 방법에 대해 기록하고자 글을 씁니다.

1. 마커 이미지를  drawable 에 넣어놓고 markerOptions에서 변경하는 방법

-> 2020/01/15 - [개발] - [안드로이드] 구글맵 + 마커 클러스터링 + 커스텀 마커 + 마커 클릭 이벤트 구현

2. 마커 이미지를  inflate하여 xml 파일로 조작하여 변경하는 방법 

이렇게 2가지가 있습니다.

1번째 방법의 장점이라면 간편하고 가볍다라는 장점이 있습니다. 하지만 마커별로 변경되야하는 디테일은 바꾸기 어렵죠. 그냥 사전에 만들어놓은 이미지를 가져다 쓰는 것이니까요.

이번에 구글맵 상에 가격정보가 표시된 마커가 필요했는데 기존의 방식으로 하려면 가격정보가 적힌 마커를 가격별로 하나씩 만들고 불러와야하는 미친짓을 해야합니다. 그래서 2번째 방법을 사용하게 되었습니다.

 

목표!!

 

단계는 다음과 같습니다. 
1) 사용하고자 하는 마커 이미지를 xml에서 생성

 

marker.xml

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

    <TextView
        android:id="@+id/tv_marker"
        android:layout_width="120dp"
        android:layout_height="68dp"
        android:background="@drawable/marker_h_2"
        android:gravity="top|center"
        android:paddingTop="14dp"
        android:paddingStart="27dp"
        android:fontFamily="@font/nanum_square_round_otfeb"
        android:text="1000원"
        android:textSize="17dp" />
</FrameLayout>

2) 커스텀 마커를 view로 inflate 하고 바꾸고자 하는 textview 를 연결해주기

    private void setCustomMarkerView() {
        marker_root_view = LayoutInflater.from(this).inflate(R.layout.marker_hydrogenstation, null);
        tv_marker = (TextView) marker_root_view.findViewById(R.id.tv_marker);
    }

 

3) 마커를 그려주기. 지금 제 코드상에는 수소충전소의 리스트에서 값을 가져와서 getFee()로 가격정보를 가져와 tv_marker라는 TextView에 값을 넣어주고 addMarker의 옵션으로 marker_root_view를 넣고 있습니다. 
그전에 createDrawableFrowView 라는 함수에 대해 설명하겠습니다.

 private void drawMarker() {

        for ( int i = 0 ; i <hydrogenStationItemArrayList.size(); i++){
            hydrogen_station_item item =hydrogenStationItemArrayList.get(i);
            tv_marker.setText(item.getFee());
            Marker marker = mMap.addMarker(new MarkerOptions()
                    .position(new LatLng(item.getLatitude(), item.getLongitude()))
                    .title(item.getFee())
                    .snippet(String.valueOf(i))
                    .icon(BitmapDescriptorFactory.fromBitmap(createDrawableFromView(this, marker_root_view))));
        }

        return;
    }

 

4)  createDrawableFromView 여기에서 view를 가져와서 bitmap으로 전환하는 과정을 진행합니다.

  // View를 Bitmap으로 변환
    private Bitmap createDrawableFromView(Context context, View view) {

        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        view.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
        view.layout(0, 0, displayMetrics.widthPixels, displayMetrics.heightPixels);
        view.buildDrawingCache();
        Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bitmap);
        view.draw(canvas);

        return bitmap;
    }

 

이것으로 아래 화면과 같이 xml를 bitmap으로 전환하여 마커 이미지로 사용하는 결과를 얻었습니다.