Custom Translucent Android ActionBar

Question

I've been scouring the interwebs (e.g. Android documentation, answers here, etc.) for the answer to what I thought would be a fairly trivial question. How do you achieve a translucent action bar like the ones in Google Music and YouTube (links are image examples)?

I want video content to be full screen and not constrained/pushed down by the action bar while still leveraging the benefits of a built in UI component. I can obviously use a completely custom view, but I'd rather leverage the ActionBar if possible.

Manifest

<activity
    android:name="videoplayer"
    android:theme="@android:style/Theme.Holo"
    android:launchMode="singleTop"
    android:configChanges="keyboardHidden|orientation"/>

Activity

// Setup action bar
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
View customActionBarView = getLayoutInflater().inflate(R.layout.player_custom_action_bar, null);
actionBar.setCustomView(customActionBarView,
                        new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
                                                   R.dimen.action_bar_height));
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

Menu

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/button1"
        android:icon="@drawable/button1"
        android:showAsAction="always"/>

    <item
        android:id="@+id/button2"
        android:icon="@drawable/button2"
        android:showAsAction="always"/>
</menu>

Custom ActionBar View

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_action_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:background="@color/TranslucentBlack">

    <!--Home icon with arrow-->
    <ImageView
        android:id="@+id/home"
        android:src="@drawable/home"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>

    <!--Another image-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:visibility="visible"/>

    <!--Text if no image-->
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:visibility="gone"/>

    <!--Title-->
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:paddingLeft="20dp"
        android:gravity="center_vertical"/>
</LinearLayout>

Cateyed

Answered here: #16940314 – Sugary

Answer 1

If you want your activity to be fullscreen but still show an actionbar, but with an alpha you have to request overlaymode for the actionbar in onCreate() of your activity:

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

//getWindow().requestFeature(WindowCompat.FEATURE_ACTION_BAR_OVERLAY); << Use this for API 7+ (v7 support library) 

Then after you call setContentView(..) (since setContentView(..) also initializes the actionbar next to setting the content) you can set a background drawable on your actionbar:

getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_bg));

which can be a shape drawable with an alpha put in res/drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <solid android:color="#BB000000" /> 
</shape>

You could also do this completely programatically by creating a ColorDrawable:

getActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(128, 0, 0, 0)));

Otherwise ofcourse you can hide the actionbar completely; in that case you can set a custom theme on your activity in your manifest:

@android:style/Theme.NoTitleBar.Fullscreen

or programmatically by calling

getActionBar().hide();

Sike

Thanks! I figured it was something simple I was missing. – Cateyed

Do you know how to adjust the height of the action bar? My dimension doesn't seem to have an effect! actionBar.setCustomView(customActionBarView, new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, R.dimen.action_bar_height)); – Cateyed

im not sure if you can actually change the height of the actionbar, I would guess not, but if possible I recommend against it since it is a definitive UI component in honeycomb. – Sike

is there a way to toggle the overlay vs solid action bar in the same activity? i.e using viewSwitcher switching from map view overlay action bar to list view solid action bar (so list items don't render beneath the action bar)... – August

@tote, you just call getActionBar().setBackgroundDrawable(...) with your solid background to change it. – Bridle

Answer 2

In addition to the correct answer, if you are using AppcomatActivity, call supportRequestWindowFeature instead of

Old Version: getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

You want to use:

@Override
protected void onCreate(Bundle savedInstanceState) {
    supportRequestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
    super.onCreate(savedInstanceState);
}

Maganmagana

Answer 3

I think you should be able to do this using the Window flag FEATURE_ACTION_BAR_OVERLAY.

Before you call setContentView() in your activity,

Call:

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

And it will use an overlaid ActionBar instead of pushing down your window.

Pretty

Answer 4

The above code is absolutely correct for making an action bar.

Instead of

getActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(128, 0, 0, 0)))

use

getActionBar().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

In this way, you will able to see the action bar fully transparent.

Kathaleenkatharevusa

Answer 5

Here is how I got this to work:

1) Request for actionbar overlay programmatically by calling

       getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

this 'requestFeature()' must be requested from your activity 'onCreate()' method before calling for 'setContentView(R.layout.my_layout)':

2) set the actionbar color by calling setBackgroundDrawable() like so:

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00212121")) );

this method requires either a reference to a drawable or you can also use a color parser to parse a hex color value (first 2 digits are used for alpha channel starting at #00 to #FF)

Note that I am using actionBarSherlok getSupportActionBar() but this should work with any action bar.

If you still cant get this to work, try adding this to your theme style

<item name="windowActionBarOverlay">true</item>
 <item name="android:actionBarStyle">@style/ActionBar.Transparent.Example</item>
 <item name="android:windowActionBarOverlay">true</item>

Felic

Answer 6

I just like to share with you the steps I took to achieve this:

1) At the OnCreate of your activity,

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

then

getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

This is done before setContentView.

2) After setContentView, you can do the following

 getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.argb(0, 100, 181, 246)));

Where the alpha value of 0 means it is fully transparent.

Hemidemisemiquaver

Answer 7

Step I : Firstly, Set your theme at styles.xml

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

Step II : Second, you have to set theme to your activity at AndroidManifest.xml

    <activity android:name=".activity.YourActivity"
        android:theme="@style/AppTheme.NoActionBar"/>

Step III : Now, In your activity layout file set like this:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/agri_bg_login">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tool_bar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    </RelativeLayout>

Finally, You can set it in your activity.

    Toolbar tool_bar = findViewById(R.id.tool_bar);
    setSupportActionbar(tool_bar);
    getSupportActionbar().setTitle("Your actionbar title");
    getSupportActionbar().setDisplayHomeAsUpEnabled(true);

That's all, You'll get result with transparent Actionbar. Also, Here if you want to display drawer toggle button and menu, It'll show them.

Amal