[音量設定アプリ]第6回 アプリのデザイン(テーマ)を変更

By 松田幸一
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

今回は上図のようにデザインの変更と英語表記に対応します。

Activity にテーマ(Theme)を設定

AndroidManifest.xml を開きます。
Applicationタブを開き、Application Nodes で VolumeSetting(Activity)を選択します。
右側に表示されるAttributes for .VolumeSetting (Activity) の中にある Theme に下記を入力します。

@android:style/Theme.Light.NoTitleBar

voltheme01

これは Light で NoTitleBar のテーマです。(背景が白で文字が黒、タイトルバー無し)
main.xml を編集するときに使用するレイアウトエディタで Theme という項目があります。そこで色々と確認ができますので他のテーマも見てみてください。

voltheme02

センタリングしている文字はなんだか右に寄っていますが、、、、

vol06dev1 vol06dev2

とりあえず、タイトルバーがなくなり、背景が白で文字が黒というようにはなりました。

次に「音量設定」のところにヘッダー画像を設定します。

TextView に背景画像を設定

設定したい画像を用意します。ファイル形式は png にしました。
TextView のサイズに合わせて画像の縮尺が変わるということを考慮して画像を作成します。
今回は説明を割愛しますが、9-pach 形式の画像を設定することでいろいろと幸せになれるかもしれません。
用意した画像は res/drawable に配置します。ファイル名は header_bg.png としました。

main.xml を開き TextView を選択します。
Properties の中の Background に用意した画像を設定します。
入力エリアの右に出てくるボタンで画像を選択します。

Background    @drawable/header_bg

用意した画像が色の濃いものだったため、せっかく文字を黒くしたのですが、、、反転させます。

Text appearance    @android:style/TextAppearance.Large
こう書かれているところを
Text appearance    @android:style/TextAppearance.Large.Inverse
こうしました。

vol06dev3 vol06dev4

ヘッダーの設定ができたので、同じようにフッターにも画像を設定します。
(ヘッダはあってもよさげですが、フッタはいらないだろうなぁとか思いますが、、、)

TextView を一番下に追加します。

voltheme03

vol06dev5

WEBサイトを作成することが多かったためか、ヘッダとフッタとグローバルナビみたいなデザインになりました。

このアプリに利用した画像はテックファームのホームページにあるヘッダ画像とフッタ画像です。

国際化

英語表記(国際化)については下記の記事を参考にしてください。

はじめての国際化

strings.xml に文字を設定しています。今回のチュートリアルでは日本語で作成しました。

国際化をするために、まずは res/ に フォルダ values-ja を作成し、strings.xml をコピーします。

次に、res/values/strings.xml に書かれている日本語をすべて英語にしちゃいます。

これで日本語圏以外の人には英語表記になります。

おまけ:アイコンを設定する

せっかく作ったアプリなので、マーケットに登録してしまいましょう!

そのときに開発時のアイコンのままだと恥ずかしいので、ととりかえます。
drawable フォルダにある icon.png をオリジナル交換して完了です。
drawable-xx というように複数のフォルダに icon.png があるのですべて交換します。

androlib というサイトがありますが、そこで初めてアプリを公開したときのアイコンが表示されます。
そのため、あとからアイコンを変えればいいや!とか思っていると、、、悲しいことになります。そこのサイトは後から変更されません。
あと、高解像度の端末向けにきれいなアイコンにしたほうがいいです。
私が公開しているアプリは HT-03A では普通に見えるアイコンだったので何もしなかったのですが、、、
Droid , NEXUS ONE ユーザからアイコンが「きたない」というコメントを多くいただいてしまいました。

vol06dev6

Volume の V というだけです。 ぱっとみて何のアプリなんだかわかりませんが、、、

音量設定アプリのチュートリアルは今回で終了です。ありがとうございました。

関連する投稿