プラットフォームを選択: Android iOS JavaScript

カスタム スタイル

場所の詳細のビジュアル カスタマイズ
ビジュアルのカスタマイズの例

Places UI キットの次のコンポーネントの色、タイポグラフィ、スペーシング、境界線、角をカスタマイズできます。

Places UI キットは、マテリアル デザイン（Google マップ固有の変更がいくつか加えられています）にほぼ基づいた、ビジュアル カスタマイズに対するデザイン システム アプローチを提供します。マテリアル デザインの色とタイポグラフィのリファレンスをご覧ください。デフォルトでは、スタイルは Google マップのビジュアル デザイン言語に準拠しています。

Place Details のカスタマイズ オプション

フラグメントをインスタンス化するときに、デフォルトのスタイル属性をオーバーライドするテーマを指定できます。オーバーライドされていないテーマ属性は、デフォルトのスタイルを使用します。

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

次のスタイルをカスタマイズできます。

テーマ属性 用途
色
placesColorSurface コンテナとダイアログの背景
placesColorOutlineDecorative コンテナの境界線
placesColorPrimary リンク、読み込みインジケーター、概要アイコン
placesColorOnSurface 見出し、ダイアログのコンテンツ
placesColorOnSurfaceVariant お店/スポット情報
placesColorSecondaryContainer ボタンの背景
placesColorOnSecondaryContainer ボタンのテキストとアイコン
placesColorNeutralContainer 日付バッジ、読み込みプレースホルダの形状を確認
placesColorOnNeutralContainer レビューの日付、読み込みエラー
placesColorPositiveContainer EV 充電器ありバッジ
placesColorOnPositiveContainer 利用可能な EV 充電器バッジのコンテンツ
placesColorPositive 「営業中」ラベルを配置
placesColorNegative 閉店した場所のラベル
placesColorInfo 入口がバリアフリーのアイコン
placesColorButtonBorder [地図で開く] ボタンと [OK] ボタン
   
タイポグラフィ
placesTextAppearanceBodySmall お店/スポット情報
placesTextAppearanceBodyMedium 場所の情報、ダイアログのコンテンツ
placesTextAppearanceLabelMedium バッジのコンテンツ
placesTextAppearanceLabelLarge ボタンのコンテンツ
placesTextAppearanceHeadlineMedium ダイアログの見出し
placesTextAppearanceDisplaySmall 場所の名前
placesTextAppearanceTitleSmall 場所の名前
   
スペーシング
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
測定
placesBorderWidth コンテナ
placesBorderWidthButton
   
シェイプ
placesCornerRadius コンテナ
placesCornerRadiusButton [マップで開く] ボタンと [OK] ボタン（丸いアイコンボタンを除く）
placesCornerRadiusThumbnail サムネイル画像を配置する
placesCornerRadiusCollageOuter メディア コラージュ
placesCornerRadiusCard 場所情報カード、ユーザー レビューカード
placesCornerRadiusDialog Google マップの開示ダイアログ
   
Google マップのブランド アトリビューション
placesColorAttributionLightTheme ライトモードの Google マップのアトリビューションと開示ボタン（白、グレー、黒の列挙型）
placesColorAttributionDarkTheme ダークモードの Google マップのアトリビューションと開示ボタン（白、グレー、黒の列挙型）

アトリビューションの色

アトリビューション
アトリビューション

Google マップの利用規約では、Google マップの帰属表示に 3 つのブランドカラーのいずれかを使用することが義務付けられています。この帰属情報は、カスタマイズの変更が行われたときに表示され、アクセス可能である必要があります。

ライトモードとダークモードで個別に設定できる 3 つのブランドカラーから選択できます。

  • ライトモード: 白、グレー、黒の列挙値を持つ placesColorAttributionLight。
  • ダークモード: 白、グレー、黒の列挙型値を持つ placesColorAttributionDark。

例

このコードサンプルは、デフォルトのスタイル属性をオーバーライドするテーマを作成する方法を示しています。オーバーライドされていないテーマ属性は、デフォルトのスタイルを使用します。
  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

各コンポーネントの完全な例