Material Design Transparent ActionBar
Solution 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>
Solution 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:
Solution 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>
Solution 4
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">
Solution 5
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"/>
Related videos on Youtube
user3184899
Updated on July 09, 2022Comments
-
user3184899 almost 2 years
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.
-
user3184899 over 9 yearsGreat, It worked. But, as you can see here: fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/… There is a little shade of black at the top... can you tell me how to do it?
-
Cristian Gomez over 9 yearsmaybe this can help you stackoverflow.com/questions/17801289/…
-
AxA about 9 yearsIf you want tint (i.e. translucency), instead of
@null
as background (which results in full transparency), use color with alpha value like#30000000
-
karthik vishnu kumar almost 7 yearsIt works. Add getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY); before super.onCreate(savedInstanceState);
-
w3bshark about 6 yearsIt works for me if you remove the
android:background
attribute from the Toolbar and setandroid:background="@color/transparent"
on the AppBarLayout. -
user25 about 6 yearson Marshmallow there is no no exception with
<item name="colorPrimary">@android:color/transparent</item>
are you sure there was any issue on Lollipop ? -
Sadman Hasan over 5 yearsPerfect Solution! The transparent color throws an exception in Lollipop devices. API 22 doesn't allow alpha channel.
-
SendETHToThisAddress about 5 yearsIn 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.
-
Dyno Cris about 4 yearswhat? which theme need set as theme?!