woshidan's blog

そんなことよりコードにダイブ。

Androidの上とか下とかのバーについてのメモ

忘れがちなのでメモ。

http://developer.android.com/intl/ja/training/material/theme.html

http://developer.android.com/intl/ja/about/versions/android-4.4.html

StatusBarを半透明 -> v19から

指定を書く箇所

  • styles.xml -> true
  • layout -> android:fitsSystemWindows="false" in xmlのレイアウト

NavigationBarを半透明 -> v19から

指定を書く箇所

  • styles.xml -> true

上2つを合わせた記述例

<!-- values-v19/styles.xml -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- 下記指定はv19から可 -->
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>

<!-- layoutのxml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    ... (略)

透明以外のStatusBar, NavigationBarの色 -> v21から

https://developer.android.com/intl/ja/sdk/api_diff/21/changes.html

記述例

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <!-- 下記指定はv19から可 -->
        <item name="android:navigationBarColor">#f00</item>
        <item name="android:statusBarColor">#0f0</item>
    </style>
</resources>