タブアイコンは、マルチタブ インターフェースで個々のタブを表すために使用されるグラフィック要素です。各タブアイコンには、未選択と選択済みの 2 つの状態があります。
密度別のアイコンセットを提供するで説明されているように、低密度、中密度、高密度の画面用に別々のアイコンセットを作成する必要があります。これにより、アプリをインストールできるさまざまなデバイスでアイコンが適切に表示されます。複数のアイコンセットを使用する際のおすすめの方法については、デザイナー向けのヒントをご覧ください。
最終的なアートは透過 PNG ファイルとしてエクスポートする必要があります。背景色を含めないでください。
Adobe Photoshop でアイコンを作成するためのテンプレートは、アイコン テンプレート パックで入手できます。
警告:
Android 2.0 では、以前のバージョンからタブアイコンのスタイルが大幅に変更されています。すべての Android バージョンをサポートするには、デベロッパーは以下を行う必要があります。
1. Android 2.0 以降のタブアイコンを、drawable-hdpi-v5、drawable-mdpi-v5、drawable-ldpi-v5 ディレクトリに配置します。
2. 以前のバージョンのタブアイコンを、drawable-hdpi、drawable-mdpi、drawable-ldpi ディレクトリに配置してください。
3. アプリ マニフェストの <uses-sdk> で android:targetSdkVersion を 5 以上に設定します。これにより、新しいタブスタイルを使用してタブをレンダリングする必要があることがシステムに通知されます。
2 つのタブの状態に対するアイコンの提供
タブアイコンには、未選択と選択済みの 2 つの状態があります。複数の状態を持つアイコンを提供するには、デベロッパーはアイコンごとに状態リスト ドローアブルを作成する必要があります。これは、さまざまな UI 状態に使用する画像をリストした XML ファイルです。
たとえば、「友達」と「同僚」という名前のタブを含むタブ ウィジェットの場合、次のようなディレクトリ構造を使用できます。
res/...
drawable/...
ic_tab_friends.xml
ic_tab_coworkers.xml
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...
上記の XML ファイルの内容は、対応するアイコン ドローアブル（選択または未選択）を参照する必要があります。たとえば、ic_tab_friends.xml のコードは次のようになります。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- selected state -->
<item android:drawable="@drawable/ic_tab_friends_selected"
android:state_selected="true"
android:state_pressed="false" />
<!-- unselected state (default) -->
<item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>
Android 2.0〜Android 2.3
以下のガイドラインでは、Android 2.0 ～ Android 2.3（API レベル 5 ～ 10）のタブアイコンをデザインする方法について説明します。
サイズと配置
タブアイコンはシンプルなシェイプおよびフォームを使用し、最終的なアセット内にスケーリングして配置する必要があります。
図 1 は、アセット内にアイコンを配置するさまざまな方法を示しています。アイコンのサイズは、アセットの実際の境界よりも小さくする必要があります。
アイコンの推奨サイズを示すために、図 1 の各例には 3 つの異なるガイド用の長方形が含まれています。
- 赤色のボックスは、アセット全体の境界ボックスです。
- 青いボックスは実際のアイコンの推奨境界ボックスです。アイコン ボックスは、特別なアイコン処理を可能にするためにアセット ボックス全体よりも小さく設定されています。
- オレンジ色のボックスは、コンテンツが正方形の場合に、実際のアイコンに推奨される境界ボックスです。正方形のアイコンのボックスは他のアイコンのボックスよりも小さくなっており、2 つのタイプ全体で一貫した視覚的な重みが確保されています。
|
|
|
|
|
|
|
図 1.アイコン アセットの境界内でのタブアイコンのサイズと配置。 |
スタイル、色、効果
タブアイコンは、フラットかつマットな、正面向きの画像にします。
タブアイコンには、選択済みと未選択の 2 つの状態があります。
|
図 2.未選択のタブアイコンのスタイルと効果 注: ピクセルサイズはすべて中密度用です。他の密度の場合は適宜サイズ調整する必要があります。
|
|
図 3. 選択済みのタブアイコンのスタイルと効果 注: ピクセルサイズはすべて中密度用です。他の密度の場合は適宜サイズ調整する必要があります。
|
推奨事項と非推奨事項
以下に、アプリケーションのタブアイコンを作成する際の「すべきこと」と「すべきでないこと」の例をいくつか示します。
アイコンの例
Android プラットフォームで使用される標準の高密度タブアイコンを以下に示します。
警告: これらのリソースはプラットフォームのバージョンによって異なる可能性があるため、システムのリソースのコピーを参照しないでください。アイコンやその他の内部ドローアブル リソースを使用する場合は、それらのアイコンやドローアブルのローカルコピーをアプリリソースに格納し、アプリコードからローカルコピーを参照する必要があります。これにより、システムのコピーが変更された場合でも、アイコンの外観を制御できます。以下のグリッドは完全なものではないことに注意してください。
Android 1.6 以前
以下のガイドラインでは、Android 1.6（API レベル 4）以前のタブアイコンをデザインする方法について説明します。
構造
- 未選択のタブアイコンには、メニュー アイコンと同じ塗りつぶしグラデーションと効果が適用されますが、外側のグローはありません。
- 選択済みのタブアイコンは、未選択のタブアイコンと同じように見えますが、内側のシャドウが薄く、前面部分のグラデーションはダイアログ アイコンと同じです。
- タブアイコンは 1 ピクセルのセーフフレームを使用します。このセーフフレームは、円形のアンチ エイリアスの端と重なるように配置してください。
- このページで指定されているサイズはすべて、32x32 ピクセルのアートボードのサイズが基準になっています。Photoshop テンプレート内の境界ボックスの周りには 1 ピクセルのパディングを確保します。
|
図 3. 未選択のタブアイコンのセーフフレームと塗りつぶしグラデーション。（アイコンのサイズは 32 x 32） |
|
図 4. 選択状態のタブアイコンのセーフフレームと塗りつぶしグラデーション。（アイコンのサイズは 32 x 32） |
未選択のタブアイコン
ライト、効果、シャドウ
未選択のタブアイコンは選択済みのタブアイコンと似ていますが、内側のシャドウが薄く、前面部分のグラデーションはダイアログ アイコンと同じです。
|
図 5. 未選択のタブアイコンのライト、エフェクト、シャドウ。
|
詳細な手順
|
選択済みのタブアイコン
選択されたタブアイコンには、メニュー アイコンと同じ塗りつぶしのグラデーションと効果が適用されますが、外側のグローはありません。
|
図 6: 選択したタブアイコンのライト、効果、シャドウ
|
カラーパレット
|
詳細な手順
|
