Material Design Transparent ActionBar

Question

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.

Thiago · Answer 1 · 2014-12-05T22:09:16.813

50

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

edited Dec 05 '14 at 22:09

answered Dec 04 '14 at 19:10

Thiago

661
4
6

7

If you want tint (i.e. translucency), instead of `@null` as background (which results in full transparency), use color with alpha value like `#30000000` – rpattabi Apr 28 '15 at 02:05
on Marshmallow there is no no exception with `@android:color/transparent ` are you sure there was any issue on Lollipop ? – user25 Apr 29 '18 at 09:00
**Perfect Solution!** The transparent color throws an exception in **Lollipop devices.** **_API 22 doesn't allow alpha channel._** – Sadman Hasan Jan 29 '19 at 00:01

score 27 · Answer 2 · edited Feb 26 '15 at 10:48

27

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:

final result of code

edited Feb 26 '15 at 10:48

Jonik

80,077
70
264
372

answered Oct 25 '14 at 02:13

Chris Gomez

6,644
4
18
39

Great, It worked. But, as you can see here: https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10629709_805789872797492_6827913796269231038_n.jpg?oh=ac43335ed7c387f8c6ed10edfd1faa0f&oe=54B0A62D&__gda__=1420431431_2dfb271b8cb28aee5df2b805507d7e5e There is a little shade of black at the top... can you tell me how to do it? – user3184899 Oct 26 '14 at 12:49
maybe this can help you http://stackoverflow.com/questions/17801289/android-translucent-background-with-shadow – Chris Gomez Oct 30 '14 at 23:52

score 11 · Answer 3 · answered Jun 09 '16 at 07:17

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>

It works for me if you remove the `android:background` attribute from the Toolbar and set `android:background="@color/transparent"` on the AppBarLayout. — w3bshark, Apr 24 '18 at 14:47

score 10 · Answer 4 · edited Sep 28 '20 at 05:21

to styles.xml:

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

to colors.xml:

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

in AndriodManifest.xml select MainTheme: android:theme="@style/MainTheme">

what? which theme need set as theme?! – Dyno Cris Feb 09 '20 at 21:04 — Dyno Cris, Feb 09 '20 at 21:04

score 8 · Answer 5 · answered May 21 '19 at 04:42

8

This worked for me

getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);   
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

answered May 21 '19 at 04:42

John Joe

12,412
16
70
135

score 7 · Answer 6 · answered Nov 12 '16 at 10:29

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

In my manifest file I put android:theme="@style/AppTheme.ActionBar.Transparent" in the activity tag as shown and it would not work for me. Then I moved it inside the application tag (line 11 for me) and it worked. — SendETHToThisAddress, Mar 27 '19 at 16:53

score 3 · Answer 7 · answered Apr 20 '16 at 14:29

3

There is also way to do it pragmatically.

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

answered Apr 20 '16 at 14:29

Roman Nazarevych

7,513
4
62
67

1

It works. Add getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY); before super.onCreate(savedInstanceState); – karthik vishnu kumar Jul 28 '17 at 09:54

Material Design Transparent ActionBar

7 Answers7

Linked