Material Design Transparent ActionBar

问题:

I'd like to know if anyone knows how to make an activity with transparent action bar, like the one you have in the new Google Play Store when you go to an app's page.

I don't care about the scrolling and turning from transparent into solid color background, I just need the action bar transparent.

Thanks.

回答1:

<item name="colorPrimary">@android:color/transparent</item> 

This above will result exception on Lollipop devices. colorPrimary must be opaque.

Stylish your actionbar using style:

<style name="ThemeActionBar"
        parent="Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:background">@null</item>
        <!-- Support library compatibility -->
        <item name="background">@null</item>
</style>

And in your theme, just include:

<item name="android:actionBarStyle">@style/ThemeActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/ThemeActionBar</item>
<item name="windowActionBarOverlay">true</item>

回答2:

You just need to put <item name="colorPrimary">@android:color/transparent</item> and set windowActionBarOverlay to true on your app theme like this:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="android:textColorPrimary">@color/my_text_color</item>
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="windowActionBarOverlay">true</item>
    </style>

</resources>

Final result should look like this:

回答3:

1) Set AppBarLayout elevation property to 0dp.

app:elevation="0dp"

2) Set Toolbar background color to transparent.

android:background="@android:color/transparent"

Whole xml will look like below:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:elevation="0dp">

    <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">

        ......

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

回答4:

Transparent Actionbar

values/styles.xml:

    <style name="AppTheme" parent="Theme.AppCompat.Light">
...
</style>

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
    <item name="android:windowContentOverlay">@null</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="colorPrimary">@android:color/transparent</item>
</style>

<style name="AppTheme.ActionBar" parent="AppTheme">
    <item name="windowActionBarOverlay">false</item>
    <item name="colorPrimary">@color/default_yellow</item>
</style>

values-v21/styles.xml:

    <style name="AppTheme" parent="Theme.AppCompat.Light">
    ...
</style>

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
    <item name="colorPrimary">@android:color/transparent</item>
</style>

<style name="AppTheme.ActionBar" parent="AppTheme">
    <item name="colorPrimaryDark">@color/bg_colorPrimaryDark</item>
    <item name="colorPrimary">@color/default_yellow</item>
</style>

use these themes in your AndroidManifest.xml to specify which activities will have a transparent or colored ActionBar

<activity
            android:name=".MyTransparentActionbarActivity"
            android:theme="@style/AppTheme.ActionBar.Transparent"/>

    <activity
            android:name=".MyColoredActionbarActivity"
            android:theme="@style/AppTheme.ActionBar"/>

回答5:

There is also way to do it pragmatically.

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
mActionBar.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
mActionBar.setElevation(0);

回答6:

<style name="AppTheme" parent="Theme.MaterialComponents">
    <item name="android:navigationBarColor" tools:targetApi="lollipop">@color/color_primary
    </item>
    <item name="android:statusBarColor" tools:targetApi="lollipop">@color/color_primary</item>
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryDark">@color/color_primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
</style>

<style name="MainTheme" parent="AppTheme">
    <item name="actionBarStyle">@style/MyTheme.ActionBar</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

<style name="MyTheme.ActionBar" parent="Widget.AppCompat.ActionBar">
    <item name="elevation" tools:targetApi="lollipop">0dp</item>
    <item name="background">@color/semi_transparent</item>
</style>
</resources>


<resources>
<color name="color_primary">#212121</color>
<color name="color_primary_dark">@android:color/black</color>
<color name="color_accent">#4285F4</color>
<color name="semi_transparent">#66000000</color>
</resources>