【Android】ステータスバーを透過させる

2022/04/14に公開

スクリーンショットのように、ステータスバーを透過させる方法について書きたいと思います。

screenshot-01

Hide ActionBar

全体のテーマにNoActionBarを設定することで、アクションバーを非表示にします。

values/theme.xml(styles.xml)

<style name="Theme.YourAppName" parent="Theme.MaterialComponents.DayNight.NoActionBar">

activity_main.xml

ViewGroupの属性にfitsSystemWindows="true"をセットします。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_light"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity" />

MainActivity.kt

Window#setStatusBarColorで、ステータスバーにセットしたい色を渡します。

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // 「android.R.color.transparent」を指定することで、ステータスバーを透過させている
        window.statusBarColor = ContextCompat.getColor(this, android.R.color.transparent)
    }
}

ステータスバーの色をグレーで透過させたい場合は、以下のカラーリソースをcolors.xmlに追加して、ContextCompat.getColorに渡します。

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="transparent_status_bar">#50000000</color>
</resources>

MainActivity.kt

window.statusBarColor = ContextCompat.getColor(this, R.color.transparent_status_bar)

screenshot-02

Discussion