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

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

 

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

1.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" />

 

2.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の背景を透明にします。

 

3.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()
            }
        }
    }
}

 

以上です。

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

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

こんな記事も読まれています

おすすめコンテンツ




Flutter(フラッター)


みんプロ作成アプリ




TOP