Custom Translucent Android ActionBar
AndroidAndroid ActionbarAndroid 5.0-LollipopAndroid 4.0-Ice-Cream-SandwichAndroid 3.0-HoneycombAndroid Problem Overview
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>
Android Solutions
Solution 1 - Android
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();
Solution 2 - Android
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);
}
Solution 3 - Android
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.
Solution 4 - Android
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.
Solution 5 - Android
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>
Solution 6 - Android
I just like to share with you the steps I took to achieve this:
-
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.
-
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.
Solution 7 - Android
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.