こんな感じで、アプリの上部にあるツールバー(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() } } } }
以上です。
これで、ツールバーも使いながら、背景を画面いっぱいにすることができます。
(詳しくは下の動画で解説していますので、よろしければご覧ください)