LoginSignup
2
3

More than 5 years have passed since last update.

AppBarLayoutの下に配置したToolBarを透過する

Posted at

方法

  • styles.xmlでTheme.AppCompat.Light.NoActionBarを継承したテーマを作成し、デフォルトのActionBarを非表示にする
  • ToolBarを表示するだけのapp_bar.xmlを作成し、任意のレイアウトにincludeして使う

styles.xml

styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="MyActionBar">
        <item name="android:textColorPrimary">@android:color/black</item>
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="windowActionBarOverlay">true</item>
    </style>

</resources>

app_bar.xml

app_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="false"
        android:theme="@style/MyActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" />

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

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

ToolBarの影を消すには

app_bar.xmlのandroid.support.design.widget.AppBarLayoutにapp:elevation="0dp"を追記

説明とか

肝心なのは<item name="colorPrimary">@android:color/transparent</item>android:theme="@style/MyActionBar"の部分
colorPrimaryをこのように設定しないと、AppBarLayoutにデフォルトのテーマのカラーが適用されて透過できない(真っ青なバーが表示される)

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3