Androidのマップでマーカーにカスタムデザインを使いたい

Question

Androidのマップのマーカーにカスタムデザインのxmlファイルを用いたいと思っているのですが、マーカーのカスタムにはMarkerOptions().icon()メソッドを用いているのですが、そこではBitmapDescriptorFactoryがよく使われており、これではBMP画像しか使えないので困っております。

もしカスタムデザインをマーカーに適用させる方法を御存知でしたらご教授いただけますでしょうか。

Activityのソースコードは以下の通りです。

class MapActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_map)

        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap

        val nagoya = LatLng(35.170915, 136.881537)

        val pinIcon = BitmapDescriptorFactory.fromResource(R.drawable.ic_pin)

        mMap.addMarker(MarkerOptions().icon(pinIcon).position(nagoya).title("名古屋駅"))

        val cameraUpdate = CameraUpdateFactory.newLatLngZoom(nagoya, 15.0F)
        mMap.moveCamera(cameraUpdate)
    }
}

適用させたいXMLレイアウトは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="106dp"
    android:layout_height="67dp">

    <TextView
        android:id="@+id/pinTextView"
        android:layout_width="106dp"
        android:layout_height="20dp"
        android:background="@color/torch_red"
        android:text="2019/12/12 21:59"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/pinImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_pin" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

以下の記事でも扱っていますが、リソースファイルから生成したオブジェクトをBitmapで出力して使う、という方法がベストアンサーになっています。

Using an xml Layout for a Google Map Marker for Android

Comments

[Kawboy442]

ありがとうございました。頂いた回答を元に上記のようなコードとすることで解決しました。

Answer 2

頂いた記事を元にメソッドを追加し、下記のようなコードとすることで解決しました。

class MapActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_map)

        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap

        val nagoya = LatLng(35.170915, 136.881537)

        val nagoyaBitmap =
            createBitmap(
                "2020/3/10 12:30",
                ContextCompat.getColor(applicationContext, R.color. torch_red),
                R.drawable.ic_pin
            )

        mMap.addMarker(
            MarkerOptions().icon(BitmapDescriptorFactory.fromBitmap(nagoyaBitmap)).position(nagoya)
        )

        val cameraUpdate = CameraUpdateFactory.newLatLngZoom(nagoya, 15.0F)
        mMap.moveCamera(cameraUpdate)
    }

    private fun createBitmap(text: String, @ColorInt back: Int, Image: Int): Bitmap {

        val v: View = LayoutInflater.from(this).inflate(R.layout.pin_item_ic_pin, null)
        val tv: TextView = v.findViewById(R.id.annotationTextView)
        val mv: ImageView = v.findViewById(R.id.annotationImageView)
        tv.text = text
        tv.setBackgroundColor(back)
        mv.setImageResource(Image)

        v.measure(
            106,
            LinearLayout.LayoutParams.WRAP_CONTENT
        )

        val b = Bitmap.createBitmap(
            v.measuredWidth,
            v.measuredHeight,
            Bitmap.Config.ARGB_8888
        )
        val c = Canvas(b)
        v.layout(0, 0, v.measuredWidth, v.measuredHeight)
        v.draw(c)
        return b
    }
}

注意しなければいけないのが、適応するカスタムレイアウトがConstraintLayoutだと、java.lang.IllegalArgumentException: width and height must be > 0というエラーが出てしまうため、使用できませんでした。
FrameLayoutやLinearLayoutでは問題なかったため、今回は下記のようにLinearLayoutとしました。

また、メソッド内のv.measureで規定しているViewのサイズですが、上のwidthの部分をWRAP_CONTENTにしてしまうと見た目がタイトになってしまうので、カスタムレイアウトのwidthと同じサイズにしてあります。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="106dp"
    android:layout_height="67dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/pinTextView"
        android:layout_width="106dp"
        android:layout_height="20dp"
        android:background="@color/torch_red"
        android:text="2020/3/10 12:30"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/pinImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/ic_pin" />

</LinearLayout>

Comments

[kakajika]

LayoutInflater.inflate(...)の引数に親ViewGroupの情報を渡してあげないと、レイアウトXMLのルートとなるView（ご質問のコードの場合はConstraintLayout）のLayoutParamsが正しく設定されません。
適当にダミーのFrameLayoutを作って渡すようにしてみてください。これで回答に書かれている問題は解決するはずです。
LayoutInflater.from(this).inflate(R.layout.pin_item_ic_pin, FrameLayout(context), false)