[Android]ツールバー（Toolbar)を透明にする方法３ステップ

こんな感じで、アプリの上部にあるツールバー（Toolbar）の機能は使いたいけど、透明にしたい場合のやり方についてご紹介します（２階建ての「BasicActivity（マテリアルデザインの標準テンプレート）」を使う場合の方法です）。

 

該当する画面（Activity）のレイアウトファイル（activity_main.xmlなど）のxml部分を以下の３ステップで変更します。

１．Toolbarに設定されている背景（background）の部分を消す

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"　←　これを削除
        app:popupTheme="@style/AppTheme.PopupOverlay" />

 

２．AppbarLayout（Toolbarの親）の背景を透明にする

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:background="@android:color/transparent">　←　これを追加

ToolBarの背景を透明（android:background=”@android:color/transparent”）にしてやればいいような気がしますが、それではダメだったので、ToolBarの親であるAppbarLayoutの背景を透明にします。

 

３．AppbarLayoutの高さを「0dp」にする

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:background="@android:color/transparent"
    app:elevation="0dp">　←　これを追加

AppbarLayoutの背景を透明にしただけでは、ツールバーの高さが残ってしまうので、それもなくしてしまいます（段を残したい方は不要です）。

 

（全体のコード：activity_main.xml）

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:background="@android:color/transparent"
    app:elevation="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        app:titleTextAppearance="@style/Toolbar.TitleText">

    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

 

ちなみに、ツールバーのタイトルを消したい場合は、画面のソースコード（この例ではMainActivity.kt）で消してあげます。

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)
        title = ""　←　これ

        toolbar.apply {
            setNavigationIcon(R.drawable.ic_arrow_back_black_24dp)
            setNavigationOnClickListener {
                Toast.makeText(this@MainActivity, "矢印押したよ", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

 

以上です。

これで、ツールバーも使いながら、背景を画面いっぱいにすることができます。

（詳しくは下の動画で解説していますので、よろしければご覧ください）