ボタン

ボタンは、ユーザーが触れたときに行う動作を伝えます。

ボタンは、標準の Android オープンソース プロジェクト(AOSP)コンポーネントです。背景は単色、または未塗りつぶし(背景が透明)のいずれかです。塗りつぶされたボタンは、メインまたは優先する操作を示します。常にグループ単位で表示されるタブとは異なり、ボタンは個別に表示することも、グループ化して表示することもできます。


構造

ボタンの構造
1. 塗りつぶされていないボタンコンテナ
2. メインの操作または優先操作を示す塗りつぶしボタンコンテナ
3. ボタンのラベル

仕様

ボタンの長さの最大値と最小値

ボタンラベルの最大長は 20 文字です。ボタンの最小幅は 156 dp です。
ボタンラベルの最大長は 20 文字です。ボタンの最小幅は 156 dp です。

アイコン付きのボタンとデフォルトのボタンの比較

ボタンにはアイコンを含めることができます。含まれている場合、アイコンは通常、ボタンテキストの左側に表示されます。
ボタンにはアイコンを含めることができます。含まれている場合、アイコンは通常、ボタンテキストの左側に表示されます。

ボタンは、アプリバーダイアログなどの他のコンポーネントの要素として表示できます。

アプリバー内のボタンの配置

アプリバーの右側にボタンを配置する
アプリバーの右側にボタンを配置する

ダイアログ内のボタン

ダイアログのボタンは通常、ダイアログの左下に配置する
ダイアログのボタンは通常、ダイアログの左下に配置します。

ヒーローボタン

ヒーローボタンの角が丸く、ボタンの重要性が際立つ
ヒーローボタンの角が丸く、重要性が際立つ

カスタマイズ

OEM は、ボタンの外観を次のように変更することで、ブランドを反映できます。

  • アクセント カラーの指定
  • カスタム アイコンの指定
  • カスタム フォントの追加
  • 有効なボタン、無効なボタン、無効なボタンの外観を変更する
  • ボタンのサイズ、角の形状、配置を設定する
  • モーションを使用してユーザーにフィードバックを提供する

Car UI ライブラリ統合ガイドには、コンポーネントのカスタマイズに関する OEM のガイダンスが記載されています。

デザイン システムは、レイアウト、色、タイポグラフィ、サイズ設定、シェイプ、モーションを使用してコンポーネントをカスタマイズするための具体的なガイダンスを提供します。


埋められなかったボタンと塗りつぶされたボタン
塗りつぶしボタンは主要な操作を示します
無効になっている塗りつぶしボタン
この塗りつぶしボタンの色と不透明度は無効状態を示します
未入力ボタンのダイアログ
ダイアログの塗りつぶされていないボタンは、アクションが均等に重み付けされていることを示します。
ボタンの波紋効果の時間
これらのリップル モーションの長さは 330 ms です。ボタンでユーザーの連絡先を確認するために使用されます。
ボタンの波紋アニメーション
これらの波紋は、最初はボタンの表面の 60% を覆います。ユーザーのタップから離れる方向に拡張し、ボタンの端から 10 dp の距離で停止します。