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

 

以上です。

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

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

(注)以下のフォームより当社公式メールマガジンにご登録頂くことで
約6時間のFlutter動画講座が無料で受講できます!

(メールマガジンは登録無料・いつでも解除可)

[体験版]
ゼロからのFlutter
(Flutter初級編) 

 

【体験版講座に含まれるもの】
・約70本・約6時間の動画テキスト
・1つの課題アプリのソースコード
・Flutterアプリを作るための「環境構築ライブサポート(Google Meet)」
(「体験版」は全30時間超の「製品版」の約1/6を抜粋した講座です。「製品版」の詳細はこちらから)

 

【当社公式メルマガご登録6大特典】

\約6時間動画講座を無料プレゼント!/
今すぐ無料体験版に申し込む ▶
無料メルマガ登録で講座割引クーポンなど6大特典ゲット!

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

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)

はじめての方へ


みんプロ式プログラミング講座体系・ラインナップ
みんプロ式プログラミング講座受講の流れ(割引特典利用方法)
サイトマップ(みんプロHPコンテンツ一覧)
運営会社概要

みんプロ作成アプリ





みんプロ式動画講座(コア・Flutter)

ゼロからのFlutter(初級編)-はじめてのプログラミングからアプリリリースまで-
Flutter中級編1-Web通信・設計・状態管理・DIの基礎-
Flutter中級編2-Firebase/地図・カメラ連携等の基礎-
Flutter中級編3-広告/アプリ内課金等の基礎-
Flutter中級編4-Webアプリとレスポンシブデザインの基礎-

みんプロ式動画講座(サテライト)

Flutter/Dartトラブルシューティング・小ネタ集(コア初級編受講で無料プレゼント)
ゼロからのGit・GitHub(コマンドラインツールを極力使わないバージョン管理入門)
Flutter/Dartにおける設計・状態管理・DIの解説集
Dart逆引き大辞典
Flutterにおけるテストの基礎

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)
TOP