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> 

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(); 

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); }