タブへアイコンを表示させる

上記のようにタブへアイコンを表示させるには、

TabHost.TabSpec クラスの setIndicator 関数の第二引数へ

アイコンの Drawable を渡すことにより表示が可能です。

//********************

// タブ１ 設定

//********************

// タブの生成

TabSpec tab1 = tabHost.newTabSpec("tab1");

// タブに表示する文字列、アイコンをセット

tab1.setIndicator("タブ１", getResources().getDrawable(drawable.ic_dialog_info));

// タブ選択時に表示するビューをセット

tab1.setContent(R.id.contentlayout1);

// タブホストにタブを追加

tabHost.addTab(tab1);

また、下記のように独自の画像をアイコンへ表示させたい場合、

PNG形式で下記３つの画像サイズのファイルが必要です。

ldpi - 24 x 24 px

mdpi - 32 x 32 px

hdpi - 48 x 48 px

詳しくは、こちら

画像を用意したら、それぞれ下記ディレクトリへ設置します。

res/drawable-ldpi

res/drawable-mdpi

res/drawable-hdpi

それぞれのディレクトリへ bluehills.png という画像ファイルを設置したとした場合、

下記のように記述すればタブへ画像が表示されます。

//********************

// タブ１ 設定

//********************

// タブの生成

TabSpec tab1 = tabHost.newTabSpec("tab1");

// タブに表示する文字列、アイコンをセット

tab1.setIndicator("タブ１", getResources().getDrawable(R.drawable.bluehills));

// タブ選択時に表示するビューをセット

tab1.setContent(R.id.contentlayout1);

// タブホストにタブを追加

tabHost.addTab(tab1);

画像ファイルが合っていないものを設定した場合、下記のようにテキストの下に画像が被ってきます。

試しに 100 x 100 px の画像ファイルを res/drawable-nodpi へ設置してタブへ表示させてみたところ、

このようになりました。

↓

文字に被るような画像、または文字列も画像に含めてしまうようなタブを作る場合は、大きな画像サイズでも良いのかもしれない。

参考として TabHost.TabSpecクラスの setIndicator 関数は、

引数として渡すものを変えることにより以下の３種類があります。

タブへテキストのみを表示する

setIndicator(CharSequence label)

タブへテキストとアイコンを表示する

setIndicator(CharSequence label, Drawable icon)

タブを独自ビューによってカスタマイズする

setIndicator(View view)