[Android] ステータスバーを透過させる

8239 ワード

Overview

以下の画像のように、ステータスバーを透過させる方法です。

screenshot-01

Setup

Hide ActionBar

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

values/theme.xml(styles.xml)

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

Layout

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

activity_main.xml

<?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" />

Description

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

MainActivity.kt

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