カスタム スタイル
Places UI キットのコンポーネントと UI キット以外の機能の色、タイポグラフィ、スペーシング、境界線、角をカスタマイズできます。
- Place Details コンポーネント
- Place Search コンポーネント
- 基本的な Place Autocomplete コンポーネント
- UI Kit 以外の Place Autocomplete ウィジェット
Places UI キットは、マテリアル デザイン（Google マップ固有の変更がいくつか加えられています）にほぼ基づいた、ビジュアル カスタマイズに対するデザイン システム アプローチを提供します。マテリアル デザインの色とタイポグラフィのリファレンスをご覧ください。デフォルトでは、スタイルは Google マップのビジュアル デザイン言語に準拠しています。
フラグメントをインスタンス化するときに、デフォルトのスタイル属性をオーバーライドするテーマを指定できます。オーバーライドされていないテーマ属性は、デフォルトのスタイルを使用します。
<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>
各コンポーネントの完全な例
- Place Details コンポーネントのスタイル設定の例。
- Place Search コンポーネントのスタイリングの例。
- 基本的な Place Autocomplete コンポーネントのスタイリングの例。