Blog / 開発者ブログ

iOS7風のステータスバーを表示する (Android4.4以降)

2013.11.13

device-2013-11-13-161355 device-2013-11-13-161428 device-2013-11-13-161420

今回はタイトルにもあるようにステータスバーがiOS7風になる方法を紹介したいと思います。

実装方法はAPI Level19で新しく追加されたテーマ要素を利用し、ステータスバーとナビゲーションバーを半透明にするテーマスタイルを作成することで実現します。

要素名

内容

windowTranslucentStatus boolean ナビゲーションバーを半透明にする
windowTranslucentNavigation boolean ステータスバーを半透明にする

上記の要素を適用したテーマスタイルのコードは下記のような感じに。

<!-- ステータスバーを透過させるスタイル -->
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/TransparentActionBar</item>
    <item name="android:windowTranslucentNavigation">false</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

<!-- アクションバーの背景を透過にする -->
<style name="TransparentActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:titleTextStyle">@style/ActionBarStyleTitle</item>
</style>

<!-- アクションバーのタイトルを白色にする -->
<style name="ActionBarStyleTitle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">@android:color/white</item>
</style>

今回はiOS7っぽく見せるということでナビゲーションバーはそのままでステータスバーだけ半透明にします(4,5行目)。またフラットデザインっぽさを出すためにActionBarの影も消します(6行目)。

尚、APILevel19からしか利用できないのでSDKバージョンも19にする必要があります。


 

これだけだとただステータスバーが半透明になるだけなので、iOS7風に見せるためにはステータスバーとアクションバーの色を統一する必要があります。これに関してはレイアウトファイル側で対応します。



    

        
    


やってることは親レイアウトの背景色にステータスバーとアクションバーの色をセットし、2階層目のレイアウトの背景色にコンテンツの色をセット。また半透明テーマを適用したActivityはフルスクリーン扱いになってしまうのでfitSystemWindows要素をtrueにすることでコンテンツが正しくActionBarの下から描画されるようになります。

以上で完成です。試しに比較してみましょう。
左はiOS版Evernote、右が今回作成したテーマを適用したアプリです。

hikaku_ios hikaku_android
どうですか?まぁまぁ似てますね!

今までもAndroidのデザインでiOSに似せて作っているアプリはたくさんあったんですが、わざわざナビゲーションバーやバックボタンをViewで作ったり、その都度画像リソースを準備したりとけっこうめんどくさいものでした。あと個人的にはAndroidのUI/UXを無視して実装することにも開発者として抵抗がありました。

でも今回紹介した方法の場合はActionBarをそのまま利用しスタイルを少し変更するだけで実現でき、Androidのユーザービリティを損なわず見た目だけiOS7っぽくなるので割りと楽に実装できるかなと思います

(と言ってもAndroid4.4以降限定なので気軽に使うのにはあと2年ぐらいはかかると思いますが…)

そんなわけでみなさんももし旧OS切り捨て上等でAndroid4.4アプリを作る機会があれば是非試してみてくださいー