デザイナーがこだわるAndroidアプリのデザインをXMLコーディングで実現する連載の4回目。前回は、グラデーションや影の部分を、実際の光と影に基づいて考えることを紹介しました。この考え方はどんなデザインのときにもついてまわりますので、頭に入れておきましょう。

　今回は引き続き、デザインの細部にこだわった表現を考えていきます。

タイトル部分に背景をつけ、影やボーダーをつけよう

　まず、「あなたの友猫」といったタイトル部分を見ていきましょう。

　ここでのデザインの特徴を整理しておきます。

図1●タイトル部分のデザインの特徴
[画像のクリックで拡大表示]

（A）テクスチャの使用
（B）【上側】影の描写（エリア全体にかかるもの）
（C）【下側】1pxのライン

　もしあなたにCSSの知識があるなら、（B）上側の影は、上の要素である検索ボックスにbox-shadowというプロパティを使って表現し、（C）下側の1pxのラインはborder-bottomというプロパティで表現したい、と思うでしょう。そうすることで、（B）と（C）については画像を使わなくともコードのみで表現できるからです。

　しかし、AndroidレイアウトのXMLのパラメーターにはそういったものが存在しませんので、すべて画像にしなければなりません。

図2●CSSの場合とXMLの場合の組み方の違い
[画像のクリックで拡大表示]

　XMLレイアウトの場合、画像の軽量化などを考えると上図のように3つの画像に分けるのが妥当です。3つとも、繰り返しの最小単位は非常に小さな画像になりますので、これを繰り返しながら、重ねて配置していくことになります。

＃今回（A）の背景画像については、テクスチャをかけている分を自然に見せるために、少し大きめの画像にしています。