[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()
            }
        }
    }
}

 

以上です。

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

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

アバター

北川 博之(きーぼー)

みんなのプログラミング by Telulu LLC代表 大阪府生まれ。京都大学経済学部経済学科卒業。 2000年より、日本生命保険、ニッセイアセットマネジメント、パトナム・インベストメンツ(米国)で、日本株トレーダー・アナリスト、経営企画、システム開発等の業務に従事。主に日本株の売買執行・投資分析、経営計画の策定、海外投資家向け日本株営業、社内トレーディングシステム及び経理システムの開発等を行う。 2016年、合同会社てるる設立。スマホアプリプログラマーとして「新感覚脳トレアプリ・記憶戦隊オボエルンジャー」「Meisoー1番シンプルなマインドフルネス瞑想アプリ」をはじめとした、メンタルヘルス・知育系アプリを中心に4タイトル・計8本(Android・iOS)をリリース。 2017年、自身のこれまでの社会人経験・プログラミング経験・子育て経験を基に、プログラミングを通じて人々の人生を豊かにして、未来に希望の持てる明るい社会の実現に貢献したいとの想いから、プログラミング完全初心者と挫折経験のある人を支援する「プログラミング挫折撲滅プロジェクト・みんなのプログラミング by Telulu LLC」を設立し、プログラミングサポーター活動と心理カウンセリング活動を開始。これまでに3,000名を超える方のプログラミング挫折撲滅をサポート。

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

みんプロにかける想い

  1. プログラミングはみんなのもの!(プログラミングの醍醐味である「楽しさ」を伝えたい)

  2. トランプ政権2期目に起こるIT業界激震予想(前編:スマホの世界の構造問題に荒療治が行われる可能性)

  3. ぼくが別に言う必要のない挫折の黒歴史をあえてさらけ出している理由(自分の中にある「ブロック」を外すきっかけにしてほしい)

  4. プログラミングは手段の1つに過ぎない(目的は自分のアイデアを形にすること)

  5. トランプ政権2期目に起こるIT業界激震予想(後編:ブロックチェーンによるインターネットの再民主化が行われる可能性)

みんプロ作成アプリ




みんプロ代表の黒歴史


TOP