Add Activity's background image in ActionBar

Question

In my application, I want to override the color of ActionBar and make it translucent. (color hex #40000000)

I'm also using a background image in my Activity.

Issue is the ActionBar not taking the background image as its part. That is the image is starting below the action bar. (as you can see in the screenshot below)

It seems the bacground color of ActionBar is white and the translucent color is rendered over it.

Another issue is, I'm also displaying a view just below to action bar. (See image below)

The height of this view is same as the height of Action bar. Fo this I'm using below code in my onCreate()

private void setTopPanelHeight() {
    // Calculating ActionBar height
    TypedValue tv = new TypedValue();
    if (getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
        // Height in pixels.
        Integer actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
        // Changing panel height.
        View panelView = findViewById(R.id.view_panel_below_action_bar);
        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) panelView.getLayoutParams();
        params.height = (int) actionBarHeight;
        panelView.setLayoutParams(params);
    }
}

<<

As suggested in many answers & in android docs, I tried to use:

<item name="android:windowActionBarOverlay">true</item>

And then increased my layout top-margin as suggested here

`android:layout_marginTop="?android:attr/actionBarSize"`

But, no use.

How can I make my background image included in the ActionBar & also do not disturb my view_below_actionbar & navigation drawer.

Thank You

enter image description here

score 1 · Accepted Answer · answered Apr 16 '14 at 18:16

windowActionBarOverlay should work.

If your using android support library, then you need to do like this

<item name="windowActionBarOverlay">true</item>

Here is an example custom style ...

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
</style>

<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">#40000000</item>
</style>

Luis Lavieri · Answer 2 · 2014-04-16T18:12:16.650

0

Take a look at this library -> GlassActionBar

You can download an example of the library from the Play Store

It does exactly what you need.

edited Apr 16 '14 at 18:12

answered Apr 16 '14 at 18:05

Luis Lavieri

4,064
6
39
69

Sattar Hummatli · Answer 3 · 2016-09-17T09:28:52.783

In my case this has worked.

This will overlay your main content of activity

<style name="AppTheme.ActionBar.Translucent" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowContentOverlay">@null</item>
    <item name="actionBarStyle">@style/MyActionBar</item>
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
</style>

<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar.Solid">
    <item name="background">@color/colorPrimaryTranslucent</item>
    <item name="backgroundStacked">@color/colorPrimaryTranslucent</item>
    <item name="backgroundSplit">@color/colorPrimaryTranslucent</item>
</style>

But if you want ActionBar translucent but don't overlay your content and your background image be under translucent ActionBar do as following.

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
    <item name="android:windowContentOverlay">@null</item>
    <item name="actionBarStyle">@style/MyActionBar</item>
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:windowActionBarOverlay">false</item>
    <item name="windowActionBarOverlay">false</item>
    <item name="android:windowBackground">@drawable/background_image</item>
</style>

<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar.Solid">
    <item name="background">@color/colorPrimaryTranslucent</item>
    <item name="backgroundStacked">@color/colorPrimaryTranslucent</item>
    <item name="backgroundSplit">@color/colorPrimaryTranslucent</item>
</style>

Add Activity's background image in ActionBar

3 Answers3